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 {
  heroes: Hero[];
  selectedHero: Hero;
  constructor(private service: HeroService) { }
  ngOnInit() {
    this.heroes = this.service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

这里先解释生命周期钩子的概念：每个组件都有一个生命周期：新建、更新和销毁。生命周期钩子就是把这些关键生命时刻暴露出来，让开发者可以介入生命周期中的这些关键时刻。如上代码，这个组件类定义了heroes、selectedHero属性和selectHero（）方法，通过ngOnInit()生命周期钩子来向这个组件注入HeroService服务从而获取数据。

---

模板

我们通过组件的自带的模板(@Component的template属性)来定义组件视图。模板以HTML形式存在，告诉Angular如何渲染组件。

  <ul>
    <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    { {hero.name} }
    li>
  ul>
  <hero-detail *ngIf="selectedHero" [hero]="selectedHero">hero-detail>

如上代码，多数情况下，模板看起来很像标准 HTML，不同的是模板中会有一些指令(例如*ngFor)、属性绑定(例如[hero]="selectedHero")、事件绑定(例如(click)="selectHero(hero))和一些其它组件定义的新元素（例如标签）。

---

元数据

元数据告诉 Angular 如何处理一个类。上面提到的组件可以看到其实它就是一个类，我们用装饰器来连接元数据。如下代码，我们用装饰器@Component来附加元数据。

@Component({
   //`moduleId: module.id,
   selector: 'my-app',
   template: `
...
 
              ....
              `
   //templateUrl: './heroes.component.html',//方式二
   styles: [`...`]
   //styleUrls: [ './heroes.component.css' ]//方式二

1. selector属性可以理解为我们创建的一个html标签的标签名，如上代码，创建了一个的标签。
2. 定义模板：方式一：使用template属性，template属性可以理解为这个我们创建的html标签的html文件；方式二：使用templateUrl属性链接相应的html文件，当模板或样式使用方式二URL时，需要使用moduleId属性为与模块相关的 URL提供基地址。为避免运行出错，一般写为moduleId: module.id.toString()
3. 链接CSS样式文件：方式一：采用styles属性进行内嵌，类似于将样式写在