以下是为期 1 个月 的 Angular 中级水平速成计划，每天投入 2-3 小时，重点聚焦核心概念、实战项目和常见企业级开发需求。计划分为 4 个阶段，每周一个主题。

📅 第 1 周：Angular 核心机制强化

目标：深入理解 Angular 核心特性，摆脱“能用但不懂原理”的状态
学习内容：

1. 组件与模板

   • 模板语法进阶：@ViewChild、ng-template、ng-container
   • 组件通信：@Input/@Output vs 服务 vs Subject
   • 实战：实现一个动态选项卡组件（支持懒加载内容）

2. 依赖注入（DI）

   • 多级注入器（providedIn vs NgModule.providers）
   • 手动注入 Injector 和 useFactory
   • 实战：创建一个可配置的日志服务

3. 变更检测

   • ChangeDetectionStrategy.OnPush 优化技巧
   • 手动触发 detectChanges() 的场景
   • 实战：用 OnPush 优化一个数据仪表盘

每日任务示例：

• Day 1：实现父子组件双向绑定（[(banana)] 语法）
• Day 3：用 DI 实现一个全局主题切换服务
• Day 5：优化一个列表页面的渲染性能（trackBy + OnPush）

验证标准：
✅ 能解释 ngOnChanges 和 ngOnInit 的执行顺序差异
✅ 能手动实现一个 *ngIf 的功能等价指令

📅 第 2 周：路由与状态管理

目标：掌握企业级应用的路由设计和状态管理方案
学习内容：

1. 路由进阶

   • 懒加载模块（loadChildren）
   • 路由守卫（CanActivate、CanDeactivate）
   • 实战：实现一个权限控制的路由系统

2. 状态管理

   • BehaviorSubject 实现轻量级状态管理
   • NgRx 入门（Action/Reducer/Selector）
   • 实战：用 NgRx 管理购物车状态

3. HTTP 交互

   • HttpClient 拦截器（日志、鉴权）
   • 错误处理统一封装
   • 实战：实现带重试机制的 API 服务

每日任务示例：

• Day 1：配置一个多级路由（/admin/users/list）
• Day 3：用 BehaviorSubject 实现全局加载状态
• Day 5：为 HTTP 请求添加 JWT 拦截器

验证标准：
✅ 能设计一个带权限控制的 Admin 路由模块
✅ 能解释 NgRx 的 store.dispatch 工作流程

📅 第 3 周：表单与性能优化

目标：掌握复杂表单和性能优化技巧
学习内容：

1. 响应式表单

   • 动态表单生成（FormArray）
   • 自定义表单验证器（跨字段校验）
   • 实战：实现一个动态问卷调查表单

2. 性能优化

   • 虚拟滚动（@angular/cdk/scrolling）
   • PurePipe 和 Memoization 优化计算
   • 实战：优化一个万级数据列表页

3. 部署与工具链

   • angular.json 自定义构建配置
   • 使用 Lighthouse 分析性能
   • 实战：部署到 Vercel 或 Firebase

每日任务示例：

• Day 1：实现一个带条件校验的注册表单
• Day 3：用 CDK Virtual Scroll 渲染长列表
• Day 5：配置多环境变量（environment.prod.ts）

验证标准：
✅ 能实现一个动态增删的表单组
✅ 能将首屏加载时间从 5s 优化到 2s 内

📅 第 4 周：实战项目与面试级问题

目标：通过完整项目整合技能，应对面试场景
学习内容：

1. 实战项目

   • 项目选题：Admin 后台 / 电商前端 / 实时聊天应用
   • 技术栈整合：Angular + NgRx + Bootstrap
   • 代码规范：ESLint + Prettier

2. 面试高频问题

   • Ivy 编译器优势
   • Zone.js 的作用
   • 组件生命周期钩子执行顺序

3. 开源贡献

   • 给 Angular Material 提交一个 Issue 或 PR
   • 阅读 @angular/core 源码片段

每日任务示例：

• Day 1：搭建项目骨架（路由+状态管理）
• Day 3：实现一个复杂数据表格（排序/分页）
• Day 5：模拟技术面试（自问自答）

验证标准：
✅ 能独立完成一个 5+ 页面的 SPA
✅ 能流畅回答 Angular 的变更检测机制

📚 推荐资源

• 官方文档：Angular 中文指南
• 视频课程：Udemy《Angular - The Complete Guide》
• 实战模板：GitHub: angular-ngrx-starter

💡 关键心态提示

• 每天写代码：哪怕只是修改一个小功能
• 遇到问题先调试：学会阅读错误栈和 Augury 调试