简介
Angular 5应用程序非常快,更轻且易于使用。从材料设计能力来构建美观和直观的用户界面。一个新的 HttpClientModule被引入,这是一个完整的重写现有的 HttpModule,支持TypeScript 2.4;同样地Angular 5创建了一个示例应用程序,以获得更强安全性。此内容将 Angular JWT身份验证示例 使用JWT令牌保护Angular 5应用程序,完成一个端到端的应用程序来构建Angular 5
目标
主要以案例结合语法为主,工程化工具为辅,包含多个使用场景,版本以 5 为主,以及升级意见
课程时长
2天(12H)
受众人群
有一定js基础或者对前端新技术感兴趣:
技术主管、架构师、各个阶段的前端开发、喜欢前端的后端开发、全栈开发
课程形式
课程采用循序渐进的方式开展,不仅让大家对 Angular 5的技巧及常用场景具有更深入的理解和认识,并带领大家一起探索Angular 5在滴滴的实践,及过程中踩过的“坑”。
系统梳理+案例分享+研讨互动,三位一体的为大家开展实战培训!
分享提纲
l IDE 推荐 | n Sublime Ø ts 语法高亮 TypeScript Syntax Ø ts 编译 TypeScript n WebStorm Ø 安装 angular 插件 n VSCode Ø 安装插件 |
l 调试工具 - Chrome 的 Angular 扩展介绍 | |
l CLI 脚手架 | Ø @angular/cli 实战基础和使用细节 n angular.json n 常用命令配置参数 n ng new n ng generate n ng serve u 细节配置:端口、打开浏览器等 n (注意版本) ng add 的使用细节 n (下面工程化会细讲)ng build Ø 内部设计解析 n devServer 配置和服务相关 u lib/config/schema.json 解析 Ø @angular-devkit/schematics-cli 使用细节 n schematics 介绍和使用 n 自定义 ng generate 细节 Ø npm script 应用和细节说明 |
l TypeScript 基础入门和回顾总结 | n 安装 – 推荐 npm 方式 n tsc 编译器使用 n 装饰器 n 模块 u import / export n 字符串 u 多行 u 模板 n 参数 u 参数类型 u 默认值 u 可选 n class u 访问修饰符 n 接口 n 注解 n implements n 配置文件 tsconfig.json n tslint n 描述文件 d.ts u declare u 变量 u 函数 u class u Typings 工具 |
l 预编译 css 基础 | n less 推荐 u @import u 变量 u mixin |
l RxJS – 状态管理 | n 概念介绍 n Observable n Of n 与其他数据流管理的区别 |
l 升级版本需要做什么 | Ø 从 5 版本升级到6等 Ø 6 新增特性 |
l angular 基础 | n 启动 u platformBrowserDynamic u PlatformRef 对象 u bootstrapModule 细节 n 模块加载器 systemjs n @angular/core u NgModule u Component u ElementRef u Injectable 依赖注入 n 生命周期 n 模板 u 数据绑定 n 指令 n Service n 元数据 |
l 组件基础 | n @Component n 子父组件 n 案例实战:编写一个组件 |
l @angular/common | n Location 的案例介绍 |
l 表单 @angular/forms基础覆盖和案例实战 | n 表单值获取和设置 n ngSubmit 事件 n 置灰、必填等常用操作 n 案例实战 |
l 单页应用 @angular/router 基础覆盖和案例实战 | n 路由定义 app-routing.module.ts n router-outlet / routerLink n 动态路由 n 参数获取· u route.snapshot l params / paramMap l queryParams / queryParamMap n 常用路由方法 n 预加载 n useHash |
l 与服务端通讯 @angular/common/http基础覆盖和案例实战 | n mock api n get / post 使用案例 n headers 设置 n pipe / catchError n 封装一个全局 request n 结合 rxjs |
l zone.js | |
l 工程化 | n 分环境配置 n ng build 细节 n source-map-explorer n webpack 内部介绍 n 打包目录文件全解析 n polyfills.js n styles.js n vendor.js n 如何内联部分文件 |
l 组件库 (重点关注 PC 场景) | Ø angular/materia Ø ng-zorro-antd 实战解析 n 多个常用组件解析 n 打包构建 n 版本维护 Ø 如何编写一个自己团队的组件库 |
steven
百林哲咨询(北京)有限公司专家团队成员
steven
百林哲咨询(北京)有限公司专家团队成员
steven
百林哲咨询(北京)有限公司专家团队成员
steven
百林哲咨询(北京)有限公司专家团队成员
steven
百林哲咨询(北京)有限公司专家团队成员
steven
百林哲咨询(北京)有限公司专家团队成员