从零构建仿拼多多 WebApp，补齐 Angular 核心与项目落地能力
许多开发者在学习 Angular 时，往往陷入“语法懂了，但项目不会搭”的困境，或者在理解组件化、模块化思想上存在严重断层。本课程以构建一个仿拼多多风格的 WebApp 为载体，直击这些痛点，帮助你将 Angular 的核心理念转化为实际的工程能力。课程并非泛泛的理论介绍，而是通过完整的项目实战，带你从环境配置、CLI 工程结构入手，逐步深入到组件封装、路由配置及复杂样式绑定的实战应用，旨在解决你从零开始搭建企业级单页应用的能力缺口。
适合什么基础？先学什么？
本课程适合已经掌握 TypeScript 基础语法，或对 Vue、React 等其他前端框架有一定了解，希望系统性地掌握 Angular 体系的技术学习者。如果你是纯前端新手，建议先补足 TypeScript 基础再入门。学习顺序上，请务必从“环境配置”与“开发工具配置”章节开始，确保本地开发环境就绪，这是后续一切操作的前提。接着，重点攻克“Angular初探”章节，这是建立 Angular 思维的关键，需要彻底理解 CLI 工程源码文件结构、组件的基本封装逻辑，以及 ngIf、ngFor 等常用指令的使用。随后，深入“基础知识”部分，细致梳理组件生命周期、模块的划分原则以及双向绑定机制，这些是构建复杂业务逻辑的地基。切忌急于求成，只有在基础章节扎实掌握后，才能顺畅进入后续的进阶知识学习。
学完能做什么？如何配合练习？
完成本课程后，你将具备独立规划并开发 Angular 单页应用的能力。具体而言，你将能够熟练搭建项目工程骨架，合理划分路由实现页面跳转与参数传递，独立封装如轮播图、顶部 TabBar 等高复用性的通用组件，并能灵活运用多种样式绑定方式实现精细化的 UI 控制，彻底告别“样式混乱”的初级阶段。为了最大化学习效果，建议在观看视频时，务必同步对照课程提供的资料包中的源码进行逐行阅读与对比，理解代码背后的设计思路。重点练习包括：尝试自行修改路由配置以实现不同的页面跳转逻辑；手动封装一个新组件，并实现其输入输出属性的传值；以及利用 ngIf 和 ngFor 处理动态数据渲染，从而真正实现从理论认知到独立实战的跨越，具备承接实际 Angular 项目开发任务的底气。
课程目录
第1章 课程介绍 试看 5 节 | 57分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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分钟 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)
