architecture.md

架构概览

模块

• 每个 Angular 应用至少有一个根模块，习惯上命名为AppModule
• 每个 Angular 模块都是一个带有@NgModule装饰的类

NgModule

装饰器函数，用来接收一个用来描述模块属性的元数据对象

• declarations - 声明模块拥有的视图类（组件、指令、管道）
• exports - declarations 的子集
• imports - 组件模板需要的类所在的其他模块
• providers - 服务的创建者
• bootstrap - 指定应用的主视图，只有根模块能设置此属性

NgModules 与 JavaScript 模块

• 完全不同且完全无关
• 两个模块系统互补

组件

• 在类中定义组件的应用逻辑，为视图提供支持
• 组件通过一些由属性和方法组成的 API 与视图交互
• 通过生命周期钩子控制组件的创建、更新和销毁，例如ngOnInit()

模板

HTML 的扩展，获得 Angular 模板语法的支持

元数据

没有使用组件装饰器的组件类只是一个单纯的类

• selector - 查找标签并插入该组件
• templateUrl - 组件 HTML 模板的模块相对地址
• providers - 组件所需要服务

数据绑定

• 插值表达式 - {{value}}
• 属性绑定 - [property]="value"
• 事件绑定 - (event)="handler"
• 双向数据绑定 - [(ng-model)]="property"

指令

@Component装饰器实质是扩展了一些面向模板的特性的@Directive装饰器

• 结构型 - 用于在 DOM 中添加移除替换元素
• 属性型 - 用于修改现有元素的外观或行为

服务

包括：值、函数，或应用所需的特性，具有专注的、明确的用途

例如：日志/数据/输入验证/消息总线/计算器/配置

依赖注入

• 处理好类所需要的依赖，大多数依赖是服务
• 注入器维护了一个服务实例的容器，若请求服务不在容器中，则创建服务
• 所有请求的服务都被解析完成并返回时，组件再调用组件的构造函数去创建实例
• 通常在根模块上注册 provider，若在组件层注册则表示该组件的每一个新实例都会有一个新的服务实例