Angular2知识点
2016-09-20 17:09:49 21 举报AI智能生成
登录查看完整内容
Angular2整体知识点/结构图
作者其他创作
大纲/内容
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
组件样式
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()
通过ViewChild/ViewChildren/ContentChildren/Query/QueryList访问子组件
父 <-> 子（双向）
通过服务进行双向通讯
通过EventBus来实现全局通讯
模板
标准HTML元素
插值表达式： {{name}}
模板表达式
JS表达式，如 1+2
不支持位运算
新增的模板表达式
|（管道操作符）
?.（安全导航操作符）
表达式指南
没有可见的副作用
执行迅速
非常简单
幂等性
组件标签：<comp></comp>
属性绑定（输入参数- 数据到视图）
[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属性
指令生命周期
ngOnCheck
内置指令
NgClass
NgStyle
绑定多个style的时候使用，值为具体的样式值
NgIf
NgSwitch
一组可能的元素树中，根据条件显示一个
ngSwitchCase
ngSwitchDefault
NgFor
循环数组 or 对象
利用NgForTrackBy来提高性能
服务
服务无处不在，服务于Angular2本身无关联
服务可以分为多种：值、函数，以及应用所需要的特性
示例：日志服务，消息总线，Ajax封装，程序配置
依赖注入
忘掉new对象实例的方式
通过@NgModule的providers进行模块级别注入
通过@Component或@Directive的providers配置进行组件/指令级别的注入
模块级别注入，整个模块共享；组件级别注入，单个组件共享
注入器提供商
令牌token
默认令牌：ClassName
不透明令牌：OpaqueToken（注入的对象不是class的场景）
带依赖的提供商（先注入依赖）
可选依赖
通过@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值提供器来提设定
匹配规则：先匹配者优先，先具体，再通用，接着空路由，最后**通配符
路由配置项
path
''（空路由，不需要带斜杠）
‘**’（URL无法匹配任意路由时的通配符）
omponent
redirectTo
pathMatch
路由守卫
CanActivate（检查路由访问权限）
CanActivateChild（检查子路由访问权限）
CAnDeactivate（询问是否丢弃未保存的修改）
Resolve（预先获取路由数据）
CanLoad（在加载特性模块之前进行检查）
相对导航
./（当前级别）
../（上一级别）
测试
单元测试
端到端测试
0 条评论
回复 删除
下一页
