Angular2入门学习--理解八大构造块

Angular2架构

下面我个人的关于Angular2构造块学习笔记，其中大部分内容整理自Angular中文官网和《揭秘Angular2》这本书。

Angular 应用中有8个主要构造块：模块 (module)、组件 (component)、模板 (template)、元数据 (metadata)、数据绑定 (data binding)、指令 (directive)、服务 (service)和依赖注入 (dependency injection)。下文将简单介绍这八个构造块:

模块

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块。

import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
@NgModule({
  imports:      [ BrowserModule ],
  providers:    [ Logger ],
  declarations: [ AppComponent,
                 ... ],
  exports:      [ AppComponent ],
  bootstrap:    [ AppComponent ]
})
export class AppModule { }

如上代码块所示:
1. 在使用Angular库的库模块之前首先要用import进行导入。
2. @NgModule是一个装饰器函数。Angular 模块都带有@NgModule装饰器。
3. imports属性用于导入其它模块，这里的其它模块是指我们在本模块使用的其它模块，可见，在Angular导入一个模块要先做操作1：用import进行导入，再做操作3在imports属性中导入，这才算成功引入了一个模块。
4. providers属性是服务的创建者，可以理解为服务的提供商。在模块中声明服务的提供商就是将其加入到全局服务列表中，使其服务可用于应用的任何部分（如模块中的其他组件）。
5. declarations属性用来声明本模块中拥有的视图类，即这个数组包含了所有由我们创建的并属于该应用模块的组件、管道和指令。
6. exports属性是declarations 的子集，声明了可用于其它模块的组件或管道或指令或模块。
7. 只有根模块才能设置bootstrap属性，用来指定应用的主视图（称为根组件）。

---

组件

组件负责控制屏幕上的一小块区域,组件可以理解为一个类（组件类）。组件通过一些由属性和方法组成的 API 与视图进行交互。

export class HeroListComponent implements OnInit {