2015-10-23 22:05:17 -04:00
|
|
|
// #docregion
|
|
|
|
// #docregion imports
|
|
|
|
import {Component, bootstrap, NgFor} from 'angular2/angular2';
|
|
|
|
// #enddocregion imports
|
|
|
|
|
|
|
|
@Component({
|
|
|
|
selector: 'my-app',
|
|
|
|
// #docregion template
|
|
|
|
template: `
|
|
|
|
<h1>{{title}}</h1>
|
|
|
|
<h2>My favorite hero is: {{myHero}}</h2>
|
|
|
|
<p>Heroes:</p>
|
|
|
|
<ul>
|
|
|
|
// #docregion li-repeater
|
|
|
|
<li *ng-for="#hero of heroes">
|
|
|
|
{{ hero }}
|
|
|
|
</li>
|
|
|
|
// #enddocregion li-repeater
|
|
|
|
</ul>
|
|
|
|
`,
|
|
|
|
// #enddocregion template
|
|
|
|
// #docregion directives
|
|
|
|
directives: [NgFor]
|
|
|
|
// #enddocregion directives
|
|
|
|
})
|
|
|
|
// #docregion mock-heroes
|
|
|
|
export class AppComponent {
|
|
|
|
title = 'Tour of Heroes';
|
2015-10-31 23:34:17 -04:00
|
|
|
heroes = ['Windstorm', 'Bombasto', 'Magneta', 'Tornado'];
|
2015-10-23 22:05:17 -04:00
|
|
|
myHero = this.heroes[0];
|
|
|
|
}
|
|
|
|
// #enddocregion mock-heroes
|
|
|
|
// #enddocregion
|