angularjs2 一

import {Component} from 'angular2/core';

interface Hero {
id: number;
name: string;
}

@Component({
selector: 'appTest',
/*template: `
<h1>Hello, {{name}}!</h1>
Say hello to: <input [value]="name" (input)="name = $event.target.value">
`*/

/* template: '<h1>{{title}}</h1><h2>{{hero}} details!</h2>'*/

/*template: '<h2>{{hero.name}}</h2><div><label>id: </label>{{hero.id}}</div><div><label>name: </label>{{hero.name}}</div>'*/

/*template: `<div><h2>{{hero.name}}</h2><div><input [(ngModel)]="hero.name"></div></div>`*/

template: ` <h2>英雄列表</h2> <ul class="heroes"><li *ngFor="#hero of heroes"><span class="badge">{{hero.id}}</span>{{hero.name}}</li></ul>`,
styles: [`
.heroes {list-style-type: none; margin-left: 1em; padding: 0; width: 10em;}
.heroes li { cursor: pointer; position: relative; left: 0; transition: all 0.2s ease; }
.heroes li:hover {color: #369; background-color: #EEE; left: .2em;}
.heroes .badge {
font-size: small;
color: white;
padding: 0.1em 0.7em;
background-color: #369;
line-height: 1em;
position: relative;
left: -1px;
top: -1px;
}
.selected { background-color: #EEE; color: #369; }
`]

})
export class App {
public name:string = 'World';
public title = 'Tour of Heroes';
public hero = '乔布斯';

public hero:Hero = {
id: 1,
name: '廖建国'
};

public heroes = HEROES;
}

var HEROES:Hero[] = [
{"id": 11, "name": "苹果手机"},
{"id": 12, "name": "亚马逊"},
{"id": 13, "name": "谷歌"},
{"id": 14, "name": "Facebook"},
{"id": 15, "name": "雅虎"},
{"id": 16, "name": "阿里巴巴"},
{"id": 17, "name": "淘宝网"},
{"id": 18, "name": "京东"},
{"id": 19, "name": "小米"},
{"id": 20, "name": "腾讯"}
];