Angular 前端課程

第 1 課 • Angular 模組與應用程式啟動

說明 NgModule、根 AppModule，以及 Angular 如何啟動應用程式。在建構元件之前，提供必要的結構背景。

第 2 課 • Angular 必備的 TypeScript 基礎

介紹撰寫 Angular 程式碼所需的 TypeScript 型別、介面與裝飾器。將 JavaScript 知識銜接至 Angular 的型別生態系統。

第 3 課 • Angular 框架簡介

涵蓋 Angular 在現代前端開發中的角色及其受 MVC 啟發的架構。為所有後續框架主題奠定概念基礎。

第 4 課 • 設定開發環境

安裝並設定 Node.js、npm 與 Angular CLI。確保每位學生都擁有一致且可重現的本地工作環境。

第 1 課 • 內建結構型指令

套用 *ngIf、*ngFor 與 *ngSwitch 來動態控制 DOM 結構。示範指令如何擴充範本的表達能力。

第 2 課 • 屬性繫結與事件繫結

教導透過屬性繫結實現單向資料流，以及透過事件繫結處理使用者事件。將元件邏輯連結至 DOM 元素與使用者互動。

第 3 課 • 範本語法與表達式

涵蓋 Angular 的範本表達式語言、安全導覽運算子與範本參考變數。在元件檢視表中啟用動態內容渲染。

第 4 課 • 元件生命週期鉤子

探索從 ngOnInit 到 ngOnDestroy 的完整生命週期鉤子順序。教導何時以及為何使用每個鉤子來進行初始化與清理。

第 1 課 • ViewChild 與 ContentChild 查詢

透過查詢以程式化方式存取子元件實例與投影內容。啟用超越範本繫結的進階元件協調。

第 2 課 • 使用 @Input 進行父層到子層通訊

使用 @Input 將資料傳遞至元件樹的下方，並透過 setter 驗證輸入。建立 Angular 中主要的向下資料流模式。

第 3 課 • 建置自訂結構型指令

使用 TemplateRef 與 ViewContainerRef 實作結構型指令來操作 DOM。擴展學生建立可重複使用佈局邏輯的能力。

第 4 課 • 建置自訂屬性型指令

建立在不改變 DOM 結構的情況下，修改宿主元素外觀或行為的指令。強化第 2 章介紹的指令模式。

第 1 課 • 建立與提供 Angular 服務

使用 CLI 產生服務，並在模組、元件或根範圍註冊。建立服務層作為共享邏輯的所在位置。

第 2 課 • HTTP 用戶端與 REST API 整合

設定 HttpClientModule 並執行 GET、POST、PUT 與 DELETE 請求。將服務層連結至真實的後端資料來源。

第 3 課 • 錯誤處理與 HTTP 攔截器

使用 catchError 實作全域錯誤處理，並使用攔截器進行請求/回應轉換。產生可供正式環境使用的 HTTP 通訊模式。

第 4 課 • 相依性注入深入探討

探索 DI 階層、注入權杖與提供者型別。啟用對依賴項目在整個應用程式中如何解析的細粒度控制。

第 1 課 • 路由守衛與存取控制

實作 CanActivate、CanDeactivate 與 CanLoad 守衛來保護路由。將驗證與授權整合至導航層。

第 2 課 • 延遲載入與路由解析器

將應用程式分割為按需載入的功能模組，並使用解析器預先擷取資料。改善初始載入效能與使用者體驗。

第 3 課 • 巢狀路由與具名插座

在父層路由下結構化子層路由，並使用具名插座處理輔助檢視表。支援大型應用程式中複雜的佈局需求。

第 4 課 • Router 設定與基本導航

使用路由定義設定 RouterModule，並新增 router-outlet 與 routerLink。為所有導航功能建立基礎。

第 1 課 • 使用 FormArray 的動態表單

使用 FormArray 在執行階段新增與移除表單控制項，以處理可變長度的資料。處理像是重複明細項目的真實場景。

第 2 課 • 驗證器與自訂驗證

套用同步與非同步驗證器，並建立可重複使用的自訂驗證器函式。在提交前確保資料完整性。

第 3 課 • 表單提交與狀態管理

處理表單提交、重設與 dirty/touched 狀態，以提供精緻的使用者體驗。將表單資料連結至第 4 章介紹的服務呼叫。

第 4 課 • 範本驅動表單

在範本中使用 ngForm、ngModel 與內建驗證器，以宣告方式建構表單。以最少的 TypeScript 程式碼介紹表單概念。

第 1 課 • NgRx Entity 與 DevTools

使用 NgRx Entity 簡化集合管理，並使用 Redux DevTools 檢查狀態。加速以 store 為重心的功能的開發與除錯。

第 2 課 • NgRx Store 簡介

安裝 NgRx，並為某個功能切片定義 actions、reducers 與 store。在 Angular 生態系統中建立 Redux 模式。

第 3 課 • 使用 BehaviorSubject 的服務式狀態

在服務中使用 BehaviorSubject 儲存並在元件間共享狀態。在引入 NgRx 之前提供一個輕量級的狀態解決方案。

第 4 課 • NgRx Effects 用於副作用

使用 NgRx Effects 處理 HTTP 呼叫等非同步操作，使其位於 reducers 之外。保持 reducers 的純粹性，並集中管理副作用邏輯。

第 1 課 • 部署策略與 CI/CD 整合

將 Angular 建置部署至靜態代管，並整合自動化管線以進行持續交付。關閉從程式碼到正式環境的開發生命週期。

第 2 課 • 元件與服務的單元測試

使用 Jasmine 與 TestBed 為元件、服務與 pipe 撰寫單元測試。在整合之前，先隔離驗證各個單元。

第 3 課 • 套件最佳化與建置設定

設定正式環境建置、Tree Shaking 與差異化載入，以達到最佳套件大小。為應用程式的真實部署限制做好準備。

第 4 課 • 使用 Cypress 進行端對端測試

使用 Cypress 自動化使用者流程測試，以驗證完整的應用程式行為。以真實的瀏覽器情境補充單元測試。