<!DOCTYPE html>
<html>
<head>
<title>angular2 playground</title>
<link rel="stylesheet" href="style.css" />
<script src="https://code.angularjs.org/2.0.0-beta.16/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.16/Rx.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.16/angular2.dev.js"></script>
<script src="https://code.angularjs.org/2.0.0-beta.16/http.dev.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 16
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 {DynamicListComponent} from './dynamic-list.component';
import {DynamicListItemTemplateComponent} from './dynamic-list-item-template.component'
@Component({
selector: 'my-app',
providers: [],
template:`
<h3>Inline</h3>
<div *ngFor="#item of items">
<div>
Inline template item #: {{item}}
</div>
</div>
<h3>List component with inline template</h3>
<dynamic-list [items]="items">
<div template="#item">
Inline template item #: {{item}}
</div>
</dynamic-list>
<h3>List component with component template</h3>
<dynamic-list [items]="items">
<dynamic-list-item template="#item" [item]="item"></dynamic-list-item>
</dynamic-list>
`,
directives: [DynamicListComponent, DynamicListItemTemplateComponent]
})
export class App {
private items = [1, 2, 3, 4];
}
import {Component, TemplateRef, ContentChild, Input} from 'angular2/core';
@Component({
selector: 'dynamic-list',
template: `<div *ngFor="#item of items" *ngForTemplate="itemTemplate"></div>`
})
export class DynamicListComponent {
@ContentChild(TemplateRef)
public itemTemplate: TemplateRef;
@Input()
public items: number[];
}
import {Component, Input} from 'angular2/core';
@Component({
selector: 'dynamic-list-item',
template: `<div>
Template Item #:{{item}}
</div>`
})
export class DynamicListItemTemplateComponent {
@Input() public item: number;
}