本文为原创文章,转载请标明出处
目录
- 架构
- 模板与数据绑定
- 生命周期
1. 架构
模块
Angular 应用是模块化的,并且 Angular 有自己的模块系统,它被称为 Angular 模块 或 NgModules。
Angular 模块都是一个带有 @NgModule
装饰器的类。NgModule
是一个装饰器函数,它接收一个用来描述模块属性的元数据对象。其中最重要的属性是:
declarations
- 声明本模块中拥有的视图类。Angular 有三种视图类:组件、指令和管道。exports
- declarations 的子集,可用于其它模块的组件模板。imports
- 本模块声明的组件模板需要的类所在的其它模块。providers
- 服务的创建者,并加入到全局服务列表中,可用于应用任何部分。bootstrap
- 指定应用的主视图(称为根组件),它是所有其它视图的宿主。只有根模块才能设置bootstrap
属性。
组件
组件负责控制视图,通过一些由属性和方法组成的 API 与视图交互。
模板
模板以 HTML 形式存在,告诉 Angular 如何渲染组件。
元数据
元数据告诉 Angular 如何处理一个类。@Component
装饰器能接受一个配置对象, Angular 会基于这些信息创建和展示组件及其视图。@Component
里面的元数据会告诉 Angular 从哪里获取你为组件指定的主要的构建块。@Component
的配置项包括:
selector
- CSS 选择器,它告诉 Angular 在父级 HTML 中查找标签,创建并插入该组件。templateUrl
- 组件 HTML 模板的模块相对地址。providers
- 组件所需服务的依赖注入提供商数组。
数据绑定
Angular 支持数据绑定,一种让模板的各部分与组件的各部分相互合作的机制。 往模板 HTML 中添加绑定标记,来告诉 Angular 如何把二者联系起来。
指令
Angular 模板是动态的。当 Angular 渲染它们时,它会根据指令提供的操作对 DOM 进行转换。
服务
服务是一个广义范畴,包括:值、函数,或应用所需的特性。
依赖注入
大多数依赖都是服务。 Angular 使用依赖注入来提供新组件以及组件所需的服务。
2. 模板与数据绑定
绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。
<table border="1"> <tbody> <tr> <th> 数据方向 </th> <th> 语法 </th> <th> 绑定类型 </th> </tr> <tr> <td> 单向<br/>从数据源到视图目标 </td> <td> <code> {{ expression }}<br/>[target]="expression"<br/>bind-target="expression"<br/> </code> </td> <td> 插值表达式<br/>Property<br/>Attribute<br/>类<br/>样式 </td> </tr> <tr> <td> 单向<br/>从视图目标到数据源 </td> <td> <code> (target)="statement"<br/>on-target="statement" </code> </td> <td> 事件 </td> </tr> <tr> <td> 双向 </td> <td> <code> [(target)]="expression"<br/>bindon-target="expression" </code> </td> <td> 双向 </td> </tr> </tbody> </table>
数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。 下面是的汇总表:
<table border="1"> <tbody> <tr> <th> 绑定类型 </th> <th> 目标 </th> <th> 范例 </th> </tr> <tr> <td> Property </td> <td> 元素的 property<br/>组件的 property<br/>指令的 property </td> <td> <code> <img [src]="heroImageUrl"><br/> <app-hero-detail [hero]="currentHero"></app-hero-detail><br/> <div [ngClass]="{'special': isSpecial}"></div> </code> </td> </tr> <tr> <td> 事件 </td> <td> 元素的事件<br/>组件的事件<br/>指令的事件 </td> <td> <code> <button (click)="onSave()">Save</button><br/> <app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail><br/> <div (myClick)="clicked=$event" clickable>click me</div> </code> </td> </tr> <tr> <td> 双向 </td> <td> 事件与 property </td> <td> <code> <input [(ngModel)]="name"> </code> </td> </tr> <tr> <td> Attribute </td> <td> attribute </td> <td> <code> <button [attr.aria-label]="help">help</button> </code> </td> </tr> <tr> <td> CSS 类 </td> <td> class property </td> <td> <code> <div [class.special]="isSpecial">Special</div> </code> </td> </tr> <tr> <td> 样式 </td> <td> style property </td> <td> <code> <button [style.color]="isSpecial ? 'red' : 'green'"></button> </code> </td> </tr> </tbody> </table>
内置属性型指令
- NgClass - 添加或移除一组CSS类
- NgStyle - 添加或移除一组CSS样式
- NgModel - 双向绑定到HTML表单元素
内置结构型指令
- NgIf - 根据条件把一个元素添加到DOM中或从DOM移除
- NgSwitch - 一组指令,用于切换一组视图
- NgFor - 对列表中的每个条目重复套用同一个模板
模板引用变量
# var
3. 生命周期
ngOnChanges()
当 Angular 重新设置数据绑定输入属性时响应。该方法接受当前和上一属性值的 SimpleChanges
对象。
当被绑定的输入属性的值发生变化时调用,首次调用一定会发生在 ngOnInit()
之前。
ngOnInit()
在 Angular 第一次显示数据绑定和设置指令/组件的输入属性之后,初始化指令/组件。
在第一轮 ngOnChanges()
完成之后调用,只调用一次。
ngDoCheck()
检测,并在发生 Angular 无法或不愿意自己检测的变化时作出反应。
在每个 Angular 变更检测周期中调用,ngOnChanges()
和 ngOnInit()
之后。
ngAfterContentInit()
当把内容投影进组件之后调用。
第一次 ngDoCheck()
之后调用,只调用一次。
只适用于组件。
ngAfterContentChecked()
每次完成被投影组件内容的变更检测之后调用。ngAfterContentInit()
和每次 ngDoCheck()
之后调用。
只适合组件。
ngAfterViewInit()
初始化完组件视图及其子视图之后调用。
第一次 ngAfterContentChecked()
之后调用,只调用一次。
只适合组件。
ngAfterViewChecked()
每次做完组件视图和子视图的变更检测之后调用。ngAfterViewInit()
和每次 ngAfterContentChecked()
之后调用。
只适合组件。
ngOnDestroy
在 Angular 销毁指令/组件之前调用。
如有不当之处,请予指正,谢谢~