Angular4中的组件、模块、服务、装饰器、控制器
一、组件
Angular4具有组件化的特性，不同于之前的AngularJS用户看到的是View，Angular4将组件组成一棵树，用户看到的是这棵组件树中被激活的组件(component)。
所谓组件，我们可以将它理解为一段带有业务逻辑和数据的HTML。
二、服务
服务（server）用来封装可重用的业务逻辑
三、指令
指令允许你向HTML元素中添加自定义行为。Angular为我们提供了很多指定可以使用。
四、模块
上面说的组件，服务，指令加在一起是用来实现一个功能的，而模块（module）是用来打包和分发这些功能的。
五、举例
这里我们使用Angular CLI为我们自动生成的项目中的组件和模块为例。
先看src目录中的app中的app.components.ts，这是一个Typescript文件。内容如下：
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'app works!';
}这里需要介绍一下组件中的三个必备要素：
1、装饰器
这段代码中的@Components就是一个装饰器，它用来告知Angular框架来如何处理一个Typescript类。它包含多个属性，这些属性值叫做元数据。Angular会根据元数据渲染组件，并执行组件逻辑。
简单的说就是我们可以看到这段代码的后三行定义了一个AppComponent类，它看着就是一个普通的ts类，但是我们需要告诉Angular这个类是一个组件，这就需要用装饰器将这些元数据附加到类上。元数据会告诉Angular图和将这个Typescript类处理成一个组件。
元数据：
（1）selector: 'app-root'
这段代码表示这个组件可以通过app-root这个html标签来调用。打开项目根目录下的index.html可以看到里面有这样一行代码 <app-root>Loading...</app-root>
这其实就是调用了我们的这个组件
（2）templateUrl: './app.component.html'
既然已经知道了怎么调用组件，这行代码就是用来说明组件显示的内容是什么。打开app.component.html代码如下
<h1>
{{title}}
</h1>那这里的{{tilte}}是什么意思呢？后面马上说到。（3）styleUrls: ['./app.component.css']
这个和上面的类似，表示组件的css
2、模板（template）
模板用来定义组件的外观，元数据中的templateUrl指定的文件其实就是组件的模板。
3、控制器（controller）
控制器包含了组件的所有属性和方法，用来定义页面 逻辑。这段代码的后三行定义的类，其实就是定义了一个控制器。
export class AppComponent {
title = 'app works!';
}控制器和模板进行数据绑定，也就是说我们之前在app.component.html中看到的{{title}}中的title就是控制器中的title，这里的双大括号是数据绑定的一种方式。
