元数据告诉Angular如何处理一个类
回头看看HeroListComponent就会明白：他只是一个类，一点框架的痕迹都没有，里面完全没有出现“Angular”的字样。
实际上，HeroListComponent真的只是一个类，直到告诉Angular这是一个组件。只要把 **元数据 *附加到这个类，就相当于告诉 Angular ： HeroListComponent
是个组件。
在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。 下面就是 HeroListComponent
的一些元数据。
代码如下：
@Component({
moduleId: module.id,
selector: 'hero-list',
templateUrl: 'hero-list.component.html',
providers: [ HeroService ]
})
export class HeroListComponent implements OnInit {
/ . . . */
}
@Component装饰器能接受一个配置对象，Angular会基于这些信息创建和展示组件机视图。
来看下@Component中的一些配置项：
modeuleId:为与模块相关的URL(如templateUrl)提供基地址。
seletor:一个CSS选择器，它告诉Angular在父级HTML中找一个<hero-list>标签，然后创建该组件，并插入此标签中，比如，如果应用的HTML包含<hero-list>，Angular就会把HeroListComponent的一个实例插入到这个标签中。
templateUrl:组件HTML模板的模块相对地址
providers：一个数组，包含所依赖的服务所需要的依赖注入提供商。这是在告诉Angular：该组件的构造函数需要一个HeroService服务，这样组件就可以从服务中获得用来显示英雄列表的那些数据。
@Component
里面的元数据会告诉 Angular 如何取得你为组件指定的元数据。
模板、元数据和组件共同描绘出这个视图。
我们也会沿用类似的风格，用其它元数据装饰器来指导 Angular 的行为。 比如 @Injectable、 @Input和 @Output
等是一些最常用的装饰器。
这种架构所决定的是：必须往代码中添加元数据，以便 Angular 知道该做什么。
