2024年-Angular学习文档学习课件

Angular2.0by-支昊12组件Component元数据Metadata模板Templates数据绑定Databinding服务Services指令Directives依赖注入DependencyInjection模块Module25/5/2024Angular2.0指令服务依赖注入模块开发环境实例代码TypeScript组件Angular2核心概念路由http请求32组件要素组件组件独立的Javascript逻辑HTML代码CSS样式45/5/2024组件通讯机制父组件子组件子组件输入接口输出接口55/5/2024生命周期钩子ConstructorOnChangesOnInitOnChangesOnDestroy构造器初始化第一次触发数据变化组件初始化运行期间触发数据变化组件销毁前65/5/2024组件示例组件类装饰器元数据75/5/2024元数据与装饰器元数据装饰器@Component普通类组件装饰器：赋予一个类更丰富的信息（元数据）85/5/2024模板外部模板template:‘<p>{{title}}</p>’95/5/2024数据绑定属性绑定[value]事件绑定(keyup)双向绑定[(ngModel)]105/5/2024组件渲染<app-hello></app-hello>115/5/2024数据流向父组件{组件类}<模板>属性绑定事件绑定子组件{组件类}<模板>属性绑定事件绑定事件绑定属性绑定@Output@Input125/5/2024指令组件指令继承自身带有模板的指令属性指令结构指令改变组件模板的外观或行为，如样式。改变组件模板的DOM结构，如ngIf可以来插入或者移出DOM节点135/5/2024服务服务是实现专一目的的逻辑单元，如日志服务145/5/2024依赖注入组件引入外部构建的一种机制依赖注入组件LoggerService实例化注入155/5/2024分层注入根组件孙组件1孙组件2子组件2子组件1注入LoggerService(warn级别)重新注入LoggerService(debug级别)165/5/2024模块框架代码以模块形式组织（文件模块）功能单元以模块形式组织（应用模块）175/5/2024文件模块Angular2@angular/core@angular/common@angular/forms@angular/http…核心模块通用模块表单模块网络模块更多Import{http}from“@angular/http”//@Component装饰器Import{Component}from“@angular/core”//@Directive装饰器Import{Directive}from“@angular/core”Import{ElementRef,Renderer}from“@angular/core”185/5/2024应用模块组件指令服务指令服务组件指令组件模块A模块C模块Bdeclarations:包装组件和指令等imports:导入其他模块providers:依赖注入bootstrap:设置根组件exports:导出组件和指令等195/5/2024应用模块根模块启动特性模块特性模块支持懒加载核心模块共享模块205/5/2024路由路由是实现导航的一种方式，一个url对应一个页面，在angular2中是一个组件。默认进入没有与任何一个path匹配到懒加载215/5/2024网络请求angular2的http服务是用于从后台程序获取或更新数据的一种机制，通常情况我们需要将与后台交换数据的模块做出angular服务，利用http获取更新后台数据，angular使用http进行后台调用采用的是ajax方式，跨域问题需要单独处理。225/5/2024TypeScriptTypeScriptES6ES5TypeScript是微软开发的编程语言· JavaScript的超集，兼容JavaScript· 运行前需预编译生成JavaScript代码· 加入类型判断，编译时进行类型检查· 文件扩展名为.ts235/5/2024TypeScriptJavaScriptType245/5/2024开发环境Nodejs推荐使用6.0以上版本编辑器IDEA