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.核心模块,只导入根模块、共享模块
总结:
模块:组件、指令、服务
组件:模板(用户操作、视图展示)、元数据、组件类
模板<=>组件类进行 数据绑定