Angular2基础篇（二）Angular2架构

Angular2架构

---

Angular 2 应用程序应用主要由以下 8 个部分组成：

1. 模块 (Modules)
2. 组件 (Components)
3. 模板 (Templates)
4. 元数据 (Metadata)
5. 数据绑定 (Data Binding)
6. 指令 (Directives)
7. 服务 (Services)

8. 依赖注入(Dependency Injection)

   下图展示了每个部分是如何相互工作的：
   
   图中的模板 (Templates)是由 Angular 扩展的 HTML 语法组成，组件 (Components)类用来管理这些模板，应用逻辑部分通过服务 (Services)来完成，然后在模块中打包服务与组件，最后通过引导根模块来启动应用。

接下来我们会用三部分的内容具体来分析：

1.模块 (Modules)

• Angular 应用是模块化的，它有自己的模块系统：NgModule。
• 一个 NgModule 就是一个容器，用于存放一些内聚的代码块， 它可以包含一些组件、服务提供商或其它代码文件，其作用域由包含它们的 NgModule 定义。 它还可以导入一些由其它模块中导出的功能，并导出一些指定的功能供其它 NgModule 使用。
• 每个 Angular 应该至少要有一个模块(根模块)，一般可以命名为：AppModule，并位于一个名叫 app.module.ts 的文件中，引导这个根模块就可以启动你的应用。

• Angular 模块是一个带有 @NgModule 装饰器的类，它接收一个用来描述模块属性的元数据对象。

  几个重要的属性如下：
  
  declarations （声明） - 视图类属于这个模块。 Angular 有三种类型的视图类： 组件 、 指令 和 管道 。
  
  exports - 声明（ declaration ）的子集，可用于其它模块中的组件模板 。
  
  imports - 本模块组件模板中需要由其它导出类的模块。
  
  providers - 服务的创建者。本模块把它们加入全局的服务表中，让它们在应用中的任何部分都可被访问到。
  
  bootstrap - 应用的主视图，称为根组件，它是所有其它应用视图的宿主。只有根模块需要设置 bootstrap 属性中。
  

一个最简单的根模块:

app/app.module.ts 文件：

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

接下来我们通过引导根模块来启动应用，开发过程通常在 main.ts 文件中来引导 AppModule ，代码如下：

app/main.ts 文件：

import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';

platformBrowserDynamic().bootstrapModule(AppModule);

2.组件(Components)

• 组件是一个模板的控制类用于处理应用和逻辑页面的视图部分。
• @Component 装饰器会指出紧随其后的那个类是个组件类，并为其指定元数据。元数据告诉 Angular 如何处理一个类。在 TypeScript 中，我们用 装饰器 (decorator) 来附加元数据。 一个普通类用@Component 装饰器，它才变成了组件。
• 组件的元数据告诉 Angular 到哪里获取它需要的主要构造块，以创建和展示这个组件及其视图。 具体来说，它把一个模板和该组件关联起来。 该组件及其模板，共同描述了一个视图。@Component 的元数据还会配置要如何在 HTML 中引用该组件，以及该组件需要哪些服务等等。

下面就是UserListComp的基础元数据：

@Component({
  selector: 'user-list',
  templateUrl: 'user-list.html',
  providers:  [ UserListService ],
  styleUrls: ['user-list.scss'],
})
export class UserListComp implements OnInit,OnDestroy {
    ......
}

selector：是一个 CSS 选择器，它会告诉 Angular，一旦在模板 HTML 中找到了这个选择器对应的标签，就创建并插入该组件的一个实例。 比如，如果应用的 HTML 中包含 <user-list></user-list>，Angular 就会在这些标签中插入一个 UserListComp  实例的视图。

templateUrl：该组件的 HTML 模板文件相对于这个组件文件的地址。 另外，你还可以用 template 属性的值来提供内联的 HTML 模板。 这个模板定义了该组件的宿主视图。

providers 是当前组件所需的依赖注入提供商的一个数组。在这个例子中，它告诉 Angular，该组件的构造函数需要一个 HeroService 实例，以获取要显示的用户列表。

