Angular4中的组件、模块、服务、装饰器、控制器

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，这里的双大括号是数据绑定的一种方式。