angular入门实战

Angular入门与实战第一章：课程简介Angular1.5Angular4.0课程内容案例介绍课程内容介绍第一章：课程简介angularJS和angular的架构介绍和对比第二章开始Angular开发编写并运行第一个angular应用搭建angular开发环境第一章：课程简介开发在线竞拍程序的第一个版本第三章路由和导航在路由时传递参数路由基础知识第一章：课程简介路由高级特性第四章依赖注入Angular对依赖注入的实现方式依赖注入模式介绍第一章：课程简介Angular的提供器和注入器第五章响应式编程数据绑定第一章：课程简介管道第六章组件间通讯中间人模式输入输出属性第一章：课程简介组件生命周期第七章表单处理响应式表单模板式表单第一章：课程简介表单校验第八章与服务器通讯使用Http协议与服务器通讯创建web服务器第一章：课程简介使用WebSocket协议与服务器通讯第十章课程总结多环境支撑构建和部署第一章：课程简介第九章构建和部署第一章：课程简介基础知识知识点知识点知识点小案例小案例小案例实战功能功能功能大案例代码代码代码不需要AngularJS的知识前端基础知识:html,css,js第一章：课程简介前置知识最好了解TypeScript语法比较完善的前端MVC框架模板功能强大丰富第一章：课程简介AngularJS的优点引入了Java的一些概念路由性能第一章：课程简介AngularJS的一些问题作用域表单验证Javascript语言学习成本服务器端渲染全新的命令行工具AngularCLI第一章：课程简介Angular新特性移动和桌面兼容第一章：课程简介AngularJS架构第一章：课程简介Angular架构FLUX架构速度第一章：课程简介与React对比服务器渲染灵活简单第一章：课程简介与vue对比性能只关注web个人主导第一章：课程简介与vue对比服务器渲染第一章：课程简介继承吸收学习内容搭建Angular开发环境Angular程序架构第二章：开始学习Angular开发在线竞拍程序Auction的第一个版本Angular程序架构组件：是Angular应用的基本构建块，你可以把一个组件理解为一段带有业务逻辑和数据的Html服务，用来封装可重用的业务逻辑指令：允许你向Html元素添加自定义行为模块用来将应用中不同的部分组织成一个Angular框架可以理解的单元搭建Angular开发环境使用AngularCLI创建并运行Angular项目安装Nodejs，AngularCLI，WebStorm分析Angular项目的目录结构及AngularCLI生成的基础代码Component输入属性@Inputs()提供器providers生命周期钩子LifecycleHooks可选的可注入对象样式表styles动画Animations输出属性@Outputs可选的输出对象装饰器@Component()模板Template必备元素控制器Controller数据绑定启动angular应用启动时加载了哪些脚本？启动时加载了哪个页面？这些脚本做了什么事？开发Auction的第一个版本开发主页面整体思路讲解开发各个组件导航栏组件轮播图组件商品展示组件页脚组件搜索表单组件星级评价组件App学习内容子路由、保护路由和辅助路由了解路由的基础知识第三章：使用AngularRoute导航在在线拍卖(Auction)项目中添加路由在路由时传递数据路由基础知识路由相关对象介绍地址策略:HashLocationStrategy和PathLocationStrategy名称简介Routes路由配置，保存着哪个URL对应展示哪个组件，以及在哪个RouterOutlet中展示组件。RouterOutlet在Html中标记路由内容呈现位置的占位符指令。Router负责在运行时执行路由的对象，可以通过调用其navigate()和navigateByUrl()方法来导航到一个指定的路由。RouterLink在Html中声明路由导航用的指令。ActivatedRoute当前激活的路由对象，保存着当前路由的信息，如路由地址，路由参数等。第三章：使用AngularRoute导航模块AppComponent组件A组件B第三章：使用AngularRoute导航模板控制器Routespath:/user,component:Apath:/order,component:BRouterOutletRouterLinkRouterActivatedRoute在路由时传递数据在路由路径中传递数据在查询参数中传递数据第三章：使用AngularRoute导航在路由配置中传递数据/product?id=1&name=2=ActivatedRoute.queryParams[id]{path:/product/:id}=/product/1=ActivatedRoute.params[id]{path:/product,component:ProductComponent,data:[{isProd:true}]}=ActivatedRoute.data[0][isProd]获取路由参数的方式参数订阅参数快照第三章：使用AngularRoute导航ActivatedRoute.snapshot.xxxActivatedRoute.xxx.subscribe(callback)重定向路由第三章：使用AngularRoute导航在用户访问一个特定的地址时，将其重定向到另一个指定的地址。==…子路由第三章：使用AngularRoute导航子路由用来形成RouterOutlet的父子关系RouterOutlet组件A/aaadiv…RouterOutlet组件B/aaa/bbb子路由第三章：使用AngularRoute导航{path:'home',component:HomeComponent}{path:'home',component:HomeComponent,children:[{path:'',component:XxxComponent,},{path:‘/yyy’component:YyyComponent}]}AppComponentdiv…辅助路由第三章：使用AngularRoute导航辅助路由用来形成RouterOutlet的兄弟关系RouterOutletRouterOutlet组件A组件B辅助路由第三章：使用AngularRoute导航router-outlet/router-outletrouter-outletname=aux/router-outlet{path:‘xxx',component:XxxComponent,outlet:aux}{path:‘yyy',component:YyyComponent,outlet:aux}a[routerLink]=“[‘/home’,{outlets:{aux:‘xxx'}}]Xxx/aa[routerLink]=“[‘/product’,{outlets:{aux:‘yyy'}}]Yyy/a辅助路由案例整体思路第三章：使用AngularRoute导航在app组件的模板上再定义一个插座来显示聊天面板。单独开发一个聊天室组件，只显示在新定义的插座上。通过路由参数控制新插座是否显示聊天面板特殊路由保护路由：确保只在满足某些条件时才激活目标路由/离开当前路由子路由：子路由可以继承父路由的配置第三章：使用AngularRoute导航辅助路由：同时使用多个RouterOutlet路由守卫一个由多个表单组件组成的向导，例如注册流程，用户只有在当前路由的组件中填写了满足要求的信息才可以导航到下一个路由。只有当用户已经登录并拥有某些权限时才能进入某些路由。第三章：使用AngularRoute导航当用户未执行保存操作而试图离开当前导航时提醒用户。路由守卫CanDeactivate:处理从当前路由离开的情况。CanActivate:处理导航到某路由的情况。第三章：使用AngularRoute导航Resolve:在路由激活之前获取路由数据。路由守卫第三章：使用AngularRoute导航{path:'home',component:HomeComponent,canActivate:[XxxGuard,YyyGuard],canDeactivate:[AaaGuard,BbbGuard],resolve:{user:UserResolveGuard},}this.activatedRoute.data.subscribe((data:{user:User})={console.log(user.name);})路由实战思路第三章：使用AngularRoute导航1.创建商品详情组件，显示商品的图片和标题3.配置路由，在导航到商品详情组件时传递商品的标题参数。2.重构代码，把轮播图组件和商品列表组件封装进新的Home组件。4.修改App组件，根据路由显示Home组件或商品详情组件。5.修改商品列表组件，给商品标题添加带routeLink指令的链接，导航到商品详情路由。学习内容介绍Angular的依赖注入实现:注入器和提供器什么是依赖注入模式及使用依赖注入的好处第四章：依赖注入注入器的层级关系声明提供器第四章：依赖注入{provide:AppConfig,useValue:{isDev:false}}{provide:ProductService,useFactory:(logger:LoggerService,appConfig)={if(appConfig.isDev){returnnewProductService(logger);}else{returnnewAnotherProductService(logger);}},deps:[LoggerService,AppConfig]}{provide:LoggerService,useClass:LoggerService}依赖注入模式要解决的问题依赖注入：DependencyInjection简称DI控制反转：InversionofControl简称IOC使用依赖注入模式的好处使用依赖注入模式的好处LoginComponentMockLoginServiceRealLoginService注入注入学习内容提供器注入器第四章：依赖注入constructor(privateproductService:ProductService){…}providers:[ProductService]providers:[{provide:ProductService,useClass:ProductService}]providers:[{provide:ProductService,useFactory:()={…}}]providers:[{provide:ProductService,useClass:AnotherProductService}]应用级注入器注入器的层级关系主组件注入器子组件注入器指令注入器重构Auction修改路由配置。在从商品列表进入商品详情时不再传递商品名称，改为传递商品ID.编写ProductService.包含3个方法：getProducts(),getProduct(id)以及getCommentsForProduct(id);第四章：依赖注入注入ProductService并使用其服务。第五章：数据绑定、响应式编程和管道学习内容响应式编程数据绑定管道数据绑定数据绑定事件绑定事件的名称小括号表示这是一个事件绑定组件方法名称浏览器事件对象当事件发生时执行的表达式数据绑定属性绑定数据绑定HTML属性和DOM属性的关系有些HTML属性没有对应的DOM属性，如colspan。少量HTM