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://code.angularjs.org/2.0.0-alpha.45/angular2.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
  }
});

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';
    time: number;
    constructor() {
      this.time = performance.now();
    }
}

bootstrap(HelloApp);