<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"}
]