这门课解决什么问题，适合谁学

前端技术栈更新快，很多开发者学过 Vue 或 React，但面对大厂核心业务中的 Angular 岗位时会感到无从下手。这门课以拼多多 WebApp 为实战项目，核心解决的是「如何在一个接近真实的商业场景中，从零搭建并维护一个 Angular 大型应用」的问题。它不局限于语法背诵，而是将组件化思想、响应式编程和路由管理串联起来，还原企业级开发的完整流程。

适合有一定 JavaScript 基础，且对 TypeScript 有基本了解的读者。如果你从未接触过 Angular，或者混淆了组件与 HTML 标签的区别，建议先补齐 TS 基础。这门课更偏向「进阶实战」而非「纯入门科普」，适合希望拓展前端技能边界、应对多框架开发需求的在职人员，或者准备冲刺中大型互联网公司前端岗位的转行者。

资料怎么用，建议先看哪几块

资料结构清晰，分为环境配置、基础语法、进阶知识和实战项目四大板块。不建议从第一章试看直接跳到最后的界面还原，那样容易陷入「照着敲但不懂为什么」的困境。

**第一阶段：打牢根基（第2-3章）。** 重点攻克 CLI 工程结构、组件封装、指令（ngFor、ngIf）以及生命周期。特别是「组件的输入输出属性」和「双向绑定」，这是 Angular 区别于其他框架的核心机制，必须理解透彻。这里的轮播图组件是一个很好的练手点，用来验证你对数据驱动视图的理解。

**第二阶段：掌握核心架构（第4章及后续）。** 深入理解模块划分、路由配置、服务（Service）注入以及 HTTP 请求拦截。这部分内容较多，建议结合拼多多项目的具体功能点（如首页数据加载、详情页跳转）来学习路由参数传递和状态管理，避免枯燥的理论记忆。

**第三阶段：项目实战与代码规范。** 利用课程提供的源码结构，尝试独立复现核心页面。重点观察课程是如何组织代码目录、如何拆分公共组件以及如何通过服务共享数据的。这是企业开发中最实用的部分，能帮你建立起规范的工程化思维。

学完能独立做什么

完成本课程的学习与练习后，你将具备独立开发中大型单页应用（SPA）的能力。具体而言，你可以：

1. **搭建项目骨架**：熟练使用 Angular CLI 初始化项目，合理划分模块与组件目录，遵循最佳工程规范。
2. **实现复杂交互**：通过组件通信、路由守卫和响应式表单，完成如购物车、订单列表、用户登录等典型业务逻辑。
3. **对接后端接口**：掌握 HttpClient 的使用，能够处理异步数据请求、错误拦截及全局状态管理。
4. **代码重构与优化**：理解依赖注入原理，能够提取公共逻辑为 Service，提升代码的可维护性和复用性。

这份资料包不仅提供了教学视频，更包含了可运行的项目源码。建议读者在观看视频时同步打开编辑器，手动敲代码而非复制粘贴，并通过修改代码参数来观察效果变化，这样才能真正将知识内化为自己的技能。

课程目录

第1章 课程介绍 试看 5 节 | 57分钟 1-1 课程导学 (13:38).mp4
 1-2 2022加餐，学前必读 (11:54).mp4
 1-3 框架对比与课前辅导 (08:59).mp4
 1-4 环境配置 (08:37).mp4
 1-5 开发工具配置 (13:06).mp4
 第2章 Angular初探 8 节 | 154分钟 2-1 CLI 工程结构 (23:55).mp4
 2-2 工程源码文件结构 (18:43).mp4
 2-3 【初识组件】顶部 TabBar (20:16).mp4
 2-4 【接口Interface Flex布局】让顶部导航滚动 (20:00).mp4
 2-5 【ngFor指令 事件的处理和样式绑定】顶部导航支持选中状态 (13:31).mp4
 2-6 【组件封装】分离封装第一个组件 (15:10).mp4
 2-7 【ngIf指令 组件的输入输出】组件的输入和输出属性 (24:51).mp4
 2-8 样式绑定的几种方式 (17:04).mp4
 第3章 基础知识 8 节 | 128分钟 3-1 组件生命周期（1） (15:55).mp4
 3-2 组件生命周期（2） (13:46).mp4
 3-3 在组件类中引用模版 (19:36).mp4
 3-4 在模板中引用多个元素 (15:56).mp4
 3-5 轮播图组件 (17:16).mp4
 3-6 组件的双向绑定 (16:25).mp4
 3-7 模块的概念 (12:43).mp4
 3-8 模块的划分 (15:25).mp4
 第4章 进阶知识 

