<html>
  <head>
    <title>Angular 2 QuickStart</title>
    <!-- 1. Load libraries -->
    <script src="https://rawgithub.com/systemjs/systemjs/0.19.6/dist/system.js"></script>
         <script src="https://code.angularjs.org/tools/typescript.js"></script>
         <script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
         <script src="https://code.angularjs.org/2.0.0-beta.0/Rx.js"></script>
         <script src="https://code.angularjs.org/2.0.0-beta.0/http.dev.js"></script>
         <script src="https://code.angularjs.org/2.0.0-beta.0/angular2.dev.js"></script>

    <!-- 2. Configure SystemJS -->
    <script>
      System.config({
        transpiler: 'typescript',
            typescriptOptions: {emitDecoratorMetadata: true},
            packages: {'app': {defaultExtension: 'ts'}}
      });
      System.import('app/boot')
            .then(null, console.error.bind(console));
    </script>
  </head>
  <!-- 3. Display the application -->
  <body>
    <my-app>Loading...</my-app>
  </body>
</html>
// Code goes here

/* Styles go here */

import {bootstrap}    from 'angular2/platform/browser'
import {HTTP_PROVIDERS} from 'angular2/http';
import {AppComponent} from './app.component'

bootstrap(AppComponent, [HTTP_PROVIDERS]);
import {Component} from 'angular2/core';
import {bootstrap} from 'angular2/platform/browser';
import {NgFor} from 'angular2/common';
import {HTTP_PROVIDERS, Http} from 'angular2/http';
@Component({
  selector: 'my-app',
  providers: [HTTP_PROVIDERS],
  template: `
    <div>
      <h1>People</h1>
      <ul>
        <li *ngFor="#person of people">
          {{person.name}}
        </li>
      </ul>
    </div>
  `,
  directives: [NgFor]
})
export class AppComponent {
  people: Object[];
  constructor(http:Http) {
    http.get('people.json').subscribe(res => {
      this.people = res.json();
    });
  }
  active:boolean = false;
  toggleActiveState() {
    this.active = !this.active;
  }
}
bootstrap(AppComponent)
  .catch(err => console.error(err));
[
  {"id": 1, "name": "The Donanld"},
  {"id": 2, "name": "Jeb!"},
  {"id": 3, "name": "Burnie"},
  {"id":4, "name": "Hill-Dawg"}
]