angular2架构

Angular 2的架构包含8 个主要构造块:

• 模块 (module)

• 组件 (component)

• 模板 (template)

• 元数据 (metadata)

• 数据绑定 (data binding)

• 指令 (directive)

• 服务 (service)

• 依赖注入 (dependency injection)

模块(Module Component{})

Angular 应用是模块化的，并且 Angular 有自己的模块系统，它被称为 Angular 模块或 NgModules。

每个 Angular 应用至少有一个模块（根模块），习惯上命名为AppModule。

根模块在一些小型应用中可能是唯一的模块，大多数应用会有很多特性模块，每个模块都是一个内聚的代码块专注于某个应用领域、工作流或紧密相关的功能。

Angular 模块都是一个带有@NgModule装饰器的类。

NgModule是一个装饰器函数，它接收一个用来描述模块属性的元数据对象。其中最重要的属性是：

• declarations - 声明本模块中拥有的视图类。Angular 有三种视图类：组件、指令和管道。

• exports - declarations 的子集，可用于其它模块的组件模板。

• imports - 本模块声明的组件模板需要的类所在的其它模块。

• providers - 服务的创建者，并加入到全局服务列表中，可用于应用任何部分。

• bootstrap - 指定应用的主视图（称为根组件），它是所有其它视图的宿主。只有根模块才能设置bootstrap属性。

组件

组件是具有模板的控制器类，主要处理页面上的应用程序和逻辑的视图。

我们在类中定义组件的应用逻辑，为视图提供支持。

组件通过@Component注册、可以将应用程序分成更小的部分

要注册组件，我们使用 @Component 注释，可以将应用程序拆分为更小的部分

src/app/hero-list.component.ts (class)

Copy Code

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; }}

当用户在这个应用中漫游时， Angular 会创建、更新和销毁组件。 应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，例如上面声明的ngOnInit()。

模板

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

多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是HeroListComponent组件的一个模板：

src/app/hero-list.component.html

Copy Code

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

模板除了可以使用像<h2>和<p>这样的典型的 HTML 元素，还能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和<hero-detail>这样的代码使用了 Angular 的模板语法。

在模板的最后一行，<hero-detail>标签就是一个用来表示新组件的自定义元素。

元数据

元数据告诉 Angular 如何处理一个类。

回头看看HeroListComponent就会明白：它只是一个类。 一点框架的痕迹也没有，里面完全没有出现 "Angular" 的字样。

实际上，HeroListComponent真的只是一个类。直到我们告诉 Angular 它是一个组件。

要告诉 Angular HeroListComponent是个组件，只要把元数据附加到这个类。

在TypeScript中，我们用装饰器 (decorator) 来附加元数据。 下面就是HeroListComponent的一些元数据。

src/app/hero-list.component.ts (metadata)

Copy Code

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

这里看到@Component装饰器，它把紧随其后的类标记成了组件类。

@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。

模板、元数据和组件共同描绘出这个视图。

其它元数据装饰器用类似的方式来指导 Angular 的行为。 例如@Injectable、@Input和@Output等是一些最常用的装饰器。

这种架构处理方式是：你向代码中添加元数据，以便 Angular 知道该怎么做。

数据绑定

如果没有框架，我们就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。 如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会。

Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。

如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。

HeroListComponent示例模板中有三种形式：

src/app/hero-list.component.html (binding)

Copy Code

<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

• {{hero.name}}插值表达式在<li>标签中显示组件的hero.name属性的值。

