以下是為期 1 個月 的 Angular 中級水平速成計劃，每天投入 2-3 小時，重點聚焦核心概念、實戰(zhàn)項目和常見企業(yè)級開發(fā)需求。計劃分為 4 個階段，每周一個主題。

?? 第 1 周：Angular 核心機制強化

目標(biāo)：深入理解 Angular 核心特性，擺脫“能用但不懂原理”的狀態(tài)
學(xué)習(xí)內(nèi)容：

1. 組件與模板

   • 模板語法進階：@ViewChild、ng-template、ng-container
   • 組件通信：@Input/@Output vs 服務(wù) vs Subject
   • 實戰(zhàn)：實現(xiàn)一個動態(tài)選項卡組件（支持懶加載內(nèi)容）

2. 依賴注入（DI）

   • 多級注入器（providedIn vs NgModule.providers）
   • 手動注入 Injector 和 useFactory
   • 實戰(zhàn)：創(chuàng)建一個可配置的日志服務(wù)

3. 變更檢測

   • ChangeDetectionStrategy.OnPush 優(yōu)化技巧
   • 手動觸發(fā) detectChanges() 的場景
   • 實戰(zhàn)：用 OnPush 優(yōu)化一個數(shù)據(jù)儀表盤

每日任務(wù)示例：

• Day 1：實現(xiàn)父子組件雙向綁定（[(banana)] 語法）
• Day 3：用 DI 實現(xiàn)一個全局主題切換服務(wù)
• Day 5：優(yōu)化一個列表頁面的渲染性能（trackBy + OnPush）

驗證標(biāo)準(zhǔn)：
? 能解釋 ngOnChanges 和 ngOnInit 的執(zhí)行順序差異
? 能手動實現(xiàn)一個 *ngIf 的功能等價指令

?? 第 2 周：路由與狀態(tài)管理

目標(biāo)：掌握企業(yè)級應(yīng)用的路由設(shè)計和狀態(tài)管理方案
學(xué)習(xí)內(nèi)容：

1. 路由進階

   • 懶加載模塊（loadChildren）
   • 路由守衛(wèi)（CanActivate、CanDeactivate）
   • 實戰(zhàn)：實現(xiàn)一個權(quán)限控制的路由系統(tǒng)

2. 狀態(tài)管理

   • BehaviorSubject 實現(xiàn)輕量級狀態(tài)管理
   • NgRx 入門（Action/Reducer/Selector）
   • 實戰(zhàn)：用 NgRx 管理購物車狀態(tài)

3. HTTP 交互

   • HttpClient 攔截器（日志、鑒權(quán)）
   • 錯誤處理統(tǒng)一封裝
   • 實戰(zhàn)：實現(xiàn)帶重試機制的 API 服務(wù)

每日任務(wù)示例：

• Day 1：配置一個多級路由（/admin/users/list）
• Day 3：用 BehaviorSubject 實現(xiàn)全局加載狀態(tài)
• Day 5：為 HTTP 請求添加 JWT 攔截器

驗證標(biāo)準(zhǔn)：
? 能設(shè)計一個帶權(quán)限控制的 Admin 路由模塊
? 能解釋 NgRx 的 store.dispatch 工作流程

?? 第 3 周：表單與性能優(yōu)化

目標(biāo)：掌握復(fù)雜表單和性能優(yōu)化技巧
學(xué)習(xí)內(nèi)容：

1. 響應(yīng)式表單

   • 動態(tài)表單生成（FormArray）
   • 自定義表單驗證器（跨字段校驗）
   • 實戰(zhàn)：實現(xiàn)一個動態(tài)問卷調(diào)查表單

2. 性能優(yōu)化

   • 虛擬滾動（@angular/cdk/scrolling）
   • PurePipe 和 Memoization 優(yōu)化計算
   • 實戰(zhàn)：優(yōu)化一個萬級數(shù)據(jù)列表頁

3. 部署與工具鏈

   • angular.json 自定義構(gòu)建配置
   • 使用 Lighthouse 分析性能
   • 實戰(zhàn)：部署到 Vercel 或 Firebase

每日任務(wù)示例：

• Day 1：實現(xiàn)一個帶條件校驗的注冊表單
• Day 3：用 CDK Virtual Scroll 渲染長列表
• Day 5：配置多環(huán)境變量（environment.prod.ts）

驗證標(biāo)準(zhǔn)：
? 能實現(xiàn)一個動態(tài)增刪的表單組
? 能將首屏加載時間從 5s 優(yōu)化到 2s 內(nèi)

?? 第 4 周：實戰(zhàn)項目與面試級問題

目標(biāo)：通過完整項目整合技能，應(yīng)對面試場景
學(xué)習(xí)內(nèi)容：

1. 實戰(zhàn)項目

   • 項目選題：Admin 后臺 / 電商前端 / 實時聊天應(yīng)用
   • 技術(shù)棧整合：Angular + NgRx + Bootstrap
   • 代碼規(guī)范：ESLint + Prettier

2. 面試高頻問題

   • Ivy 編譯器優(yōu)勢
   • Zone.js 的作用
   • 組件生命周期鉤子執(zhí)行順序

3. 開源貢獻

   • 給 Angular Material 提交一個 Issue 或 PR
   • 閱讀 @angular/core 源碼片段

每日任務(wù)示例：

• Day 1：搭建項目骨架（路由+狀態(tài)管理）
• Day 3：實現(xiàn)一個復(fù)雜數(shù)據(jù)表格（排序/分頁）
• Day 5：模擬技術(shù)面試（自問自答）

驗證標(biāo)準(zhǔn)：
? 能獨立完成一個 5+ 頁面的 SPA
? 能流暢回答 Angular 的變更檢測機制

?? 推薦資源

• 官方文檔：Angular 中文指南
• 視頻課程：Udemy《Angular - The Complete Guide》
• 實戰(zhàn)模板：GitHub: angular-ngrx-starter

?? 關(guān)鍵心態(tài)提示

• 每天寫代碼：哪怕只是修改一個小功能
• 遇到問題先調(diào)試：學(xué)會閱讀錯誤棧和 Augury 調(diào)試