《angular入门实战》由会员分享，可在线阅读，更多相关《angular入门实战（96页珍藏版）》请在金锄头文库上搜索。
1、Angular入门与实战,第一章：课程简介,Angular 1.5,Angular 4.0,课程内容,案例介绍,课程内容介绍,第一章：课程简介,angularJS 和 angular 的架构介绍和对比,第二章 开始Angular开发,编写并运行第一个angular应用,搭建angular开发环境,第一章：课程简介,开发在线竞拍程序的第一个版本,第三章 路由和导航,在路由时传递参数,路由基础知识,第一章：课程简介,路由高级特性,第四章 依赖注入,Angular对依赖注入的实现方式,依赖注入模式介绍,第一章：课程简介,Angular的提供器和注入器,第五章,响应式编程,数据绑定,第一章：课程简介,
2、管道,第六章 组件间通讯,中间人模式,输入输出属性,第一章：课程简介,组件生命周期,第七章 表单处理,响应式表单,模板式表单,第一章：课程简介,表单校验,第八章 与服务器通讯,使用Http协议与服务器通讯,创建web服务器,第一章：课程简介,使用WebSocket协议与服务器通讯,第十章 课程总结,多环境支撑,构建和部署,第一章：课程简介,第九章 构建和部署,第一章：课程简介,基础知识,知识点,知识点,知识点,小案例,小案例,小案例,实战,功能,功能,功能,大案例,代码,代码,代码,不需要AngularJS的知识,前端基础知识:html,css,js,第一章：课程简介,前置知识,最好了解Typ
3、eScript语法,比较完善的前端MVC框架,模板功能强大丰富,第一章：课程简介,AngularJS 的优点,引入了Java的一些概念,路由,性能,第一章：课程简介,AngularJS 的一些问题,作用域,表单验证,Javascript语言,学习成本,服务器端渲染,全新的命令行工具 AngularCLI,第一章：课程简介,Angular新特性,移动和桌面兼容,第一章：课程简介,AngularJS 架构,第一章：课程简介,Angular 架构,FLUX架构,速度,第一章：课程简介,与React对比,服务器渲染,灵活,简单,第一章：课程简介,与vue对比,性能,只关注web,个人主导,第一章：课程
4、简介,与vue对比,服务器渲染,第一章：课程简介,继承,吸收,学习内容,搭建Angular开发环境,Angular程序架构,第二章：开始学习Angular,开发在线竞拍程序Auction的第一个版本,Angular 程序架构,组件：是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的Html,服务，用来封装可重用的业务逻辑,指令：允许你向Html元素添加自定义行为,模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元,搭建 Angular 开发环境,使用Angular CLI 创建并运行 Angular 项目,安装Nodejs，Angular CLI
5、，WebStorm,分析Angular项目的目录结构及Angular CLI生成的基础代码,Component,装饰器 Component(),模板 Template,启动angular应用,启动时加载了哪些脚本？,启动时加载了哪个页面？,这些脚本做了什么事？,开发Auction的第一个版本,开发主页面,整体思路讲解,开发各个组件,学习内容,子路由、保护路由和辅助路由,了解路由的基础知识,第三章：使用Angular Route导航,在在线拍卖(Auction)项目中添加路由,在路由时传递数据,路由基础知识,路由相关对象介绍,地址策略:HashLocationStrategy 和PathLoca
6、tionStrategy,第三章：使用Angular Route导航,模块,第三章：使用Angular Route导航,模板,控制器,RouterOutlet,RouterLink,Router,ActivatedRoute,在路由时传递数据,在路由路径中传递数据,在查询参数中传递数据,第三章：使用Angular Route导航,在路由配置中传递数据,/product?id=1&name=2 = ActivatedRoute.queryParamsid,path:/product/:id = /product/1 = ActivatedRoute.paramsid,path:/product,
7、 component: ProductComponent, data:isProd:true = ActivatedRoute.data0isProd,获取路由参数的方式,参数订阅,参数快照,第三章：使用Angular Route导航,ActivatedRoute.snapshot.xxx,ActivatedRoute.xxx.subscribe(callback),重定向路由,第三章：使用Angular Route导航,在用户访问一个特定的地址时，将其重定向到另一个指定的地址。, = = Route导航,子路由用来形成RouterOutlet的父子关系,RouterOutlet,Rout
8、erOutlet,组件B /aaa/bbb,子路由,第三章：使用Angular Route导航,path: home, component: HomeComponent,path: home, component: HomeComponent, children: path: , component: XxxComponent, , path: /yyycomponent: YyyComponent ,辅助路由,第三章：使用Angular Route导航,辅助路由用来形成RouterOutlet的兄弟关系,辅助路由,第三章：使用Angular Route导航,path: xxx, compon
9、ent: XxxComponent, outlet:“aux“ path: yyy, component: YyyComponent, outlet:“aux“,Xxx Yyy,辅助路由案例整体思路,第三章：使用Angular Route导航,在app组件的模板上再定义一个插座来显示聊天面板。,单独开发一个聊天室组件，只显示在新定义的插座上。,通过路由参数控制新插座是否显示聊天面板,特殊路由,保护路由：确保只在满足某些条件时才激活目标路由/离开当前路由,子路由：子路由可以继承父路由的配置,第三章：使用Angular Route导航,辅助路由：同时使用多个RouterOutlet,路由守卫,一个
10、由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。,只有当用户已经登录并拥有某些权限时才能进入某些路由。,第三章：使用Angular Route导航,当用户未执行保存操作而试图离开当前导航时提醒用户。,路由守卫,CanDeactivate: 处理从当前路由离开的情况。,CanActivate: 处理导航到某路由的情况。,第三章：使用Angular Route导航,Resolve: 在路由激活之前获取路由数据。,路由守卫,第三章：使用Angular Route导航,path: home, component: HomeComponent
11、, canActivate: XxxGuard, YyyGuard, canDeactivate: AaaGuard, BbbGuard, resolve: user:UserResolveGuard , ,this.activatedRoute.data.subscribe(data : user: User) = console.log(user.name); ),路由实战思路,第三章：使用Angular Route导航,1. 创建商品详情组件，显示商品的图片和标题,3. 配置路由，在导航到商品详情组件时传递商品的标题参数。,2. 重构代码，把轮播图组件和商品列表组件封装进新的Home组件
12、。,4. 修改App组件，根据路由显示Home组件或商品详情组件。,5.修改商品列表组件，给商品标题添加带routeLink指令的链接，导航到商品详情路由。,学习内容,介绍Angular的依赖注入实现:注入器和提供器,什么是依赖注入模式及使用依赖注入的好处,第四章：依赖注入,注入器的层级关系,声明提供器,第四章：依赖注入,provide: AppConfig, useValue: isDev: false, provide: ProductService, useFactory: (logger:LoggerService, appConfig) = if(appConfig.isDev) r
13、eturn new ProductService(logger); else return new AnotherProductService(logger); , deps:LoggerService, AppConfig ,provide: LoggerService, useClass: LoggerService ,依赖注入模式要解决的问题,依赖注入：Dependency Injection 简称DI,控制反转：Inversion of Control 简称IOC,使用依赖注入模式的好处,使用依赖注入模式的好处,LoginComponent,MockLoginService,RealL
14、oginService,注入,注入,学习内容,提供器,注入器,第四章：依赖注入,constructor(private productService: ProductService) ,providers:ProductService,providers:provide:ProductService, useClass: ProductService,providers:provide:ProductService, useFactory: () = ,providers:provide:ProductService, useClass: AnotherProductService,应用级注入
15、器,注入器的层级关系,主组件注入器,子组件注入器,指令注入器,重构Auction,修改路由配置。在从商品列表进入商品详情时不再传递商品名称，改为传递商品ID.,编写ProductService. 包含3个方法：getProducts(), getProduct(id)以及 getCommentsForProduct(id);,第四章：依赖注入,注入ProductService并使用其服务。,第五章：数据绑定、响应式编程和管道,学习内容,响应式编程,数据绑定,管道,数据绑定,数据绑定,事件绑定,事件的名称,小括号表示这是 一个事件绑定,组件方 法名称,浏览器事 件对象,当事件发生时 执行的表达式,数据绑定,属性绑定,数据绑定,HTML属性和DOM属性的关系,有些 HTML 属性 没有对应的 DOM 属性，如colspan。,少量 HTML 属性 和 DOM 属性 之间有着 1:1 的映射，如id。,有些 DOM 属性 没有对应的 HTML 属性，如textContent。,数据绑定,HTML属性和DOM属性的关系,HTML 属性的值指定了初始值；DOM 属性的值表示当前值。 DOM 属性 的值可以改变；HTML 属性的值不能改变。,就算名字相同，HTML 属性 和 DOM 属性
