Untitled

<!DOCTYPE html>
<html>
<head>
  <title>Angular2 Example</title>
  <script src="https://code.angularjs.org/tools/system.js"></script>
  <script src="https://code.angularjs.org/tools/typescript.js"></script>
  <script src="config.js"></script> 
  <script src="https://s3.amazonaws.com/angular2-bug/build.js"></script>
  <script>
    System.import('./hello.ts').catch(console.log.bind(console));
  </script>

</head>
 
<body>
  <hello-app>
    loading...
  </hello-app> 
</body>

</html>

System.config({
  //use typescript for compilation
  transpiler: 'typescript',
  //typescript compiler options
  typescriptOptions: {
    emitDecoratorMetadata: true
  },
  map: {
    "angular2": "npm:angular2@2.0.0-alpha.45",
    "reflect-metadata": "npm:reflect-metadata@0.1.2",
    "npm:angular2@2.0.0-alpha.45": {
      "@reactivex/rxjs": "npm:@reactivex/rxjs@5.0.0-alpha.4",
      "buffer": "github:jspm/nodelibs-buffer@0.1.0",
      "crypto": "github:jspm/nodelibs-crypto@0.1.0",
      "fs": "github:jspm/nodelibs-fs@0.1.2",
      "path": "github:jspm/nodelibs-path@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2",
      "reflect-metadata": "npm:reflect-metadata@0.1.2",
      "zone.js": "npm:zone.js@0.5.8"
    },
    "npm:reflect-metadata@0.1.2": {
      "assert": "github:jspm/nodelibs-assert@0.1.0",
      "process": "github:jspm/nodelibs-process@0.1.2"
    }
  }
});

import 'reflect-metadata';
import {Component, bootstrap} from 'angular2/angular2';

@Component({
    selector: 'hello-app',
    template: `
        <h1>Hello, {{name}}!</h1>
        Say hello to: <input [value]="name" (input)="name = $event.target.value">
        <br>Load time: {{time}}
    `
})
export class HelloApp {
    name: string = 'World';
    loadTime: number;
    constructor() {
      this.time = performance.now();
    }
}

bootstrap(HelloApp);