angular2架构详解

参考   http://codin.im/2016/09/18/angular2-architecture-intro/

 

 

http://www.tuicool.com/articles/EvEZjmZ

 

 

本文将从框架角度简单介绍Angular2的基本架构，若是你对Angular2还不太了解，请先阅读另两篇文章Angular2入门教程1 和 Angular2入门教程-2 实现TodoList App ，而后再阅读此文。

Angular2是一个完整的单页应用开发框架。不少人拿它跟React比，相比来讲，React是一个基础框架，更像是一个库，你须要不少第三方的库才能方便的开发一个完整的应用。而Angular2则提供了不少组件，或者叫库，好比Directive(指令)、组件框架、模板、依赖注入、绑定、路由等，在这些库的帮助下，你更多的只须要关注具体业务的开发。

当你编写一个Angular2的应用的时，你从一个Component开始，编写这个Component须要展现的页面模板，并在Component中控制模板上显示的内容和用户的交互。通常还须要编写一个service来实现业务逻辑。你还须要针对这个模板编写一个样式。最后，你须要把这个Component和service定义到一个module（模块）里。

这样就完成了这个应用模块的开发。剩下的就是用Angular提供的方法去启动应用的 root module ，也就是根模块。若是你的应用有几个模块须要交互或跳转，就须要定义路由。

因此，你只须要开发业务相关的Component组件，以及组件之间的数据交互和页面跳转，剩下的像页面文件的渲染、变量的双向绑定、用户事件的响应、页面的跳转和参数传递等等，都由框架来完成。

在这篇文章里，咱们就来看看Angular2框架背后提供的一些功能，了解了这些，有助于咱们理解一个Angular应用是怎么工做的，从而帮助咱们更好的利用框架，开发出更高质量的应用。

Angular2框架，提供了如下几个基本的功能：

• 模块
• 组件
• 服务
• 模板
• 数据绑定
• 依赖注入

模块是一个业务功能的集合，咱们能够把几个组件、服务和其余一些业务模型的定义都加到一个模块里，他的功能更多的是帮助咱们更好的组织咱们的代码，方便代码重用。模板、数据绑定、依赖注入是定义一套这个框架的规则和语法，咱们用这套规则和语法编写的代码，就可以享受Angular2给咱们带来的便利。

模块

Angular2的模块能够将组件、服务、指令、方法等封装成一个模块，以下图所示(图片摘自官网)：

好比咱们开发一个系统，里面包含一个”个人消息”的功能，这个功能包含一些组件，如消息列表、详细详情、回复、新消息和好友列表等。除了这些组件，咱们又须要相应的服务来跟服务器交互来提供数据。咱们可能也须要一些环境变量等。咱们能够把这些组件、服务等都封装在一个方法里面，像这样：

import{ NgModule }from'@angular/core'; import{ CommonModule }from'@angular/common'; import{ FormsModule }from'@angular/forms'; import{ FriendModule }from'./friend/friend.module'; import{ MessageListComponent }from'./message/list.component'; import{ MessageDetailComponent }from'./message/detail.component'; import{ MessageFormComponent }from'./message/form.component'; import{ MessageService }from'./todo.service'; @NgModule({ imports: [CommonModule, FormsModule, FriendModule ], exports: [MessageListComponent], declarations: [MessageListComponent, MessageDetailComponent, MessageFormComponent], providers: [MessageService] }) exportclassMessageModule{} 

在上面的模块定义中，咱们又引入了一个 FriendModule ，由于好友的功能在另外一个模块里，咱们不须要从新实现，而只是引入他既能够。咱们也能够只引入好友模块里面的某一个组件，也能够只引入服务。

在MessageModule中，在 exports: [MessageListComponent] 中导出了MessageListComponent，这样，别的模块可使用这个组件，来显示消息列表。

在应用的根模块中，除了上面的这些’imports’,’providers’这些定义之外，还有一个 bootstrap: [AppComponent] ，表示这个应用一开始会加载这个组件到index页面中。

