Angular2 架构

 

1. 说明

Angular 2 是一个用 HTML 和 JavaScript （或者可以编译成JavaScript）来构建应用程序的框架。该框架包含了一系列的库。

在 Angular 里，我们这样来构建应用程序：用带 Angular 扩展语法的 HTML 写模板 ，用 组件 类管理这些模板，用 服务 添加应用逻辑，

用 根组件 完成 Angular 启动 。

首先，我们来看一些整体的结构图，这个图来自于官方网站。

通过图可以看出，Angular 应用中的 8 个主要部分：

l 模块 (Modules)

l 组件 (Components)

l 模板 (Templates)

l 元数据 (Metadata)

l 数据绑定 (Data Binding)

l 指令 (Directives)

l 服务 (Services)

l 依赖注入 (Dependency Injection)

2. 模块

典型的模块是一个内聚的代码块，用来实现某种单一的功能。Angular2应用程序本质上是有一系列模块组成的，

而且Angular 本身就是一组模块库。模块主要是导出一些东西——类，函数，值，供其它模块导入，然后使用这个类，函数或者值。

比如，从 @angular/core 中导入 Component 函数：

import { Component } from '@angular/core';

3. 组件

组件 通常为一些属性和方法组成的类，用来与视图进行交互。例如，一个组件类可能如下所示，有个属性name可以在视图上显示，

属性值可能来自于服务appService，同时，也可能存在 changeName方法，当点击按钮的时候执行该方法。

export class AppComponent {

name: string;

constructor(private _appService: AppService) {

this.name = this._appService.defaultName;

}

changeName() {

this.name = 'dory';

}

}

4. 元数据

元数据告诉 Angular 如何处理一个类。在 TypeScript 中，用 装饰器 (decorator) 来附加元数据，给一个类附加上元数据，

就是告诉Angular框架这是一个组件或者服务，给对应的类附加相应的行为，例如给AppComponent附加组件元数据。

@Component({

selector: 'app',

template: `<h1>hello world</h1>

I am {{name}}

<button (click)="changeName()">更改名称</button>

`,

providers: [AppService]

})

export class AppComponent {

@Component 中的一些常见配置项：

selector ：一个 css 选择器，它告诉 Angular 在 父级 HTML如何查找及定位该组件。

templateUrl /template：组件模板的地址/组件模板。

directives ：一个数组，包含 此模板需要依赖的组件或指令。

providers ：一个数组，包含组件所依赖的服务。

5. 模板

模板 主要用来定义视图，以html的形式存在，用来告诉Angular图和渲染视图。多数情况下，模板看起来和标准html很像，例如

<h1>hello world</h1>

I am {{name}}

<button (click)="changeName()">更改名称</button>

这个模板有标准html元素 h1 button等，但是还存在一些 Angular自带的模板语法 {{}} , (click)等，这些以后再详细说明。

总体来说，Angular模板就是 html+Angular模板语法的结合体。模板和组件同时存在，整个Angular视图实际上是一个Angular组件模板树。

6. 数据绑定

Angular支持数据绑定，通过往模板添加各种标记，让模板中的标记与组件的各个部分对应起来，相互合作的机制。避免手工代码来实现将数据值推送到 HTML 控件中，

并把用户的反馈转换成动作和值更新，这种枯燥乏味、容易出错的推/拉逻辑。

Angular 在每个 JavaScript 事件周期中一次性处理 所有的 数据绑定，它会从组件树的根部开始，自顶向下处理各个叶节点。

数据绑定的语法有四种形式。

l 插值表达式：用{{}}来表示，显示组件中对应的属性或者函数。

l 属性绑定：用[]来表示，将对应的值绑定到模板元素的属性上。

l 事件绑定：用()来表示，用来执行对应的函数事件。

l 双向数据绑定 ：一般使用 ngModel 指令来表示，同时实现了属性绑定和事件绑定的功能，常见用在表单中。

7. 指令

指令 用来对 DOM 进行相应的修改。 指令 和 组件 非常类似，也是一个带有“指令元数据”的类。在 TypeScript 中，要通过 @Directive 装饰器把元数据附加到类上，@Component 装饰器实际上就是一个 @Directive 装饰器，只是扩展了一些面向模板的属性，组件因而也可以称之为一个特殊的指令。

常用的指令有两种， “结构型”指令和“属性 (attribute) 型”指令。

结构型指令：通过在 DOM 中添加、移除和替换元素来修改布局。例如：ngFor,ngIf, ngSwitch等

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

例如：ngStyle,ngClass,ngModel等

8. 服务

服务 分为很多种，包括：值、函数，类以及应用所需的特性。几乎任何东西都可以是一个服务。典型的服务就是一个类，

用来实现某种或某一类的应用或功能。通常情况下，服务作为组件的提供者，来提供特定的功能。例如，如下的AppService作为一个服务提供了一个默认的名称。

export class AppService {

defaultName: string = "timo";

}

9. 依赖注入

依赖注入是提供类的新实例的一种方式，同事还可以处理好类所需的全部依赖。大多数依赖注入都是服务，

Angular 使用依赖注入提供我们需要的组件以及这些组件所需的服务。Angular通过构造函数参数的类型，来得知需要哪些组件服务的。当 Angular 创建组件时，

会首先为组件所需的服务找一个 注入器（Injector）。

注入器是一个维护服务实例的容器，存放着以前创建的实例。

如果容器中还没有所请求的服务实例，服务提供商必须注册一个服务Provider到注入器中，注册服务的方式主要有两种：

1.在应用引导程序中注册，这样改服务的同一个实例在Angular整个应用程序都是可用的。

2. 在 @Component 元数据中的 providers 属性中注册，这样该服务只能在当前组件以及当前组件的子组件中进行访问

注入器根据该服务Provider来创建并返回对应的服务实例，并且添加到容器中，然后把这个服务返回给 Angular。当所有的服务都被解析完并返回时，

Angular 会以这些服务为参数去调用组件的构造函数。这就是依赖注入。