// app/hero-list.component.html <h2>Hero List</h2> <p><i>Pick a hero from the list</i></p> <ul> <li *ngFor="let hero of heroes" (click)="selectHero(hero)"> {{hero.name}} </li> </ul> <hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>
模板看起来就是标准 HTML，它里面有一些非标准HTML的语法。*ngFor、{{hero.name}}、{click}、[hero] 和 <hero-derail> ，它们是 Angular 的模板语法。
所以说，Angular 是通过这种方式来处理 HTML的。
元数据
元数据告诉Angular如何处理一个类。
之前 export 的类里有一些方法和属性，但是怎么处理这个类？
只要把元数据附加到这个类，就意味着这个类是个组件。
在 TypeScript 中，我们用装饰器（decorator）来附加元数据。
分析下面的元数据：
// app/hero-list.component.ts @Component({ moduleId: module.id, selector: 'hero-list', templateUrl: 'hero-list.component.html', providers: [ HeroService ] }) export class HeroListComponent implements OnInit { /* . . . */ }
@Component装饰器把紧随其后的类标记成了组件类。
在装饰器后面的类就会被转为组件类？
装饰器里的配置项：
moduleId：为与模块相关的URL提供基地址。
这个地址怎么使用的？
selector：CSS 选择器，它告诉 Angular 在父级HTML寻找一个标签，然后创建组件实例并插入标签中。
实现HTML的显示。
templateUrl：组件HTML模板的模块相对地址。
HTML模板的设置位置。
providers：数组，包含组件所依赖的服务所需要的依赖注入提供商。告诉Angular该组件的构造函数需要服务，组件可以从服务获取数据。
某些数据的传递通过服务进行，否则，其他的视图只能控制静态的展示。
@Component 里的元数据会告诉 Angular 如何取得你为组件设定的元数据。
模板、元数据和组件共同描绘出这个视图。
组件就是视图，模板提供HTML的结构性。
数据绑定
如果没有框架，那么一些都需要我们来做。把数据值推送到HTML控件，并把用户的反馈接收转换成动作和值更新显示，你可以使用jQuery来实现这个过程。
Angular 框架实现数据绑定，一种让模板各部分与组件的各部分相互联系的机制。在模板HTML中添加绑定标记，Angular 会连接模板和组件。
意味着，我们刻意自动实现视图数据的更新，因为它绑定了组件，可以实现数据的关联。
看一个示例：
// app/hero-list.component.ts <li>{{hero.name}}</li> <hero-detail [hero]="selectedHero"></hero-detail> <li (click)="selectHero(hero)"></li>
观察到在这个模板HTML里，有一些非标准HTML的字符。
{{hero.name}} 插值表达式：在元素中显示组件的 hero.name属性的值。
[hero] 属性绑定：把父组件的值传到子组件的 hero 属性中。
(click) 事件绑定：当用户点击元素时调用方法。
文件之间的互相关系需要梳理清楚。
双向数据绑定：同时实现属性绑定和事件绑定的功能。看示例：
// app/hero-detail.component.ts <input [(ngModel)]="hero.name">
数据属性的值会从具有属性绑定的组件传到输入框，事件绑定使用户的修改被传回组件，把属性值设为最新的值。
指令
Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令对DOM进行修改。
就是说解析模板HTML的时候，会解析其中的指令。
指令是一个带有指令元数据的类。
指令是一个类，并且它含有指令源数据。
在TypeScript中，要通过 @Directive 装饰器把元数据附加到类上。