• [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。

• (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。 下面是HeroDetailComponent模板的范例：

src/app/hero-detail.component.html (ngModel)

Copy Code

<input [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。

数据绑定在模板与对应组件的交互中扮演了重要的角色。

数据绑定在父组件与子组件的通讯中也同样重要。

指令 (directive)

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。 

还有两种其它类型的指令：结构型指令和属性 (attribute) 型指令。

它们往往像属性 (attribute) 一样出现在元素标签中， 偶尔会以名字的形式出现，但多数时候还是作为赋值目标或绑定目标出现。

结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。

下面的范例模板中用到了两个内置的结构型指令：

src/app/hero-list.component.html (structural)

Copy Code

<li *ngFor="let hero of heroes"></li><hero-detail *ngIf="selectedHero"></hero-detail>

• *ngFor告诉 Angular 为heroes列表中的每个英雄生成一个<li>标签。

• *ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。

属性型 指令修改一个现有元素的外观或行为。 在模板中，它们看起来就像是标准的 HTML 属性，故名。

ngModel指令就是属性型指令的一个例子，它实现了双向数据绑定。 ngModel修改现有元素（一般是<input>）的行为：设置其显示属性值，并响应 change 事件。

src/app/hero-detail.component.html (ngModel)

Copy Code

<input [(ngModel)]="hero.name">

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle和 ngClass）。

服务

服务是一个广义范畴，包括：值、函数，或应用所需的特性。

几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

例如：

• 日志服务

• 数据服务

• 消息总线

• 税款计算器

• 应用程序配置

服务没有什么特别属于 Angular 的特性。 Angular 对于服务也没有什么定义。 它甚至都没有定义服务的基类，也没有地方注册一个服务。

即便如此，服务仍然是任何 Angular 应用的基础。组件就是最大的服务消费者。

下面是一个服务类的范例，用于把日志记录到浏览器的控制台：

src/app/logger.service.ts (class)

Copy Code

export class Logger {  log(msg: any)   { console.log(msg); }  error(msg: any) { console.error(msg); }  warn(msg: any)  { console.warn(msg); }}

下面是HeroService类，用于获取英雄数据，并通过一个已解析的承诺 (Promise) 返回它们。 HeroService还依赖于Logger服务和另一个用于处理服务器通讯的BackendService服务。

src/app/hero.service.ts (class)

Copy Code

export class HeroService {  private heroes: Hero[] = [];  constructor(    private backend: BackendService,    private logger: Logger) { }  getHeroes() {    this.backend.getAll(Hero).then( (heroes: Hero[]) => {      this.logger.log(`Fetched ${heroes.length} heroes.`);      this.heroes.push(...heroes); // fill cache    });    return this.heroes;  }}

服务无处不在。

组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。

组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括模型的某些概念）之间。 设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。

Angular 不会强制要求我们遵循这些原则。 即使我们花 3000 行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。

Angular 帮助我们遵循这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务，并通过依赖注入来在组件中使用这些服务。

依赖注入

“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

Angular 通过查看构造函数的参数类型得知组件需要哪些服务。 例如，HeroListComponent组件的构造函数需要一个HeroService服务：

src/app/hero-list.component.ts (constructor)

Copy Code

constructor(private service: HeroService) { }

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

HeroService注入的过程差不多是这样的：

如果注入器还没有HeroService，它怎么知道该如何创建一个呢？

简单点说，我们必须先用注入器（injector）为HeroService注册一个提供商（provider）。 提供商用来创建或返回服务，通常就是这个服务类本身（相当于new HeroService()）。

我们可以在模块中或组件中注册提供商。

但通常会把提供商添加到根模块上，以便在任何地方都使用服务的同一个实例。

src/app/app.module.ts (module providers)

Copy Code

providers: [  BackendService,  HeroService,  Logger],

或者，也可以在@Component元数据中的providers属性中把它注册在组件层：

src/app/hero-list.component.ts (component providers)

Copy Code

@Component({  selector:    'hero-list',  templateUrl: './hero-list.component.html',  providers:  [ HeroService ]})

把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。

需要记住的关于依赖注入的要点是：

• 依赖注入渗透在整个 Angular 框架中，被到处使用。

• 注入器 (injector) 是本机制的核心。

  • 注入器负责维护一个容器，用于存放它创建过的服务实例。

  • 注入器能使用提供商创建一个新的服务实例。

• 提供商是一个用于创建服务的配方。

• 把提供商注册到注入器。

src/app/hero-list.component.ts (class)

Copy Code

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; }}

当用户在这个应用中漫游时， Angular 会创建、更新和销毁组件。 应用可以通过生命周期钩子在组件生命周期的各个时间点上插入自己的操作，例如上面声明的ngOnInit()。

模板

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

多数情况下，模板看起来很像标准 HTML，当然也有一点不同的地方。下面是HeroListComponent组件的一个模板：

src/app/hero-list.component.html

Copy Code

<h2>Hero List</h2>
<p><i>Pick a hero from the list</i></p>
<ul>
  <li *ngFor="let hero of heroes" (click)="selectHero(hero)">
    {{hero.name}}
  </li>
</ul>
<hero-detail *ngIf="selectedHero" [hero]="selectedHero"></hero-detail>

模板除了可以使用像<h2>和<p>这样的典型的 HTML 元素，还能使用其它元素。 例如，像*ngFor、{{hero.name}}、(click)、[hero]和<hero-detail>这样的代码使用了 Angular 的模板语法。

在模板的最后一行，<hero-detail>标签就是一个用来表示新组件的自定义元素。

元数据

元数据告诉 Angular 如何处理一个类。

回头看看HeroListComponent就会明白：它只是一个类。 一点框架的痕迹也没有，里面完全没有出现 "Angular" 的字样。

实际上，HeroListComponent真的只是一个类。直到我们告诉 Angular 它是一个组件。

要告诉 Angular HeroListComponent是个组件，只要把元数据附加到这个类。

在TypeScript中，我们用装饰器 (decorator) 来附加元数据。 下面就是HeroListComponent的一些元数据。

src/app/hero-list.component.ts (metadata)

Copy Code

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

这里看到@Component装饰器，它把紧随其后的类标记成了组件类。

@Component里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。

模板、元数据和组件共同描绘出这个视图。

其它元数据装饰器用类似的方式来指导 Angular 的行为。 例如@Injectable、@Input和@Output等是一些最常用的装饰器。

这种架构处理方式是：你向代码中添加元数据，以便 Angular 知道该怎么做。

数据绑定

如果没有框架，我们就得自己把数据值推送到 HTML 控件中，并把用户的反馈转换成动作和值更新。 如果手工写代码来实现这些推/拉逻辑，肯定会枯燥乏味、容易出错，读起来简直是噩梦 —— 写过 jQuery 的程序员大概都对此深有体会。

Angular 支持数据绑定，一种让模板的各部分与组件的各部分相互合作的机制。 我们往模板 HTML 中添加绑定标记，来告诉 Angular 如何把二者联系起来。

如图所示，数据绑定的语法有四种形式。每种形式都有一个方向 —— 绑定到 DOM 、绑定自 DOM 以及双向绑定。

HeroListComponent示例模板中有三种形式：

src/app/hero-list.component.html (binding)

Copy Code

<li>{{hero.name}}</li><hero-detail [hero]="selectedHero"></hero-detail><li (click)="selectHero(hero)"></li>

• {{hero.name}}插值表达式在<li>标签中显示组件的hero.name属性的值。

• [hero]属性绑定把父组件HeroListComponent的selectedHero的值传到子组件HeroDetailComponent的hero属性中。

• (click) 事件绑定在用户点击英雄的名字时调用组件的selectHero方法。

双向数据绑定是重要的第四种绑定形式，它使用ngModel指令组合了属性绑定和事件绑定的功能。 下面是HeroDetailComponent模板的范例：

src/app/hero-detail.component.html (ngModel)

Copy Code

<input [(ngModel)]="hero.name">

在双向绑定中，数据属性值通过属性绑定从组件流到输入框。用户的修改通过事件绑定流回组件，把属性值设置为最新的值。

Angular 在每个 JavaScript 事件循环中处理所有的数据绑定，它会从组件树的根部开始，递归处理全部子组件。

数据绑定在模板与对应组件的交互中扮演了重要的角色。

数据绑定在父组件与子组件的通讯中也同样重要。

指令 (directive)

Angular 模板是动态的。当 Angular 渲染它们时，它会根据指令提供的操作对 DOM 进行转换。

组件是一个带模板的指令；@Component装饰器实际上就是一个@Directive装饰器，只是扩展了一些面向模板的特性。 

还有两种其它类型的指令：结构型指令和属性 (attribute) 型指令。

它们往往像属性 (attribute) 一样出现在元素标签中， 偶尔会以名字的形式出现，但多数时候还是作为赋值目标或绑定目标出现。

结构型指令通过在 DOM 中添加、移除和替换元素来修改布局。

下面的范例模板中用到了两个内置的结构型指令：

src/app/hero-list.component.html (structural)

Copy Code

<li *ngFor="let hero of heroes"></li><hero-detail *ngIf="selectedHero"></hero-detail>

• *ngFor告诉 Angular 为heroes列表中的每个英雄生成一个<li>标签。

• *ngIf表示只有在选择的英雄存在时，才会包含HeroDetail组件。

属性型 指令修改一个现有元素的外观或行为。 在模板中，它们看起来就像是标准的 HTML 属性，故名。

ngModel指令就是属性型指令的一个例子，它实现了双向数据绑定。 ngModel修改现有元素（一般是<input>）的行为：设置其显示属性值，并响应 change 事件。

src/app/hero-detail.component.html (ngModel)

Copy Code

<input [(ngModel)]="hero.name">

Angular 还有少量指令，它们或者修改结构布局（例如 ngSwitch）， 或者修改 DOM 元素和组件的各个方面（例如 ngStyle和 ngClass）。

服务

服务是一个广义范畴，包括：值、函数，或应用所需的特性。

几乎任何东西都可以是一个服务。 典型的服务是一个类，具有专注的、明确的用途。它应该做一件特定的事情，并把它做好。

例如：

• 日志服务

• 数据服务

• 消息总线

• 税款计算器

• 应用程序配置

服务没有什么特别属于 Angular 的特性。 Angular 对于服务也没有什么定义。 它甚至都没有定义服务的基类，也没有地方注册一个服务。

即便如此，服务仍然是任何 Angular 应用的基础。组件就是最大的服务消费者。

下面是一个服务类的范例，用于把日志记录到浏览器的控制台：

src/app/logger.service.ts (class)

Copy Code

export class Logger {  log(msg: any)   { console.log(msg); }  error(msg: any) { console.error(msg); }  warn(msg: any)  { console.warn(msg); }}

下面是HeroService类，用于获取英雄数据，并通过一个已解析的承诺 (Promise) 返回它们。 HeroService还依赖于Logger服务和另一个用于处理服务器通讯的BackendService服务。

src/app/hero.service.ts (class)

Copy Code

export class HeroService {  private heroes: Hero[] = [];  constructor(    private backend: BackendService,    private logger: Logger) { }  getHeroes() {    this.backend.getAll(Hero).then( (heroes: Hero[]) => {      this.logger.log(`Fetched ${heroes.length} heroes.`);      this.heroes.push(...heroes); // fill cache    });    return this.heroes;  }}

服务无处不在。

组件类应保持精简。组件本身不从服务器获得数据、不进行验证输入，也不直接往控制台写日志。 它们把这些任务委托给服务。

组件的任务就是提供用户体验，仅此而已。它介于视图（由模板渲染）和应用逻辑（通常包括模型的某些概念）之间。 设计良好的组件为数据绑定提供属性和方法，把其它琐事都委托给服务。

Angular 不会强制要求我们遵循这些原则。 即使我们花 3000 行代码写了一个“厨房洗碗槽”组件，它也不会抱怨什么。

Angular 帮助我们遵循这些原则 —— 它让我们能轻易地把应用逻辑拆分到服务，并通过依赖注入来在组件中使用这些服务。

依赖注入

“依赖注入”是提供类的新实例的一种方式，还负责处理好类所需的全部依赖。大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。

Angular 通过查看构造函数的参数类型得知组件需要哪些服务。 例如，HeroListComponent组件的构造函数需要一个HeroService服务：

src/app/hero-list.component.ts (constructor)

Copy Code

constructor(private service: HeroService) { }

当 Angular 创建组件时，会首先为组件所需的服务请求一个注入器 (injector)。

注入器维护了一个服务实例的容器，存放着以前创建的实例。 如果所请求的服务实例不在容器中，注入器就会创建一个服务实例，并且添加到容器中，然后把这个服务返回给 Angular。 当所有请求的服务都被解析完并返回时，Angular 会以这些服务为参数去调用组件的构造函数。 这就是依赖注入 。

HeroService注入的过程差不多是这样的：

如果注入器还没有HeroService，它怎么知道该如何创建一个呢？

简单点说，我们必须先用注入器（injector）为HeroService注册一个提供商（provider）。 提供商用来创建或返回服务，通常就是这个服务类本身（相当于new HeroService()）。

我们可以在模块中或组件中注册提供商。

但通常会把提供商添加到根模块上，以便在任何地方都使用服务的同一个实例。

src/app/app.module.ts (module providers)

Copy Code

providers: [  BackendService,  HeroService,  Logger],

或者，也可以在@Component元数据中的providers属性中把它注册在组件层：

src/app/hero-list.component.ts (component providers)

Copy Code

@Component({  selector:    'hero-list',  templateUrl: './hero-list.component.html',  providers:  [ HeroService ]})

把它注册在组件级表示该组件的每一个新实例都会有一个服务的新实例。

需要记住的关于依赖注入的要点是：

• 依赖注入渗透在整个 Angular 框架中，被到处使用。

• 注入器 (injector) 是本机制的核心。

  • 注入器负责维护一个容器，用于存放它创建过的服务实例。

  • 注入器能使用提供商创建一个新的服务实例。

• 提供商是一个用于创建服务的配方。

• 把提供商注册到注入器。