Angular2 + Typescript Demo Plunk

<!DOCTYPE html>
<html>

  <head>
    <title>Subscriby Not Worky</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://npmcdn.com/zone.js@0.6.12/dist/zone.js"></script>
    <script src="https://npmcdn.com/reflect-metadata@0.1.3/Reflect.js"></script>
    <script src="https://npmcdn.com/systemjs@0.19.31/dist/system.js"></script>
    <script src="https://npmcdn.com/typescript@1.8.10/lib/typescript.js"></script>
    <script src="config.js"></script>
    <script>
    System.import('app')
      .catch(console.error.bind(console));
  </script>
  </head>

  <body>
    <my-app>
    loading...
  </my-app>
  </body>

</html>

/* Styles go here */

### Angular2 Starter Plunker - Typescript - RC.0

A simple plunker demonstrating Angular2 usage:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, http, pipes, and DI usage.

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  //map tells the System loader where to look for things
  map: {
    'app'      : 'app',
    '@angular': 'https://npmcdn.com/@angular',
    'rxjs': 'https://npmcdn.com/rxjs@5.0.0-beta.6'
  },
  //packages defines our app package
  packages: {
    'app'                              : {main: 'app.ts', defaultExtension: 'ts'},
    '@angular/core': {
      main: 'bundles/core.umd.js',
      defaultExtension: 'js'
    },
    '@angular/compiler': {
      main: 'bundles/compiler.umd.js',
      defaultExtension: 'js'
    },
    '@angular/common': {
      main: 'bundles/common.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser-dynamic': {
      main: 'bundles/platform-browser-dynamic.umd.js',
      defaultExtension: 'js'
    },
    '@angular/platform-browser': {
      main: 'bundles/platform-browser.umd.js',
      defaultExtension: 'js'
    },
    '@angular/router': {
      main: 'bundles/router.umd.js',
      defaultExtension: 'js'
    },
    '@angular/http': {
      main: 'bundles/http.umd.js',
      defaultExtension: 'js'
    },
    rxjs: {
      defaultExtension: 'js'
    }
  }
});

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs/Observable';
import { Observer } from 'rxjs/Observer';

@Injectable()
export default class Chatter {
    private clients: Observer<string>[] = [];
    private messageSender : Observable<string>;

    constructor() {
        this.messageSender = Observable.create(observer => this.clients.push(observer));
     }

    public listenForMessages() : any {
        console.log("Listen Requested...")
        return this.messageSender;
    }

}

import { Component, provide } from "@angular/core";
import {LocationStrategy, HashLocationStrategy} from '@angular/common';
 
import {bootstrap} from "@angular/platform-browser-dynamic";
 
import { ROUTER_DIRECTIVES, RouterConfig, provideRouter, Router } from '@angular/router';
import {HTTP_PROVIDERS} from '@angular/http';

import 'rxjs/Rx';

import { LoginPage }   from './login/login';
import { DefaultPage } from './default/default';
import Chatter         from './chatter/service';

@Component({
    selector: "my-app",
    templateUrl: "./app/app.html",
    directives  : [ROUTER_DIRECTIVES, LoginPage, DefaultPage]
})
 
export class AppComponent {
 
    router: Router;
    location: Location;
 
    constructor(router: Router) {
        this.router = router;
        this.location = location;
    }
 
}

const clientRoutes : RouterConfig = [
    { path: "", component: LoginPage},
    { path: "talk", component: DefaultPage}
]

const ROUTES = [
  provideRouter(clientRoutes)
];

bootstrap(AppComponent, 
  [ HTTP_PROVIDERS,
    ROUTES, 
    { provide: LocationStrategy, useClass: HashLocationStrategy },
    provide(Chatter, { useClass : Chatter })
  ]
);

<router-outlet></router-outlet>

import {Component} from "@angular/core";
import {Router}    from "@angular/router";
import Chatter     from "../chatter/service";

@Component({
    selector: 'login',
    templateUrl: 'app/login/login.html'
})
export class LoginPage {
    code: string;
 
    constructor( private router : Router, private chatter : Chatter ) {  }

    ngOnInit() {
      if (!this.chatter) return console.error("Chatter not passed in");
      this.chatter.listenForMessages().subscribe(m => console.log(m));
    }
 
    newChat() {
        this.router.navigate(["/talk"]);
    }

    joinChat() {
        this.router.navigate(["/talk"]);
    }
}

<p><button (click)="newChat()">New Chat</button>
<p><input [(ngModel)]="code" placeholder="Chat Key"><button (click)="joinChat()">Join Chat</button>

import {Component} from "@angular/core";
import Chatter from "../chatter/service";

@Component({
    selector: 'default',
    templateUrl: 'app/default/default.html'
})
export class DefaultPage {
 
    constructor(private chatter : Chatter) {    }

    ngOnInit() {
        
        this.initChatter();

    }

    initChatter() {
            this.chatter.listenForMessages().subscribe(event => {console.log(event); },
                             error => { console.log(error)});
    }
 
}

<p>Placeholder</p>
<form action="">
    <input [(ngModel)]="chatBox" autocomplete="off" /><button>Send</button>
</form>