Angular2知识点
2016-09-20 17:09:49 21 举报AI智能生成
Angular2整体知识点/结构图
作者其他创作
大纲/内容
模块
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
<button [attr.aria-label]="xx"></button>
CSS类
<div [class.xxx]="true"></div>
样式
<div [style.color]="'red'"></div>
模板引用变量
<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（在加载特性模块之前进行检查）
相对导航
./（当前级别）
../（上一级别）
测试
单元测试
端到端测试
0 条评论
下一页
