先看一个简单的组件：
// hello.component.ts
import { Component } from '@angular/core';
@Component({
selector: 'say-hello',
templateUrl: './hello.component.html',
styleUrls: [ './hello.component.css' ]
})
export class HelloComponent{
name: string = 'Angular2';
constructor(){}
}
<!-- hello.component.html -->
<p class="hello">
hello,<span>{{ name }}</span>!
</p>
/* hello.component.css */
p{ margin:0; padding:0; font-size:14px; color: #444;}
p span{ font-size: 18px; }
组件（Component）
组件的作用是控制页面上的某一块区域，即视图。Angular在类中定义组件的应用逻辑，类又通过属性和方法与视图交互。
上面的代码使用@Component装饰器函数将后面定义的HelloComponent类标记为了一个组件，别忘了先要导入Component装饰器，否则无法使用。@Component装饰器函数接收一个元数据对象，其属性值定义了模板或模板路径、样式或样式路径以及css选择器（即自定义的标签）等内容。
模板（Template）
观察上面HTML文件的代码，除了标准的HTML标签外，可以看到还有一个Angular自有的取值表达式{{ name }}，这个表达式可以将类中定义的name值取过来显示在页面上。修改name值并保存，页面内容也会相应发生变化。这也是Angular的魅力所在——不用修改DOM就可操控页面内容。
除了使用{{}}以外，还可以使用*ngFor循环 (click) (keyup)事件 [staff]输入属性 [(ngModel)]双向数据绑定等模板语法。
元数据
@Component装饰器函数接收的参数就是元数据，元数据的作用是告诉Angular如何处理一个类。比如在父模板中用什么标签调用该组件实例，组件实例如何渲染页面等。
元数据有如下属性：
- selector: 选择器。
- template: 模板。值为模板字符串，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的HTML文件。
- templateUrl: 模板文件相对路径。即上面说的HTML文件的相对路径。
- style: 样式。值为模板字符串组成的数组，为了提高可读性和复用性，通常不定义该属性，而是提取为单独的CSS文件。
- styleUrls: 样式文件相对路径数组。即上面说的CSS文件的相对路径所组成的数组。
- providers: 服务提供商。同模块中的providers。
