3.4　组件与模板

组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。组件是构成Angular应用的基础和核心，可用于整个应用程序中。组件知道如何渲染自己及配置依赖注入。组件通过一些由属性和方法组成的API与视图交互。模板则是使用我们熟悉的HTML语言。

3.4.1　Angular中的组件

组件是一个装饰器，他能接受一个配置对象，Angular会基于这些信息创建和展示组件及其视图。看这段代码：

     @Component({
     selector:    'some-list',
     templateUrl: './some-list.component.html',
     providers:  [ SomeService ]
     })
     export class SomeListComponent implements OnInit {
     /* . . . */
     }

•　selector：CSS选择器，它告诉Angular在父级HTML中查找<some-list>标签，创建并插入该组件。

•　templateUrl：组件HTML模板的模块相对地址，如果使用template来写的话是用“`”这个符号来直接编写HTML代码。

•　providers：组件所需服务的依赖注入。

3.4.2　Angular中的模板和元数据

模板就是那段HTML代码，可以用templateUrl引入外面的，也可以用template``直接写在.ts文件中。我们可以通过使用模板来定义组件的视图来告诉Angular如何显示组件。以下是一个简单是实例：

     <div>
     姓名 : {{name}}
     </div>

在Angular中，默认使用的是双大括号作为插值语法，大括号中间的值通常是一个组件属性的变量名。元数据装饰器用类似的方式来指导Angular的行为。例如@Input、@Output、@Injectable等是一些最常用的装饰器。