在Angular2中，提供了不少模块，例如上面的 FormsModule 、 CommonModule , 还有Router等。他们都是一个个模块，也算是库，能够单独引入使用，也能够只引入须要的部分。

组件和指令

Angular2的组件是一个可重用的单元，包含模版、样式，还有数据、事件等交互逻辑。

下面以前文章中TodoList应用中的一个组件：

import{ Component }from'@angular/core'; import{ Todo }from'../todo'; import{ TodoService }from'../todo.service'; @Component({ selector: 'todo-list', templateUrl: 'app/todo/list/list.component.html', styleUrls: ['app/todo//list/list.component.css'] }) exportclassTodoListComponent{ newTodo: Todo = newTodo(); constructor(private todoService: TodoService) { } addTodo() { this.todoService.addTodo(this.newTodo); this.newTodo =newTodo(); } get todos() { returnthis.todoService.getAllTodos(); } } 

Angular2的组件经过一个@Component的Decorator（装饰器）定义一个组件TodoListComponent，组件中有2个方法，一个用于初始化任务列表数据，一个用于相应页面上的新建任务的事件。

在@Component中，定义了这个组件使用的模板、样式，和在它的父组件中所在的位置，也就是html标签 <todo-list> 。

在Angular2里，Directive（指令）跟组件相似，工做原理也跟上面相似。它跟组件同样，也是定义一种可重用的结构，添加用户交互。实际上，在Angular2中，Component继承自Directive接口，并提供了模板相关的属性和功能。

虽然组件和指令区别不大，可是，由于它在Angular2里面很是重要，并且是咱们开发应用的基本单位，因此它被独立出来，并被放在Angular2框架的核心位置。

有关组件，须要说明的是，在一个Angular2的应用中，组件是一个属性的结构，就好像html的DOM树同样，每一个Angular2应用都有一个根组件，而后它会有一个个的子组件。在咱们以前的一篇文章《Angular2入门教程-2》中咱们在设计系统的时候，就是从设计组件开始，获得的是一个组件树：

每一个组件（除了根组件）都会有一个父组件，每一个组件定义中的 selector 的值，对应父组件中的一个html标签。

元数据

元数据就是在定义模块、组件、服务的时候，Decorator方法里面的参数内容，例如一个AppComponent的元数据，就是 @Component 里面的参数，以下：

{
 selector: 'root-app', templateUrl: 'app/app.component.html', styleUrls: ['app/app.component.css'] } 

在Angular2中，Decorator被大量使用，当咱们定义模板、组件、服务、指令时，都是使用Decorator来定义。顾名思义，Decorator（装饰器）就是在一个类上面添加一些额外的属性或方法。

举个例子，上面的根组件AppComponent，在定义它的时候，经过 @Component 才能把它定义成一个Angular的组件。而后咱们在这个元数据里面，设置了这个组件对应的selector，模板和样式。这样Angular框架在解析这个类的时候，就会按照组件的规则去解析并初始化。当在一个页面里面遇到这个selector设置的标签（如这个例子中的 ）时，就会初始化这个组件，渲染模板生成html显示到对应的标签里面，并应用样式。

服务

在Angular2中，服务是一个很宽泛的定义，任何的类均可以被定义成服务，这个类中能够包含一些业务方法，能够包含环境配置变量。Angular2也没有对服务的定义作任何的规则限制。下面就是一个最简单的服务：

exportclassSomeService{
 someConfig: {foo: 'bar'} getConfig() { returnsomeConfig; } handle(msg: any) { console.log(msg); } } 

咱们只须要定义一个class，并把它export就能够。可是，通常咱们都是结合依赖注入来使用服务。

依赖注入

从Angular1的版本开始，依赖注入就是一个很核心的概念，在版本2中，主要是用于管理service实例的注入。在上面讲的service中，咱们建立了一个SomeService，在传统的用法中，咱们都是在须要用他的地方手动建立一个这个类的实例，而后调用他的相应方法或属性，例如:

letmyService =newSomeService();
myService.handle('the message');

可是，当咱们的系统中有不少service类，甚至这些service类相互之间又须要引用的时候，咱们就没有办法都经过手动建立的方式来获取service实例。更重要的是，这对于系统的解耦很是不便，不一样的服务之间直接建立和引用，会让系统变得很是难以维护。

Angular给咱们提供了一个很是好的解决方案，它借用了Java等语言中某些容器库的概念，将全部service实例的建立都由容器来完成，当一个service须要引用另外一个service的时候，不是本身建立另外一个service的实例，而是从容器中获取那个service的实例。

要使用依赖注入的功能，首先咱们的service必须由一个装饰器 @Injectable 来定义：

@Injectable()
exportclassSomeService{
// 跟以前同样，省略... } 

而后，在Component中须要加一个providers，也就是服务的建立者：

@Component({
 selector: 'some-list', templateUrl: 'some.component.html', providers: [ SomeService ] }) exportclassSomeComponent{ constructor(private theService: SomeService) { } // 省略其余方法。 }， 

这样这个服务就能够在SomeComponent中自动注入了。它的构造函数中有一个参数theService，类型是SomeService，Angular在建立这个Component的时候，就会从容器里面查找SomeService类的实例，若是有就用这个实例去初始化SomeComponent对象；若是没有就先新建一个，再初始化。这个过程，就是Angular的依赖注入。

有关依赖注入，须要注意的一点就是依赖注入的做用范围。Angular2的依赖注入是一个树形的结构，就好像组件树同样。在上面的例子中，咱们在 SomeComponent 的providers 里面设置了 SomeService ，也就是说，在SomeComponent这个节点，以及它全部的子节点的组件上，SomeService类的实例是共用的，它们都共享一个实例。可是，在这个SomeComponent的父组件里，它若是也想注入SomeService来使用的话，就没有办法从容器中得到，除非在它的父组件中的providers中也添加了这个服务。

在咱们以前教程《Angular2入门教程-2》的TodoList应用实例中，咱们把todo应用相关的类都添加到一个模块里，内容以下：

import{ NgModule }from'@angular/core'; import{ CommonModule }from'@angular/common'; import{ FormsModule }from'@angular/forms'; import{ TodoListComponent }from'./list/list.component'; import{ TodoDetailComponent }from'./detail/detail.component'; import{ TodoItemComponent }from'./item/item.component'; import{ TodoService }from'./todo.service'; @NgModule({ imports: [CommonModule, FormsModule ], declarations: [TodoListComponent, TodoDetailComponent, TodoItemComponent], providers: [TodoService] }) exportclassTodoModule{} 

咱们在这个模块的定义中定义了 providers: [TodoService] ，这样，这个模块的几个Component均可以共用这个TodoService的实例。

数据绑定

在jQuery或者更早的时代，当咱们须要更新页面的内容的时候，咱们通常都须要本身得到页面的DOM，而后，设置他的值。当页面上的内容须要更新到js端的时候，又须要设置一些事件，如onclick, onblur等，而后在响应事件里面再从页面得到这个值。这不只须要些不少代码、浪费时间，还很是容易出错。终于，Angular把咱们从这些枯燥的工做中解放出来，提供了数据绑定的功能。

在Angular1.x的版本中，数据绑定是经过轮询实现的。在Angular1里，全部须要绑定的数据都会在$scope中，Angular1.x有一个轮训机制，每隔一段时间就检查全部绑定的变量，检查他们如今的值跟上次检查的值是否一致，若是不一致，就触发相应的方法更新页面的内容。这虽然给咱们开发带来了便利，可是若是有太多的变量须要监听，就会形成很大的性能问题。

在Angular2里面，绑定的数据的监听是经过zone.js实现。通俗来说，zone给全部有可能更新数据的方法加了一个补丁，就像AOP，或者说代理模式。每当这些更新数据的方法被调用的时候，就会触发另外一个方法，告诉Angular有数据修改，Angular再去判断变量是否修改，若是有修改，就更新DOM。

并且，Angular2的数据更新检测是在每一个组件上有一个检测器。这样，就算应用中有再多绑定的变量，当有一个数据修改的事件之后，也只是对应的那个组件的检测器被触发，来检查它以及它全部的子组件的数据修改。

这两方面结合，就使得Angular2应用的性能可以有很大的提高。

说了那么多原理，咱们再来看看Angular2是数据绑定的几种方式，结合下面的代码看看每种方式的用途。这个模板中包括一个输入框用于新建，包含一个列表显示，以及一个子组件：

<headerclass="header">
<inputclass="new-hero"placeholder="输入名字"[(ngModel)]="newHero.name"(keyup.enter)="addHero()"> </header> <ul> <li>{{hero.name}}</li> <hero-detail[hero]="selectedHero"></hero-detail> <li(click)="selectHero(hero)"></li> </ul> 

咱们看看这个模板里面包含的4种数据绑定的方式：

• 插值表达式 
  这种方式是将组件中的数据hero.name显示到页面上那个
• 标签里。

• [user] 属性绑定

  这种方式用于将当前组件中的变量传递到子组件，也就是从list组件中，对于每个hero，将它传递到子组件HeroDetailComponent中。在子组件中，就须要这样来获取：

  @Input() todo: Todo; 

• (click)，(keyup.enter)

  这就是事件绑定，将页面上的DOM事件绑定到组件中的某个方法上。也就是当用户点击(click)，或者敲回车键后弹起(keyup.enter)时，调用组件中的某个方法。

• [(ngModel)] 
  这种是双向的数据绑定，上面3个都是单向的。双向绑定就是用户在页面上修改这个输入框的值时，这个值就会直接反馈到组件中，一样，若是在组件中经过某种方式修改了这个值，页面上的输入框中，也会显示最新的值。

对于上面的 [] 和 () 两种类型的绑定，能够理解成’输入’和’输出’。 [] 至关于一个组件的输入，通常这个输入从它的父组件得到；() 至关于组件的输出。上面的例子是用事件绑定，将数据”输出”到组件里。实际上，咱们还能够用一种 EventEmitter 把数据”输出”到父组件。

下面的图直观的描述了上面4种数据绑定方式的做用方式：（图片来自官网，其中’[property] = “value”‘这个表述的彷佛不太正确？？？）：

它们之间的关系

为了描述这几个功能之间的关系，先看看下面这张图（图片摘自官网）：

这张图就比较清楚的说明了组件、服务、模板、Directive（指令）、数据绑定和依赖注入的相互关系。结合这张图和上面说的开发一个Angular2的应用的基本过程，这样就更容易理解了。

下面，咱们来看一下Angular应用的工做流程。

1. 咱们定义一个根模块和一个根组件，而后在main.ts里面用这个根模块启动应用。
2. 根组件里面的一个html标签若是匹配了某一个组件的’selector’，这个组件就会被加载在这个标签里面。这样，整个应用就是一个组件树，
3. 咱们定义的Component信息，也就是类和Metadata(元数据)，Angular会根据这个组件定义将组件中定义的模板显示到selector对应的标签上，将样式应用到模板页面上。组件和模板之间又经过数据绑定联系起来，组件中的变量经过数据绑定展现到模板上，模板又经过事件绑定，对应到组件里的方法上。Directive的工做原理也跟上面相似。
4. 最后，咱们定义的service被Angular的Injector保存在一个树形结构的容器里，在某个组件中当咱们须要使用这个service时，就能够在构造函数中直接得到这个service的实例，而不用手动建立。这样，多个组件，或者模块均可以共用一个service的实例。因此，service除了提供业务方法，也能提供共享数据、数据传输等功能。