Angular 2 Architecture Overview

Posted 2020-06-10

 

Module 

简单来说模块（module）就是完成共同目的的代码块，export一些内容例如一个类、函数、或值变量。

component就是一个基本的Angular块，一个component类其实也是我们从模块中export出来的东西。

Angular本身也是一个有着许多称为“barrels”的库模块的集合。angular2/core 是最主要的Angular库模块。

如果引入的是Angular本身的库模块，import语句直接引用的是模块的名称；如果引入的是自己本地的模块，则需要使用相对路径，例如同一个目录下使用前缀(./)。

import {Component} from ‘angular2/core‘;       // angular的模块
import {AppComponent} from ‘./app.component‘;  // 自己写的本地模块

 

Component

组件（Component）控制屏幕实际使用面积的一小块（我们称之为视图的一小块）。简单来说组件完成一些事情来支撑视图（在一个类里），这个类通过属性和方法的API与视图相互作用。

export class HeroListComponent implements OnInit {
  constructor(private _service: HeroService){ }
  heroes:Hero[];
  selectedHero: Hero;
  ngOnInit(){
    this.heroes = this._service.getHeroes();
  }
  selectHero(hero: Hero) { this.selectedHero = hero; }
}

 

Template

模板（Template）是用于定义组件的视图，通过html来告诉Angular怎样来渲染这个组件。

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

<hero-detail>是自定义的标签，代表的是HeroDetailComponent，在写Angular模板的时候，将自定义标签和原有标签混合是很常见的。

 

Metadata

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

通过将metadata附加在类上，来告诉angular：HeroListComponent是一个组件。

通过“@decorator”来添加metadata是Typescript中最简单的方式。“@decorator”是个函数，有其配置参数。

Component metadata的文档：https://angular.io/docs/ts/latest/api/core/ComponentMetadata-class.html

 

Data Binding

数据绑定是一种统筹模板和组件的机制，我们在模板HTML中增加双花括号等其他标记来告诉Angular怎样连接组件和模板两边。

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

第一行代码：{{hero.name}}是插入（interpolation），将组件的属性hero.name显示在div中。

第二行代码：[hero]是属性绑定（property binding），将父组件的selectedHero属性传给子组件的hero属性。

第三行代码：(click)是事件绑定（event binding），当用户点击时，调用组件的selectHero方法。

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

双向数据绑定：使用ngModel命令，属性值会从组件传送到input框中，同时用户改变input框的值时也会传送回组件，重设组件的属性值（和事件绑定类似）。

 

Directive

Angular渲染模板的时候，根据给定的命令（directive）来将模板转换成DOM。

命令分为两种：结构（structural）命令和属性（Attribute）命令。通常在标签中出现（在等号的左边）。

<div *ngFor="#hero of heroes"></div>
<hero-detail *ngIf="selectedHero"></hero-detail>

上面的ngFor、ngIf就是两个结构命令，它们可以增加、删除DOM中的元素。

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

ngModel是其中一种属性命令，属性命令改变元素的外观和行为。

 

Service

服务（Service）囊括的范围很大，任何对我们的应用起到作用的值、函数或特性都能成为service，常见的有：

• logging service
• data service
• message bus
• tax calculator
• application configuration

// app/logger.service.ts (class only)
export class Logger {
  log(msg: any)   { console.log(msg); }
  error(msg: any) { console.error(msg); }
  warn(msg: any)  { console.warn(msg); }
}

上面是一个service类的例子，作用是简单地在浏览器中log一些信息。

组件通常不直接完成一些工作，而是通过service来完成，例如从数据库获取数据、验证用户输入等等。它只维护属性和set|get这些属性的方法（为了数据绑定），而其他工作都交给service。

 

Dependency Injection

依赖注入（Dependency Injection）是在一个类中产生一个的新的实例的途径，这个实例是它require的依赖的实例。大多数的依赖都是service。

简单来说，Angular通过依赖注入来给组件提供它们需要的service。

// app/hero-list.component (constructor)
constructor(private _service: HeroService){ }

在TypeScript中，Angular通过构造函数的参数，从而知道要提供什么service给组件。以上面为例，HeroListComponent的构造函数表明需要的是HeroService。

Injector维护一个service实例的容器，如果需要的service实例（需要是指在Component Metadata中的providers字段声明？这样就能解释只有父组件声明的话，子组件会和父组件共享一个实例的现象）不在容器里，Injector会增加进它的容器里，当所有需要的service实例都在之后，Angular可以开始调用组件的构造函数。这就是依赖注入的过程。