styleUrls：该组件的 scss 样式文件相对于这个组件文件的地址。

      模板 (Templates)

       组件和模板共同构建视图。模板就是一种 HTML，它会告诉 Angular 如何渲染该组件。你的模板可以使用数据绑定来协调应用和 DOM 中的数据，使用管道在显示出来之前对其进行转换，使用指令来把程序逻辑应用到要显示的内容上。

      数据绑定 (Data Binding)

如图可见，angular通过四种方式来进行数据绑定：

• 插值 : 在 HTML 标签中显示组件值。

<li>{{user.name}}</li>

• 属性绑定: 把元素的属性设置为组件中属性的值。

  <home-comp [name]="user.name" ></home-comp>

    //下面是home-comp组件的部分代码
    @Component({
      selector: 'home-comp',
      template: ` 
          <div>{{name}}</div>
        `,
      styles: [`
          ......
      `],
    })
    export class HomeComp implements OnInit {
      @Input() name: string;
    }

• 事件绑定: 在组件方法名被点击时触发。

<button (click)="login()">登录</button>

• 双向绑定: 使用Angular里的NgModel指令可以更便捷的进行双向绑定。

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

      管道

• Angular 的管道可以让你在模板中声明显示值的转换逻辑。 带有 @Pipe 装饰器的类中会定义一个转换函数，用来把输入值转换成供视图显示用的输出值。
• Angular 自带了很多管道，我们也可以自定义一些需要的管道。
• 管道操作符 (|)：{{value | pipe_name}}

• 我们也可以把管道串联起来，把一个管道函数的输出送给另一个管道函数进行转换。 管道还能接收一些参数，来控制它该如何进行转换。{{today | date:'fullDate'}}

  指令

• Angular 的模板是动态的。当 Angular 渲染它们的时候，会根据指令给出的指示对 DOM 进行转换。 指令就是一个带有 @Directive 装饰器的类。

  在Angular中包含以下三种类型的指令：

  属性指令：会修改现有元素的外观或行为。例如ngModle指令。
  
  结构指令：通过添加、移除或替换 DOM 元素来修改布局。如常用的*ngFor  *ngIf指令。
  
  组件：作为指令的一个重要子类，组件本质上可以看作是一个带有模板的指令。
  

3.服务与依赖注入

      服务

• Angular2中的服务是封装了某一特定功能，并且可以通过注入的方式供他人使用的独立模块。

• Angular 把组件和服务区分开，以提高模块性和复用性。

• 一般来说，组件主要用来管用户体验，将一些具体的业务逻辑用一些可注入的服务来实现。

  依赖注入

• 在 Angular 中，要把一个类定义为服务，就要用 @Injectable 装饰器来提供元数据，以便让 Angular 可以把它作为依赖注入到组件中。

• 当 Angular 创建组件时，会首先为组件所需的服务找一个注入器（ Injector ） 。注入器是一个维护服务实例的容器，存放着以前创建的实例。
• 当 Angular 创建组件类的新实例时，它会通过查看该组件类的构造函数，来决定该组件依赖哪些服务或其它依赖项。如constructor(private service: UserListService) { }

• 当 Angular 发现某个组件依赖某个服务时，它会首先检查是否该注入器中已经有了那个服务的任何现有实例。如果所请求的服务尚不存在，注入器就会使用以前注册的服务提供商来制作一个，并把它加入注入器中，然后把该服务返回给 Angular。

• 当所有请求的服务已解析并返回时，Angular 可以用这些服务实例为参数，调用该组件的构造函数。

      服务提供商

对于要用到的任何服务，你必须要注册一个提供商。你可以在模块中或者组件中注册这些提供商。

• 当你往根模块中添加服务提供商时，服务的同一个实例会服务于你应用中的所有组件。

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    BrowserModule,
  ],
  bootstrap: [AppComponent],
  providers: [
    HttpInterceptorProviders,
    UserListService,
  ],
})

• 当你在组件中注册提供商时，你会为该组件的每一个新实例提供该服务的一个新实例。

@Component({
  selector: 'user-list',
  templateUrl: 'user-list.html',
  providers:  [ UserListService ],
  styleUrls: ['user-list.scss'],
})