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

系统梳理+案例分享+研讨互动,三位一体的为大家开展实战培训!

分享提纲

IDE 推荐

Sublime

Ø ts 语法高亮 TypeScript Syntax

Ø ts 编译 TypeScript

WebStorm

Ø 安装 angular 插件

VSCode

Ø 安装插件

调试工具 - Chrome 的 Angular 扩展介绍
CLI 脚手架

Ø @angular/cli 实战基础和使用细节

angular.json

常用命令配置参数

ng new

ng generate

ng serve

细节配置:端口、打开浏览器等

(注意版本) ng add 的使用细节

(下面工程化会细讲)ng build

Ø 内部设计解析

devServer 配置和服务相关

lib/config/schema.json 解析

Ø @angular-devkit/schematics-cli 使用细节

schematics 介绍和使用

自定义 ng generate 细节

Ø npm script 应用和细节说明

TypeScript 基础入门和回顾总结

安装 – 推荐 npm 方式

tsc 编译器使用

装饰器

模块

import / export

字符串

多行

模板

参数

参数类型

默认值

可选

class

访问修饰符

接口

注解

implements

配置文件 tsconfig.json

tslint

描述文件 d.ts

declare

变量

函数

class

Typings 工具

预编译 css 基础

less 推荐

@import

变量

mixin

RxJS – 状态管理

概念介绍

Observable

Of

与其他数据流管理的区别

升级版本需要做什么

Ø 从 5 版本升级到6等

Ø 6 新增特性

angular 基础

启动

platformBrowserDynamic

PlatformRef 对象

bootstrapModule 细节

模块加载器 systemjs

@angular/core

NgModule

Component

ElementRef

Injectable 依赖注入

生命周期

模板

数据绑定

指令

Service

元数据

组件基础

@Component

子父组件

案例实战:编写一个组件

@angular/commonLocation 的案例介绍
表单 @angular/forms基础覆盖和案例实战

表单值获取和设置

ngSubmit 事件

置灰、必填等常用操作

案例实战

单页应用 @angular/router 基础覆盖和案例实战

路由定义 app-routing.module.ts

router-outlet /  routerLink

动态路由

参数获取·

route.snapshot

params / paramMap

queryParams / queryParamMap

常用路由方法

预加载

useHash

与服务端通讯 @angular/common/http基础覆盖和案例实战

mock api

get / post 使用案例

headers 设置

pipe / catchError

封装一个全局 request

结合 rxjs

zone.js
工程化

分环境配置

ng build 细节

source-map-explorer

webpack 内部介绍

打包目录文件全解析

polyfills.js

styles.js

vendor.js

如何内联部分文件

组件库 (重点关注 PC 场景)

Ø angular/materia

Ø ng-zorro-antd 实战解析

多个常用组件解析

打包构建

版本维护

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


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