Angular2知识点思维导图模板_ProcessOn思维导图、流程图

模块

NgModule是一个装饰器函数

declartions

用于申明该模块中拥有的组件、指令、管道

exports

要导出的元素（declarations的子集）

imports

要导入的模板，基于浏览器都会导入BrowserModule

providers

全局服务列表，在该模块的所有地方都可依赖注入

bootstrap

标记根主键，根模块才需要设置该属性

Angular2自带的模块

ApplicationModule(@angular/core)

CommonModule(@angular/common)

HttpModule(@angular/http)

常用，提供HTTP异步请求支持

JsonpModule(@angular/http)

BrowserModule(@angular/platform-browser)

常用，基于浏览器的app项目必备

ServerModule(@angular/platform-server)

WorkerAppModule(@angular/platform-webworker)

FormsModule(@angular/forms)

常用，提供表单功能支持

ReactiveFormsModule(@angular/forms)

RouterModule(@angular/router)

常用，提供路由功能支持

Other Testing Module

组件

组件是一种特殊的指令

组件生命周期

ngOnChanges

当被绑定的输入属性值变化时调用，首次调用发生在ngOnInit之前

ngOnInit

在第一次ngOnChanged之后执行，组件初始化时调用

ngDoCheck

在每个变更检测周期中调用

ngAfterContentInit

内容加入组件之后调用

ngAfterContentChecked

每次完成内容变更检测之后调用

ngAfterViewInit

初始化组件视图和子视图之后调用

ngAfterViewChecked

每次完成组件视图和子视图的变更检测之后调用

ngOnDestroy

组件/指令销毁之前调用

组件配置项

selector

tempalteUrl

directives

providers

组件样式

scoped样式

通过:host选择宿主元素中的元素

:host(.active){}

通过:host-context查找外部样式

:host-context(.theme-dark) h2{}

使用 /deep/ 强制样式对子视图生效

/deep/有个别名： >>>

/deep/ h3{}

通过组件元数据的 encapsulation 设置组件包装模式

Native

Shadow DOM CSS

Emulated(Default)

模块化CSS

None

等价于全局样式

组件通讯

父 -> 子

输入型绑定，@Input()

在子组件中用setter拦截输入属性的变化，@Input() set

通过ngOnChanges钩子函数监控属性值变化

子 -> 父

监听子子组件的事件，@Output()

通过本地变量通信，子组件上设置 ref-name, #name

通过ViewChild/ViewChildren/ContentChildren/Query/QueryList访问子组件

父 <-> 子（双向）

通过服务进行双向通讯

通过EventBus来实现全局通讯

模板

标准HTML元素

插值表达式： {{name}}

模板表达式

JS表达式，如 1+2

不允许有副作用的表达式：=, +=,new, ++等

不支持位运算

新增的模板表达式

|（管道操作符）

?.（安全导航操作符）

表达式指南

没有可见的副作用

执行迅速

非常简单

幂等性

组件标签：<comp></comp>

指令语法糖：*ngIf, *ngFor

属性绑定（输入参数- 数据到视图）

[target]="expression"

bind-target="expression"

事件绑定（输出参数-视图到数据）

(target)="statement"

on-target="statement"

双向绑定

[(target)]="expression"

bindon-target="expression"

绑定目标

Attribute

CSS类

样式

模板引用变量

<input #name>（也可以是ref-name）

元数据

利用装饰器来附加元数据

系统常用装饰器

@Component

@Directive

@HostBinding

@HostListener

@Input

@Output

@Pipe

@NgModule

数据绑定

插值表达式：{{name}}，到DOM去

属性绑定：[name]="xxx"，到DOM去

事件绑定：(click)="doSomething()"，从DOM来

双向绑定：[(ngModel)]="xxx"，双向

指令

指令是用于扩展HTML功能的一种对象

指令分类

结构指令

通过在DOM中添加、移除和替换元素来修改布局

属性指令

修改一个现有元素的外观或行为，在模板中看起来就像标准的HTML属性

指令生命周期

ngOnChanges

ngOnInit

ngOnCheck

ngOnDestroy

内置指令

NgClass

绑定多个class，键值对对象提供，值为true,false

NgStyle

绑定多个style的时候使用，值为具体的样式值

NgIf

控制元素是否被添加在dom上，值为true,false

NgSwitch

一组可能的元素树中，根据条件显示一个

ngSwitchCase

ngSwitchDefault

NgFor

循环数组 or 对象

利用NgForTrackBy来提高性能

服务

服务无处不在，服务于Angular2本身无关联

服务可以分为多种：值、函数，以及应用所需要的特性

示例：日志服务，消息总线，Ajax封装，程序配置

依赖注入

忘掉new对象实例的方式

通过@NgModule的providers进行模块级别注入

通过@Component或@Directive的providers配置进行组件/指令级别的注入

模块级别注入，整个模块共享；组件级别注入，单个组件共享

注入器提供商

令牌token

默认令牌：ClassName

不透明令牌：OpaqueToken（注入的对象不是class的场景）

备选提供商：[{provider: xxx, useClass: xxx}]

带依赖的提供商（先注入依赖）

别名提供商： [{provider: xxx, useExisting: xxx}]

值提供商：[{provider: xxx, useValue: xxx}]

工厂提供商： [provider: xxx, useFactory: xxx, deps: [xx]]

可选依赖

通过@Optional()设置可选依赖，但要记得做空值判断

依赖查找

从组件本身注入器开始，沿着依赖注入器树往上查找，找不到就报错

@Optional，找不到依赖时，继续执行，并设置该依赖为null

@Host，仅在宿主组件中搜索，找不到报错

动画

表单

常规表单

动态表单（响应式表单）

表单验证

管道

管道多用于格式化数据，管道需要放置在NgModule中的declartions中

内置管道

AsyncPipe

接受一个Promise或Observable输入，并自动订阅输入，最终返回它们的结果

CurrencyPipe

DatePipe

DecimalPipe

I18nPluralPipe

I18nSelectPipe

JsonPipe

将数据转换为JSON

LowerCasePipe

PercentPipe

SlicePipe

UpperCasePipe

管道分类

pure

纯管道会忽略复合对象内部变更，只有当引用变化，才被认为是变化

注意：在和ngFor搭配的时候，如果引用没有变化，管道将不会生效；如果要通知管道生效，最好是直接用赋值的方式，更新引用

impure

通过在@Pipe中，设置pure:false，创建非纯管道

路由器

需要配置<base href="/">

也可以用APP_BASE_HREF值提供器来提设定

hash路由，使用forRoot(routes, {useHash: true})

匹配规则：先匹配者优先，先具体，再通用，接着空路由，最后**通配符

路由配置项

path

''（空路由，不需要带斜杠）

‘**’（URL无法匹配任意路由时的通配符）

omponent

redirectTo

pathMatch

路由守卫

CanActivate（检查路由访问权限）

CanActivateChild（检查子路由访问权限）

CAnDeactivate（询问是否丢弃未保存的修改）

Resolve（预先获取路由数据）

CanLoad（在加载特性模块之前进行检查）

相对导航

./（当前级别）

../（上一级别）

测试

单元测试

端到端测试