第1章 课程介绍 试看 5 节 | 57分钟

本章主要介绍课程的知识大纲，学习前提，讲授方式及预期收获，讲解如何搭建 Angular 的开发环境和所需的开发工具。

收起列表

• 视频： 1-1 课程导学 (13:38) 试看
• 视频： 1-2 2022加餐，学前必读 (11:54)
• 视频： 1-3 框架对比与课前辅导 (08:59)
• 视频： 1-4 环境配置 (08:37)
• 视频： 1-5 开发工具配置 (13:06)

第2章 Angular初探 8 节 | 154分钟

本章将快速讲解部分 Angular 基础语法，通过可滚动的顶部 Tab 功能的编写，了解前端组件化的概念及优势。

收起列表

• 视频： 2-1 CLI 工程结构 (23:55)
• 视频： 2-2 工程源码文件结构 (18:43)
• 视频： 2-3 【初识组件】顶部 TabBar (20:16)
• 视频： 2-4 【接口Interface Flex布局】让顶部导航滚动 (20:00)
• 视频： 2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态 (13:31)
• 视频： 2-6 【组件封装】分离封装第一个组件 (15:10)
• 视频： 2-7 【ngIf指令 组件的输入输出】组件的输入和输出属性 (24:51)
• 视频： 2-8 样式绑定的几种方式 (17:04)

第3章 基础知识 8 节 | 128分钟

本章精讲 Angular 中的基础知识，包括组件的生命周期、如何在组件类中引用模版、如何引用模版的多个元素、单向绑定双和向绑定、模块的概念、模块的组织等内容，并利用学到的知识打造一个轮播图组件。

收起列表

• 视频： 3-1 组件生命周期（1） (15:55)
• 视频： 3-2 组件生命周期（2） (13:46)
• 视频： 3-3 在组件类中引用模版 (19:36)
• 视频： 3-4 在模板中引用多个元素 (15:56)
• 视频： 3-5 轮播图组件 (17:16)
• 视频： 3-6 组件的双向绑定 (16:25)
• 视频： 3-7 模块的概念 (12:43)
• 视频： 3-8 模块的划分 (15:25)

第4章 进阶知识 17 节 | 245分钟

本章深入讲解 Angular 中的进阶知识，包括注解的本质、指令的概念、指令的事件和样式绑定、组件嵌套和投影组件、路由的概念、路由 URL 和参数传递、管道的概念、依赖注入、脏值检测等内容，每个知识点都会有对应的小实战练习以巩固理解。本章实现横向可滚动的网格组件。...

收起列表

• 视频： 4-1 什么是注解 (15:24)
• 视频： 4-2 指令的概念（1） (13:28)
• 视频： 4-3 指令的概念（2） (14:40)
• 视频： 4-4 组件的事件绑定和样式绑定 (12:14)
• 视频： 4-5 组件嵌套和投影组件（1） (18:12)
• 视频： 4-6 组件嵌套和投影组件（2） (17:04)
• 视频： 4-7 路由概念 (12:56)
• 视频： 4-8 路由实战 (08:25)
• 视频： 4-9 路由 URL 和参数（1） (07:14)
• 视频： 4-10 路由 URL 和参数（2） (16:03)
• 视频： 4-11 路由 URL 和参数 下（3） (11:35)
• 视频： 4-12 管道讲解 (21:17)
• 视频： 4-13 依赖注入（1） (21:52)
• 视频： 4-14 依赖注入（2） (14:18)
• 视频： 4-15 脏值检测（1） (13:15)
• 视频： 4-16 脏值检测（2） (11:11)
• 视频： 4-17 脏值检测（3） (15:39)

第5章 HTTP联调 8 节 | 121分钟

本章从 Http 的概念讲起，覆盖 Http Request/Response 消息结构、Http 调试工具 Postman 和 RestCient 的使用、Rest API 的概念、Angular 中 HttpClient 的使用、如何使用拦截器简化通用性的请求或响应处理、rxjs 的概念和实战，并使用 rxjs 实现一个倒计时组件。...

收起列表

• 视频： 5-1 HTTP 概览 (14:49)
• 视频： 5-2 Postman 和 Rest Client 调试 HTTP (16:16)
• 视频： 5-3 Rest API (08:56)
• 视频： 5-4 HttpClient 修改 (21:37)
• 视频： 5-5 Http 拦截器 HttpInterceptor (11:37)
• 视频： 5-6 rxjs 初步了解 (14:23)
• 视频： 5-7 操作符和 Async 管道 (12:53)
• 视频： 5-8 使用 rxjs 打造倒计时组件 (20:15)

第6章 实战首页模块/分类模块 8 节 | 115分钟

本章正式进入项目实战开发，将带大家完整的实现项目中的首页模块和分类模块，涵盖的功能点包含使用 flex layout 进行固定头部和底部的风格、实现产品卡片组件、产品列表组件、产品瓷砖卡片组件、垂直网格组件等

收起列表

