METAPHORS' BLOG
Metaphors
Oct 3, 2017
It takes 11 minutes to read this article.

Angular学习笔记(一)

本文为原创文章,转载请标明出处

目录

  1. 架构
  2. 模板与数据绑定
  3. 生命周期

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. 模板与数据绑定

绑定的类型可以根据数据流的方向分成三类: 从数据源到视图、从视图到数据源以及双向的从视图到数据源再到视图。

数据方向 语法 绑定类型
单向
从数据源到视图目标
{{ expression }}
[target]="expression"
bind-target="expression"
插值表达式
Property
Attribute

样式
单向
从视图目标到数据源
(target)="statement"
on-target="statement"
事件
双向 [(target)]="expression"
bindon-target="expression"
双向

数据绑定的目标是 DOM 中的某些东西。 这个目标可能是(元素 | 组件 | 指令的)property、(元素 | 组件 | 指令的)事件,或(极少数情况下) attribute 名。 下面是的汇总表:

绑定类型 目标 范例
Property 元素的 property
组件的 property
指令的 property
<img [src]="heroImageUrl">
<app-hero-detail [hero]="currentHero"></app-hero-detail>
<div [ngClass]="{'special': isSpecial}"></div>
事件 元素的事件
组件的事件
指令的事件
<button (click)="onSave()">Save</button>
<app-hero-detail (deleteRequest)="deleteHero()"></app-hero-detail>
<div (myClick)="clicked=$event" clickable>click me</div>
双向 事件与 property <input [(ngModel)]="name">
Attribute attribute <button [attr.aria-label]="help">help</button>
CSS 类 class property <div [class.special]="isSpecial">Special</div>
样式 style property <button [style.color]="isSpecial ? 'red' : 'green'"></button>

内置属性型指令

  • 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 销毁指令/组件之前调用。

如有不当之处,请予指正,谢谢~


>