17 节 | 245分钟 4-1 什么是注解 (15:24).mp4
 4-2 指令的概念（1） (13:28).mp4
 4-3 指令的概念（2） (14:40).mp4
 4-4 组件的事件绑定和样式绑定 (12:14).mp4
 4-5 组件嵌套和投影组件（1） (18:12).mp4
 4-6 组件嵌套和投影组件（2） (17:04).mp4
 4-7 路由概念 (12:56).mp4
 4-8 路由实战 (08:25).mp4
 4-9 路由 URL 和参数（1） (07:14).mp4
 4-

10 路由 URL 和参数（2） (16:03).mp4
 4-

11 路由 URL 和参数 下（3） (11:35).mp4
 4-

12 管道讲解 (21:17).mp4
 4-13 依赖注入（1） (21:52).mp4
 4-14 依赖注入（2） (14:18).mp4
 4-15 脏值检测（1） (13:15).mp4
 4-16 脏值检测（2） (11:11).mp4
 4-17 脏值检测（3） (15:39).mp4
 第5章 HTTP联调 8 节 | 121分钟 5-1 HTTP 概览 (14:49).mp4
 5-2 Postman 和 Rest Client 调试 HTTP (16:16).mp4
 5-3 Rest API (08:56).mp4
 5-4 HttpClient 修改 (21:37).mp4
 5-5 Http 拦截器 HttpInterceptor (11:37).mp4
 5-6 rxjs 初步了解 (14:23).mp4
 5-7 操作符和 Async 管道 (12:53).mp4
 5-8 使用 rxjs 打造倒计时组件 (20:15).mp4
 第6章 实战首页模块/分类模块 8 节 | 115分钟 6-1 创建底部 TabBar（1） (12:29).mp4
 6-2 创建底部 TabBar（2） (12:56).mp4
 6-3 底部 TabBar 切换路由 (14:30).mp4
 6-4 使用 rxjs 高阶操作符添加广告位 (14:31).mp4
 6-5 创建垂直网格组件 (17:20).mp4
 6-6 创建产品卡片组件（1） (11:59).mp4
 6-7 创建产品组件卡片（2） (19:59).mp4
 6-8 实战产品瓷砖组件 (10:59).mp4
 第7章 实战产品模块/个人模块 

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

13 实战个人信息 (17:21).mp4
 第8章 发布上线 6 节 | 63分钟 8-1 发布上线 - 环境，重定向 (20:22).mp4
 8-2 发布上线 - gzip和跨域 (12:06).mp4
 8-3 路由懒加载的改造 (15:52).mp4
 8-4 ivy渲染的 ng8 和 ng

14 区别 (00:54).mp4
 8-5 ivy 渲染引擎 (07:35).mp4
 8-6 课程总结 (05:56).mp4
 第9章 使用 CLI 升级 Angular和 Typescript 7 节 | 99分钟 9-1 Angular升级工具和升级实战（上） (15:33).mp4
 9-2 Angular升级工具和升级实战（中） (11:58).mp4
 9-3 Angular升级工具和升级实战（下） (09:07).mp4
 9-4 TypeScript 配置升级及实战（1） (15:17).mp4
 9-5 TypeScript 配置升级及实战（2） (15:33).mp4
 9-6 TypeScript 配置升级及实战（3） (15:09).mp4
 9-7 TypeScript 配置升级及实战（4） (15:54).mp4
 第10章 表单的处理机制和实战 

11 节 | 170分钟 10-1 Angular的两种表单介绍 (21:42).mp4
 10-2 表单验证器入门 (19:11).mp4
 10-3 自定义表单验证器 (19:55).mp4
 10-4 表单嵌套和日期验证（1） (13:59).mp4
 10-5 表单嵌套和日期验证（2） (09:30).mp4
 10-6 表单数组 (16:19).mp4
 10-7 自定义表单控件（1） (15:11).mp4
 10-8 自定义表单控件（2） (08:34).mp4
 10-9 为自定义表单控件增加验证 (08:48).mp4
 10-

10 使用响应式表单改造表单控件 (22:21).mp4
 10-

11 多个表单项的验证和表单错误处理 (14:08).mp4
 第11章 rxjs 异常处理和 ngrx 状态管理 5 节 | 112分钟 11-1 RxJS的错误处理 (26:47).mp4
 11-2 ngrx概述 (19:18).mp4
 11-3 ngrx概述 (10:05).mp4
 11-4 Effects的应用 (27:21).mp4
 11-5 ngrx feature 分片 (28:22).mp4