Angular 2迁移
组件式开发
渲染更快、变化监测效率更高
Angular Mobile Toolkit
可用ES6/7、WebComponent
UpgradeAdapter
两个版本代码进行适配
组件及组件树（Component）
核心
分为Header、ContactList、Footer
父子组件：Contact
什么是生命周期钩子？
Constructor：构造器初始化
Onchanges：第一次触发数据变化钩子，接收来自父组件的传入数据
OnInit：组件初始化
OnChanges：运行期间触发数据变化钩子，输入属性获得的数据发生了变化触发
OnDestroy：销毁，事件解绑、
@Component{定义装饰器
selector:'hello',可以匹配到<hello></hello>标签，组件渲染
template：‘<p>{{greeting}}</p>’内联模板
templateUrl:"path/to/hello.html"外联模板(只能选择其中一种）
}作用：赋予一个类元数据（reflect-metadata库）
父组件使用子组件定义的元素标签需要导入
export class 组件类
@Input() data:IContact;输入接口用来接收父组件输入的数据
数据通过层层的属性绑定进行传递
@Output:事件绑定，自下而上
元数据（Metadata）
模板（Templates）
@Component{定义装饰器
selector:'hello',可以匹配到<hello></hello>标签，组件渲染
template：‘<p>{{greeting}}</p>’内联模板
templateUrl:"path/to/hello.html"外联模板(只能选择其中一种）
}
数据绑定（data binding）
数据绑定：
1.{{}}插值，可使用组件类的成员变量
2.属性绑定：[]
3.事件绑定：()
4.双向绑定：[(ngModel)]
服务（Services）、依赖注入（Drpendency Injection）
依赖注入
组件引用外部构建的机制
注入器 providers：[LoggerService] =》依赖注入的配置
constructor(logger:LoggerService){}自动传入LoggerService实例
分层注入
子组件自动注入，且为单例
重新注入
指令（Directive）
属性指令改变组件模板外观、行为
结构指令：改变DOM结构，如ngIf插入或移除DOM节点
组件继承于指令，带有模板的指令
ElementRef：获取模板元素的引用
Rendered：辅助渲染的作用、、、服务器渲染？？？
模块（Mudules）
- 文件模块
核心模块@angular/core
通用模块@angular/common
表单模块@angular/forms
网络模块@angular/http
···
- 使用
@Component装饰器：import{Component} from "@angular/core"
@Directive装饰器：import{Directive} from "@angular/core"
- 应用模块
功能层面
包含指令、服务、组件归类包装
模块之间的指令不能相互使用，需要导入导出
- 声明模块
@NgModule({})
declaration：包装组件或指令
providers：依赖注入，可在全局使用
imports：导入其他模块
bootstrap：设置根组件
export：导出组件或指令
！！模块之间的访问
模块注入的服务作用是全局的，不用导入导出
- 模块分类
1.根模块作为应用的启动入口
2.特性模块，支持懒加载、延后加载，减少首屏加载的时间
3.共享模块
4.核心模块，只导入根模块、共享模块
总结：
模块：组件、指令、服务
组件：模板（用户操作、视图展示）、元数据、组件类
模板<=>组件类进行 数据绑定