Angular2 chat app

examples/README.md

@@ -18,6 +18,9 @@ some of their dependencies.
 
 If you have any questions just ask on [Slack](http://slack.rethinkdb.com) or [Twitter](https://twitter.com/rethinkdb)!
 
+## Angular2
+* [Angular2 Chat App](/examples/angular2-chat-app/)
+
 ## CycleJS
 
 * [CycleJS Chat App](/examples/cyclejs-chat-app)

examples/angular2-chat-app/README.md

@@ -0,0 +1,10 @@
+Horizon Chat example using Angular2
+
+Running this example
+
+1. Install Horizon: "npm install -g horizon"
+2. Install RethinkDB: https://rethinkdb.com/docs/install
+3. Prep the project "cd dist && npm i && cd .."
+4. Run "horizon init" in this directory
+5. Run "horizon serve --dev"
+6. Open http://127.0.0.1:8181

examples/angular2-chat-app/dist/app/app.component.ts

@@ -0,0 +1,19 @@
+///<reference path="./horizon.d.ts" />
+
+import {Component} from '@angular/core';
+import {ChatComponent} from './components/chat/chat.component'
+
+@Component({
+    selector: 'my-app',
+    template: '<chat></chat>',
+    directives: [ChatComponent],
+    styles:[`     chat{
+            margin: auto;
+            max-width: 800px;
+            width:100%;
+            display:block;
+
+        }
+        `]
+})
+export class AppComponent { }

examples/angular2-chat-app/dist/app/components/chat/chat.component.ts

@@ -0,0 +1,91 @@
+import {Component, OnInit} from '@angular/core';
+import {ChatService} from './chat.service'
+
+@Component({
+    selector: '<chat></chat>',
+    styles: [`
+        ul {
+            list-style-type: none;
+            padding:0;
+        }
+
+        .message {
+            height: 50px;
+            padding:5px;
+        }
+
+        .message img {
+            vertical-align:middle;
+        }
+        .message .text {
+            vertical-align:middle;
+            margin-left:5px;
+            font-size:20px;
+        }
+        .message .datetime {
+             color:darkgrey;
+             float:right;
+        }
+        form{
+
+        }
+        input {
+            width: 90%;
+            height: 50px;
+            font-size: 20px;
+            float: left;
+            padding: 10px;
+        }
+        button{
+            width:10%;
+            height: 50px;
+        }
+   `],
+    template: `<h1>Messages</h1>
+    <form>
+        <input [(ngModel)]="newMessage">
+        <button type="submit" (click)="addMessage(newMessage)">Send</button>
+    </form>
+    <ul>
+        <li *ngFor="let message of messages; let i = index" class="message">
+        <img height="50px" width="50px" src="{{message.url}}" />
+        <span> {{message.text}} </span>
+        <span class="datetime u-pull-right">
+            {{message.datetime}}
+          </span>
+        </li>
+    </ul>`,
+    providers:[ChatService]
+})
+export class ChatComponent implements OnInit {
+    newMessage = '';
+    messages = [];
+
+    constructor(private _chatService: ChatService) {
+
+    }
+    ngOnInit() {
+        this.getChats()
+    }
+
+    getChats = function () {
+        this._chatService
+            .getChats()            
+            .subscribe((newMessages) => {
+                this.messages = [...newMessages];
+            });
+    }
+
+    addMessage = function (text) {
+        if (text) {
+            this._chatService
+                .sendChat(text)
+                .subscribe();
+            this.newMessage = '';
+        }
+    }
+
+
+
+
+}

examples/angular2-chat-app/dist/app/components/chat/chat.service.ts

@@ -0,0 +1,26 @@
+import {Component, OnInit} from '@angular/core';
+import {Observable} from 'rxjs'
+
+
+export class ChatService {
+    horizon = Horizon();
+    chat = this.horizon('chat');
+    avatar_url = `http://api.adorable.io/avatars/50/${new Date().getMilliseconds()}.png`;
+
+
+    constructor() { }
+    getChats = function (): Observable<[any]> {
+        return this.chat
+            .order('datetime', 'descending')
+            .limit(8)
+            .watch()
+    }
+
+    sendChat = function (text: string): Observable<[any]> {
+        return this.chat.store({
+            text: text,
+            datetime: new Date(),
+            url: this.avatar_url,
+        })
+    }
+}

examples/angular2-chat-app/dist/app/horizon.d.ts

@@ -0,0 +1 @@
+declare var Horizon: any

examples/angular2-chat-app/dist/app/main.ts

@@ -0,0 +1,4 @@
+import { bootstrap }    from '@angular/platform-browser-dynamic';
+import { AppComponent } from './app.component';
+
+bootstrap(AppComponent);

examples/angular2-chat-app/dist/index.html

@@ -0,0 +1,31 @@
+<!doctype html>
+<html>
+
+<head>
+  <title>Horizon Angular 2 chat example</title>
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <script type="text/javascript" src="//localhost:8181/horizon/horizon.js"></script>
+  <script type="text/javascript" src="/horizon/horizon.js"></script>
+
+  <!-- 1. Load libraries -->
+  <!-- IE required polyfills, in this exact order -->
+  <script src="node_modules/typescript/lib/typescript.js"></script>
+  <script src="node_modules/es6-shim/es6-shim.min.js"></script>
+
+  <script src="node_modules/zone.js/dist/zone.js"></script>
+  <script src="node_modules/reflect-metadata/Reflect.js"></script>
+  <script src="node_modules/systemjs/dist/system.src.js"></script>
+
+  <!-- 2. Configure SystemJS -->
+    <script src="systemjs.config.js"></script>
+    <script>
+      System.import('app').catch(function(err){ console.error(err); });
+    </script>
+</head>
+<!-- 3. Display the application -->
+
+<body>
+  <my-app>Loading...</my-app>
+</body>
+
+</html>

examples/angular2-chat-app/dist/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "angular2-chat-app",
+  "version": "1.0.0",
+  "scripts": {
+    "postinstall": "typings install",
+    "typings": "typings"
+  },
+  "license": "ISC",
+  "dependencies": {
+    "@angular/common":  "2.0.0-rc.1",
+    "@angular/compiler":  "2.0.0-rc.1",
+    "@angular/core":  "2.0.0-rc.1",
+    "@angular/http":  "2.0.0-rc.1",
+    "@angular/platform-browser":  "2.0.0-rc.1",
+    "@angular/platform-browser-dynamic":  "2.0.0-rc.1",
+    "systemjs": "0.19.27",
+    "es6-shim": "^0.35.0",
+    "reflect-metadata": "^0.1.3",
+    "rxjs": "5.0.0-beta.6",
+    "zone.js": "^0.6.12",
+    "typescript": "^1.8.9"
+  },
+  "devDependencies": {
+    "typings":"^0.8.1"
+  }
+}

