一、课程简介:
Angular 5应用程序非常快,更轻且易于使用。从材料设计能力来构建美观和直观的用户界面。一个新的 HttpClientModule被引入,这是一个完整的重写现有的 HttpModule,支持TypeScript 2.4;同样地Angular 5创建了一个示例应用程序,以获得更强安全性。此内容将 Angular JWT身份验证示例 使用JWT令牌保护Angular 5应用程序,完成一个端到端的应用程序来构建Angular 5
课程收益
主要以案例结合语法为主,工程化工具为辅,包含多个使用场景,版本以 5 为主,以及升级意见
课程形式
课程采用循序渐进的方式开展,不仅让大家对 Angular 5的技巧及常用场景具有更深入的理解和认识,并带领大家一起探索Angular 5在滴滴的实践,及过程中踩过的“坑”。
系统梳理+案例分享+研讨互动,三位一体的为大家开展实战培训!
受众人群
有一定 js 基础或者对前端新技术感兴趣:
技术主管、架构师、各个阶段的前端开发、喜欢前端的后端开发、全栈开发
二、课程周期:
2 天
三、课程大纲:
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 版本维护
Ø 如何编写一个自己团队的组件库