<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/tools/traceur-runtime.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-alpha.42/angular2.min.js"></script>
<script src="https://code.angularjs.org/2.0.0-alpha.42/http.min.js"></script>
<script>
System.import('app')
.catch(console.error.bind(console));
</script>
</head>
<body>
<app>
chickens...
</app>
</body>
</html>
/* Styles go here */
### Angular2 Chicken Plunker - Typescript - Alpha .42
A simple plunker demonstrating Angular2 chickens:
- Uses SystemJS + TypeScript to compile on the fly
- Includes binding, directives, 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/angular2';
import {HTTP_BINDINGS} from 'angular2/http';
import {App} from './app';
bootstrap(App, [HTTP_BINDINGS])
.catch(err => console.error(err));
//our root app component
import {Component, View, CORE_DIRECTIVES} from 'angular2/angular2'
import {ChickensService} from './chickensService'
import {Chicken} from './chicken'
@Component({
selector: 'app',
providers: [ChickensService]
})
@View({
template: `
<div>
<h2>Angular2 Chickens!</h2>
<chicken
*ng-for="#chicken of chickens"
[name]="chicken.name"
(hello)="saidHello($event)">
</chicken>
</div>
`,
directives: [CORE_DIRECTIVES, Chicken]
})
export class App {
constructor(public chickensService:ChickensService) {
chickensService.chickens
.subscribe(chickens => this.chickens = chickens);
}
saidHello($event){
alert(`You said hello to ${$event}`)
}
}
//a simple chickens service
import {Injectable} from 'angular2/angular2';
import {Http} from 'angular2/http';
@Injectable()
export class ChickensService {
constructor(http:Http) {
this.chickens = http.get('api/chickens.json').map(res => res.json());
}
}
//a simple chicken component
import {Component, View, EventEmitter} from 'angular2/angular2'
@Component({
selector: 'chicken',
inputs: ['name'],
outputs: ['hello']
})
@View({
template: `
<div>
<span>{{name}}</span>
<button (click)="sayHello()">Say Hello</button>
</div>
`
})
export class Chicken {
hello = new EventEmitter();
sayHello(e) {
this.hello.next(this.name);
}
}
[
{"id": 1, "name": "Chicken"},
{"id": 2, "name": "Chickens Chicken"},
{"id": 3, "name": "Chicken-chicken"}
]