• 视频： 6-1 创建底部 TabBar（1） (12:29)
• 视频： 6-2 创建底部 TabBar（2） (12:56)
• 视频： 6-3 底部 TabBar 切换路由 (14:30)
• 视频： 6-4 使用 rxjs 高阶操作符添加广告位 (14:31)
• 视频： 6-5 创建垂直网格组件 (17:20)
• 视频： 6-6 创建产品卡片组件（1） (11:59)
• 视频： 6-7 创建产品组件卡片（2） (19:59)
• 视频： 6-8 实战产品瓷砖组件 (10:59)

第7章 实战产品模块/个人模块 13 节 | 214分钟

本章和大家一起开发产品模块和个人模块，涵盖的功能点包含产品详情组件、拼单列表组件、价格区块组件、对话框的原理和实现、产品规格组件、确认订单组件实战和个人模块实战等。本章还会给大家讲解 Angular 表单基础知识。...

收起列表

• 视频： 7-1 实现后退按钮组件 (14:18)
• 视频： 7-2 实现商品画廊（1） (19:42)
• 视频： 7-3 实现商品画廊（2） (14:51)
• 视频： 7-4 实战拼单列表 (21:39)
• 视频： 7-5 对话框实现的ng8和ng14区别 (01:00)
• 视频： 7-6 实战对话框（1） (14:08)
• 视频： 7-7 实战对话框（2） (19:23)
• 视频： 7-8 实战对话框（3） (20:22)
• 视频： 7-9 实战拼单选择产品对话框（1） (16:38)
• 视频： 7-10 实战拼单产品选择对话框（2） (20:53)
• 视频： 7-11 实战确认订单（1） (15:13)
• 视频： 7-12 实战确认订单（2） (17:29)
• 视频： 7-13 实战个人信息 (17:21)

第8章 发布上线 6 节 | 63分钟

本章将以实际工作中的经验给大家讲解不同的环境、环境的管理、软件的打包、部署到 nginx 服务器、使用懒加载和 ivy 优化性能和速度。最后会对课程做一个总结以及给大家进一步学习的一些建议。

收起列表

• 视频： 8-1 发布上线 - 环境，重定向 (20:22)
• 视频： 8-2 发布上线 - gzip和跨域 (12:06)
• 视频： 8-3 路由懒加载的改造 (15:52)
• 视频： 8-4 ivy渲染的 ng8 和 ng14 区别 (00:54)
• 视频： 8-5 ivy 渲染引擎 (07:35)
• 视频： 8-6 课程总结 (05:56)

第9章 使用 CLI 升级 Angular和 Typescript 7 节 | 99分钟

Angular 团队提供 CLI 使得升级过程更顺滑，本章和同学们一起从 8.0 升级到 14.0。此外，我们还详细讨论了在 TypeScript 配置升级后如何进行代码的调整。

收起列表

• 视频： 9-1 Angular升级工具和升级实战（上） (15:33)
• 视频： 9-2 Angular升级工具和升级实战（中） (11:58)
• 视频： 9-3 Angular升级工具和升级实战（下） (09:07)
• 视频： 9-4 TypeScript 配置升级及实战（1） (15:17)
• 视频： 9-5 TypeScript 配置升级及实战（2） (15:33)
• 视频： 9-6 TypeScript 配置升级及实战（3） (15:09)
• 视频： 9-7 TypeScript 配置升级及实战（4） (15:54)

第10章 表单的处理机制和实战 11 节 | 170分钟

Angular 的亮点之一就是内建了表单的处理和验证，而 Angular 14 的改进之一就是表单的严格类型化，我们在本章一起来学习如何处理表单的数据和其验证

收起列表

• 视频： 10-1 Angular的两种表单介绍 (21:42)
• 视频： 10-2 表单验证器入门 (19:11)
• 视频： 10-3 自定义表单验证器 (19:55)
• 视频： 10-4 表单嵌套和日期验证（1） (13:59)
• 视频： 10-5 表单嵌套和日期验证（2） (09:30)
• 视频： 10-6 表单数组 (16:19)
• 视频： 10-7 自定义表单控件（1） (15:11)
• 视频： 10-8 自定义表单控件（2） (08:34)
• 视频： 10-9 为自定义表单控件增加验证 (08:48)
• 视频： 10-10 使用响应式表单改造表单控件 (22:21)
• 视频： 10-11 多个表单项的验证和表单错误处理 (14:08)

第11章 rxjs 异常处理和 ngrx 状态管理 5 节 | 112分钟

本章属于进阶型内容，适用于学有余力的同学。对于 rxjs 的异常处理，本章给出几个常见的场景和处理方式。同时介绍了在 angular 社区非常流行的 ngrx 状态管理机制

收起列表

• 视频： 11-1 RxJS的错误处理 (26:47)
• 视频： 11-2 ngrx概述 (19:18)
• 视频： 11-3 ngrx概述 (10:05)
• 视频： 11-4 Effects的应用 (27:21)
• 视频： 11-5 ngrx feature 分片 (28:22)