Angular2的核心概念详解

2-1 组件及组件树

8个核心概念

• 组件 Components
• 元数据 Metadata
• 模板 Templates
• 数据绑定 Data binding
• 服务 Services
• 指令 Directives
• 依赖注入 Dependency Injection
• 模块 Modules

组件

组件要素

HTML、CSS、JavaScript

全生命周期支持

• Constructor 构造器初始化
• OnChanges 第一次触发数据变化钩子
• OnInit 组件初始化（建议将和业务相关的初始化放到这里）
• OnChanges 运行期间触发数据变化钩子
• OnDestroy 组件销毁前

组件示例

// 装饰器
@Component({
    selector: 'hello',
    template: '<p>{{greeting}}</p>'
})
// 组件类
export class HelloComponent {
    private greeting: string;
    constructor() {
        this.greeting = 'Hello, Angular 2!'
    }
}

元数据与装饰器

普通类 + 装饰器(@Component，包含元数据) => 组件

装饰器用于赋予一个类更丰富的信息（元数据），可以学习“reflect-metadata”库。

模板

• 内联模板：template
• 外联模板：templateUrl

数据绑定

数据绑定方式

• 插值：{{interpolation}}
• 属性绑定：[value]

<input [value]="myData" />

• 事件绑定：(keyup)

<input (keyup)="handle($event)" />

• 双向绑定：[(ngModel)]

<input [(ngModel)]="myData" />

组件树

组件渲染

2-2 指令

2-3 服务与依赖注入

服务是实现专一目的的逻辑单元， 如：日志服务。

示例：

export class LoggerService {
    constructor() {}

    debug(msg: string) {
        console.log(msg);
    }

    error(msg: string) {
        console.error(msg);
    }
}

依赖注入

依赖注入是组件引入外部构建（如：服务）的一种机制。

// 装饰器
@Component({
    selector: 'hello',
    template: '<p>{{greeting}}</p>',
    providers: [LoggerService]
})
// 组件类
export class HelloComponent {
    private greeting: string;
    constructor(logger: LoggerService) {
        this.greeting = 'Hello, Angular 2!';
        logger.debug('构造函数执行完毕');
    }
}

分层注入

注入 -> 重新注入

2-4 模块

模块由组件、指令、服务组成。

文件模块

• 核心模块：@angular/core
• 通用模块：@angular/common
• 表单模块：@angular/forms
• 网络模块：@angular/http

文件模块使用示例

import { http } from "@angular/http"

// @Component装饰器
import { Component } from "@angular/core"

// @Directive装饰器
import { Directive } from "@angular/core"

import { ElementRef, Renderer} from "@angular/core"

应用模块

@NgModule({
    declarations: [
        AppComponent,
        SomeDirective
    ],
    providers: [ LoggerService ],
    imports: [ OtherModule ],
    bootstrap: [ AppComponent ],
    exports: [ SomeDirective ]
})
export class AppModule {}

• declarations: 包装组件或指令等
• providers: 依赖注入
• imports: 导入其他模块
• bootstrap: 设置根组件
• exports: 导出组件或指令等