<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2-polyfills.js"></script>
<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-beta.0/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.0/http.min.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 - Beta 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: "./src"
},
//packages defines our app package
packages: {
app: {
main: './main.ts',
defaultExtension: 'ts'
}
}
});
//main entry point
import {bootstrap} from 'angular2/platform/browser';
import {App} from './app';
bootstrap(App, [])
.catch(err => console.error(err));
//our root app component
import {Component} from 'angular2/core';
import {Person} from './person';
@Component({
selector: 'my-app',
providers: [],
template: `
<ul>
<li *ngFor="#person of people">
<span><b>{{person?.lastName}}</b> {{person?.firstName}}</span>
<ul>
<li>Profession: <span>{{person?.profession?.caption || 'not provided'}}</span></li>
<li *ngIf="person.children.length">Kids:</li>
<ul>
<li *ngFor="#child of person.children">
<span>His/Her firstname is <b>{{child?.firstName ||"not decided"}}</b></span>
</li>
</ul>
</ul>
</li>
</ul>
`,
directives: []
})
export class App {
people : Person[] = Person.getSampleData();
}
class Profession{
caption: string;
constructor(a:string){ this.caption = a; }
}
export class Person {
firstName: string;
lastName: string;
children: Person[];
profession: Profession;
constructor(a: string, b:string){
this.firstName = a;
this.lastName = b;
this.children = [];
this.profession = null;
}
addChild(child: Person){
this.children.push(child)
}
firstChild(){
return this.children.length > 0? this.children[0]: null;
}
static getSampleData (){
let sampleData :Person[] = []
var th = new Person("Thorsten", "Hans");
var mr = new Person("Manuel", "Rauber");
mr.profession = new Profession("Developer");
th.addChild(new Person("E", "Hans"))
th.addChild(null)
sampleData.push(th)
sampleData.push(mr)
return sampleData;
}
}