Angular2.0学习文档PPT学习课件

1、Angular2.0,by-支昊,1,2,组件 Component,元数据 Metadata,模板 Templates,数据绑定 Data binding,服务 Services,指令 Directives,依赖注入 Dependency Injection,模块 Module,2,7/5/2020,Angular2.0,指 令,服务 依赖注入,模 块,开发环境,实例代码,TypeScript,组 件,Angular2 核心概念,路 由,http请求,3,2,组件要素,组件,组件,独立的Javascript逻辑,HTML代码,CSS样式,4,7/5/2020,组件通讯机制,父组件,子组件,子组

2、件,输入接口,输出接口,5,7/5/2020,生命周期钩子,Constructor,OnChanges,OnInit,OnChanges,OnDestroy,构造器初始化,第一次触发数据变化,组件初始化,运行期间触发数据变化,组件销毁前,6,7/5/2020,组件示例,组件类,装饰器,元数据,7,7/5/2020,元数据与装饰器,元数据,装饰器,Component,普通类,组件,装饰器：赋予一个类更丰富的信息（元数据）,8,7/5/2020,模板,外部模板,template: title,9,7/5/2020,数据绑定,属性绑定 value,事件绑定 (keyup),双向绑定 (ngModel

3、),10,7/5/2020,组件渲染,11,7/5/2020,数据流向,事件 绑定,属性 绑定,Output,Input,12,7/5/2020,指令,继承,自身带有模板的指令,改变组件模板的外观或行为， 如样式。,改变组件模板的DOM结构，如 ngIf可以来插入或者移出DOM节点,13,7/5/2020,服务,服务是实现专一目的的逻辑单元，如日志服务,14,7/5/2020,依赖注入,组件引入外部构建的一种机制,依赖注入,组件,LoggerService,实例化,注入,15,7/5/2020,分层注入,根组件,孙组件1,孙组件2,子组件2,子组件1,16,7/5/2020,模块,框架代码以模

4、块形式组织（文件模块）,功能单元以模块形式组织（应用模块）,17,7/5/2020,文件模块,Import http from “angular/http”,/Component装饰器 Import Component from “angular/core”,/Directive装饰器 Import Directive from “angular/core”,Import ElementRef, Renderer from “angular/core”,18,7/5/2020,应用模块,组件,指令,服务,指令,服务,组件,指令,组件,模块A,模块C,模块B,declarations:包装组件和

5、指令等,imports:导入其他模块,providers:依赖注入,bootstrap:设置根组件,exports:导出组件和指令等,19,7/5/2020,应用模块,根模块,特性模块,特性模块,支持懒加载,20,7/5/2020,路由,路由是实现导航的一种方式， 一个url对应一个页面，在angular2中是一个组件。,21,7/5/2020,网络请求,angular2的http服务是用于从后台程序获取或更新数据的一种机制， 通常情况我们需要将与后台交换数据的模块做出angular服务， 利用http获取更新后台数据， angular使用http进行后台调用采用的是ajax方式， 跨域问题需要单独处理。,22,7/5/2020,TypeScript,TypeScript 是微软开发的编程语言,JavaScript的超集，兼容JavaScript,运行前需预编译生成JavaScript代码,加入类型判断，编译时进行类型检查,文件扩展名为.ts,23,7/5/2020,TypeScript,JavaScript,Type,24,7/5/2020,开发环境,Nodejs,推荐使用6.0以上版本,编辑器,IDEA,25,7/5/2020,实例代码,