examples/angular2-chat-app/dist/systemjs.config.js

@@ -0,0 +1,38 @@
+(function(global) {
+
+  // map tells the System loader where to look for things
+  var map = {
+    'app':                        'app', // 'dist',
+    'rxjs':                       'node_modules/rxjs',
+    'angular2-in-memory-web-api': 'node_modules/angular2-in-memory-web-api',
+    '@angular':                   'node_modules/@angular'
+  };
+  // packages tells the System loader how to load when no filename and/or no extension
+  var packages = {
+    'app':                        { main: 'main.ts',  defaultExtension: 'ts' },
+    'rxjs':                       { defaultExtension: 'js' },
+    'angular2-in-memory-web-api': { defaultExtension: 'js' },
+  };
+  var packageNames = [
+    '@angular/common',
+    '@angular/compiler',
+    '@angular/core',
+    '@angular/http',
+    '@angular/platform-browser',
+    '@angular/platform-browser-dynamic',
+    '@angular/testing',
+  ];
+  // add package entries for angular packages in the form '@angular/common': { main: 'index.js', defaultExtension: 'js' }
+  packageNames.forEach(function(pkgName) {
+    packages[pkgName] = { main: 'index.js', defaultExtension: 'js' };
+  });
+  var config = {
+    transpiler: 'typescript',
+    typescriptOptions: {
+            emitDecoratorMetadata: true
+        },
+    map: map,
+    packages: packages
+  }
+  System.config(config);
+})(this);

examples/angular2-chat-app/dist/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "module": "system",
+    "moduleResolution": "node",
+    "sourceMap": true,
+    "emitDecoratorMetadata": true,
+    "experimentalDecorators": true,
+    "removeComments": false,
+    "noImplicitAny": false
+  },
+  "exclude": [
+    "node_modules",
+    "typings/main",
+    "typings/main.d.ts"
+  ]
+}

examples/angular2-chat-app/dist/typings.json

@@ -0,0 +1,6 @@
+{
+  "ambientDependencies": {
+    "es6-shim": "github:DefinitelyTyped/DefinitelyTyped/es6-shim/es6-shim.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd",
+    "jasmine": "github:DefinitelyTyped/DefinitelyTyped/jasmine/jasmine.d.ts#7de6c3dd94feaeb21f20054b9f30d5dabc5efabd"
+  }
+}