Angular 5 实战培训
steven 查看讲师
百林哲咨询(北京)有限公司专家团队成员
曾负责滴滴出行公共前端团队负责人,带领团队完成了国内第一本Vue.js的书籍《Vue.js权威指南》,组织编写过Vue.js的公司级组件库以及构建等解决方案。组织参与了一些公司级的组件库开发和复杂业务模块的设计。
浏览:4911次
详情 DETAILS

简介

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/commonn 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 版本维护

Ø 如何编写一个自己团队的组件库


企业服务热线:400-106-2080
电话:18519192882
投诉建议邮箱:venus@bailinzhe.com
合作邮箱:service@bailinzhe.com
总部地址:
北京市-丰台区-汽车博物馆东路6号3号楼1单元902-B73(园区)
全国客户服务中心:
天津市-南开区-桂苑路15号鑫茂集团鑫茂军民园1号楼A座802-803
公众号
百林哲咨询(北京)有限公司 京ICP备2022035414号-1