Chapter 01 進入 Angular 世界的大門

1.1 Angular 簡介

1.1.1 Angular 的發展歷史

1.1.2 Angular 特性

1.2 建置 Angular 開發環境

1.2.1 安裝 Node.js

1.2.2 安裝 Angular CLI

1.2.3 利用 Angular CLI 建立專案

1.2.4 啟動 Angular 應用程式

1.3 Angular 專案檔案結構

1.3.1 開發相依套件檔案

1.3.2 Angular 專案定義檔

1.3.3 TypeScript 組態設定檔

1.3.4 Angular 應用程式檔案

1.3.5 環境設定檔



Chapter 02 應用程式的收納盒 – 模組（Module）

2.1 模組的概述

2.1.1 什麼是 Angular 模組

2.1.2 利用 Angular CLI 建立元件

2.1.3 @NgModule 裝飾器的定義

2.2 Angular 內建模組

2.2.1 BrowserModule 與 CommonModule

2.2.2 HttpClientModule

2.2.3 FormModule 與 ReactiveFormsModule

2.2.4 RouterModule



Chapter 03 應用程式的基石– 元件（Component）

3.1 元件的概述

3.1.1 什麼是 Angular 元件

3.1.2 利用 Angular CLI 建立元件

3.1.3 @Component 裝飾器的定義

3.2 單向繫結（One-way binding）

3.2.1 文字插值（Text interpolation）

3.2.2 事件繫結（Event Binding）

3.2.3 屬性繫結（Property / Attribute Binding）

3.2.4 樣式繫結（Style Binding）

3.2.5 類別繫結（Class Binding）

3.3 巢狀元件間的互動

3.3.1 利用 @Input 裝飾器接收父元件資料

3.3.2 利用 @Attribute 裝飾器接收父元件資料

3.3.3 利用 @Output 裝飾器通知父元件

3.3.4 雙向繫結（Two-way Binding）

3.3.5 利用範本參考變數使用子元件屬性與方法

3.4 頁面範本的封裝

3.4.1 封裝頁面範本

3.4.2 動態內容投影

3.5 生命週期

3.5.1 輸入屬性值變更監控

3.5.2 元件初始化作業

3.5.3 自訂變更檢測

3.5.4 動態內容投影的初始與變更檢測

3.5.5 頁面檢視的初始與變更檢測

3.5.6 元件實體銷毀

3.6 元件樣式

3.6.1 檢視封裝模式（View encapsulation model）

3.6.2 特殊的選擇器

3.7 檢測變更（Change Detection）

3.7.1 Angular 的檢測變更策略

3.7.2 檢測變更的運作

3.7.3 手動觸發檢測變更



Chapter 04 功能擴增的黑魔法 – 指令（Directive）

4.1 指令的概述

4.1.1 什麼是 Angular 指令

4.1.2 利用 Angular CLI 建立指令

4.1.3 @Directive 裝飾器的定義

4.2 Angular 內建指令

4.2.1 樣式與類別內建指令 - ngStyle / ngClass

4.2.2 清單列表 – *ngFor

4.2.3 條件判斷 – *ngIf

4.2.4 多個條件判斷 – ngSwitch

4.2.5 動態元件載入 – *ngComponentOutlet

4.2.6 利用 避免改變頁面結構

4.2.7 利用 @ViewChild 取得含結構型指令的元素

4.3 自訂 Angular 指令

4.3.1 自訂變更元素樣式的屬性型指令（Attribute Directive）

4.3.2 自訂改變元素行為的屬性型指令（Attribute Directive）

4.3.3 自訂結構型指令（Structural Directive）

4.4 自訂指令內的繫結

4.4.1 @HostListener 裝飾器

4.4.2 @HostBinding 裝飾器



Chapter 05 檢視資料的面具 – 管道（Pipe）

5.1 Angular 內建管道

5.1.1 檢視物件資料 – JsonPipe

5.1.2 改變字母大小寫 – TitleCasePipe / LowerCasePipe /UpperCasePipe

5.1.3 限制顯示長度 – SlicePipe

5.1.4 物件轉換成陣列 – KeyValuePipe

5.1.5 數值資料的顯示 – DecimalPipe

5.1.6 百分比資料的顯示 – PercentPipe

5.1.7 貨幣資料的顯示 – CurrencyPipe

5.1.8 日期資料的顯示 – DatePipe

5.2 自訂 Angular 管道

5.2.1 利用 Angular CLI 建立管道

5.2.2 利用管道將陣列資料倒序排列

5.2.3 多個管道輸入參數

5.2.4 設定自訂管道的 pure 參數



Chapter 06 應用程式的橋梁 – 服務（Service）

6.1 自訂 Angular 服務

6.1.1 利用 Angular CLI 建立服務

6.1.2 利用 @Injectable 裝飾器配置可注入的服務

6.1.3 獨體設計模式（Singleton）的服務實體

6.1.4 水平元件間的互動

6.2 利用提供者設定抽換服務

6.2.1 利用 useClass 抽象服務

6.2.2 利用 useExisting 抽象服務

6.2.3 利用 useValue 抽象服務

6.2.4 利用 useFactory 抽象服務

6.2.5 提供者範圍

6.3 自訂提供者令牌

6.3.1 類別類型的令牌

6.3.2 字串類型的令牌

6.3.3 InjectionToken 令牌

6.3.4 相同令牌指定多種提供者

6.4 遠端資料的取得

6.4.1 利用 HttpClient 取得遠端資料

6.4.2 利用 AsyncPipe 管道顯示可監控的資料

6.4.3 利用 HttpParams 設定查詢字串

6.4.4 利用 HttpClient 把資料傳到後端服務

6.4.5 利用 HTTP_INTERCEPTORS 攔截請求

6.4.6 利用 HttpContext 傳遞資料

6.5 Angular 內建注入裝飾器

6.5.1 改變服務實體取得的注入器起訖位置 – @Self() / @SkipSelf()

6.5.2 選擇性的注入 – @Optional()

6.5.3 依範本結構取得服務實體 - @Host()



Chapter 07 範本驅動表單（Template-Driven Form）

7.1 利用範本驅動表單建立表單

7.1.1 範本驅動表單概述

7.1.2 利用 NgModel 指令定義表單模型屬性

7.1.3 利用範本參考變數取得表單模型屬性值

7.1.4 取得 NgForm 型別的表單模型

7.1.5 利用 NgModelGroup 指令定義表單群組

7.2 表單狀態的使用

7.2.1 表單輸入項是否已被點選

7.2.2 表單輸入項是否曾經輸入過

7.2.3 表單輸入項是否驗證通過

7.2.4 表單輸入項是否為可輸入狀態

7.2.5 表單是否提交過

7.3 表單的欄位驗證

7.3.1 設定必填的欄位驗證

7.3.2 設定欄位最小與最大長度驗證

7.3.3 設定 Email 格式驗證

7.3.4 數值欄位範圍驗證

7.3.5 設定正規化表示式驗證

7.3.6 自訂表單驗證指令



Chapter 08 響應式表單（Reactive Form）

8.1 利用響應式表單建立表單

8.1.1 響應式表單概述

8.1.2 利用 FormControl 建立單一欄位的表單

8.1.3 利用 FormGroup 建立表單群組

8.1.4 利用 FormArray 建立表單陣列

8.1.5 利用 FormBuilder 建立表單

8.2 表單的欄位驗證

8.2.1 設定表單欄位驗證

8.2.2 自訂欄位同步驗證方法

8.2.3 自訂欄位非同步驗證方法

8.3 表單模型常用方法

8.3.1 表單值的存取與監控

8.3.2 表單陣列結構的操作

8.3.3 表單狀態的設定與監控

8.3.4 表單驗證的設定

8.4 自訂表單元件

8.4.1 實作 ControlValueAccessor 介面

8.4.2 設定 NG_VALUE_ACCESSOR 令牌提供者

8.4.3 實作 Validator 介面

8.4.4 設定 NG_VALIDATORS 令牌提供者



Chapter 09 功能頁面的切換 – 路由（Router）

9.1 利用路由切換頁面

9.1.1 應用程式的路由模組

9.1.2 基本路由定義

9.1.3 轉址路由定義

9.1.4 萬用路由（wildcard route）定義

9.1.5 利用 routerLink 指令切換路由頁面

9.1.6 利用 Router 服務方法切換路由頁面

9.2 路由的參數與資料傳遞

9.2.1 路由參數的傳遞與取得

9.2.2 查詢字串的傳遞與取得

9.2.3 路由資料的傳遞與取得

9.3 子路由與延遲載入（Lazy Loading）

9.3.1 子路由的設定

9.3.2 延遲載入的設定

9.4 路由守門員（Router Guard）

9.4.1 利用 Angular CLI 建立路由守門員

9.4.2 檢查是否有權限進入頁面

9.4.3 檢查是否可以離開頁面

9.5 其他路由設定

9.5.1 Angular 內建路由策略

9.5.2 追蹤與訂閱路由事件

9.5.3 強制重新整理頁面



Chapter 10 應用程式的檢驗 – 測試

10.1 測試的概述

10.1.1 什麼是單元測試

10.1.2 在 Angular 專案的單元測試

10.2 Jasmine 測試語法

10.2.1 測試案例的撰寫

10.2.2 驗證斷言方法

10.2.3 生命週期鉤子

10.3 Angular 各種元件的測試

10.3.1 測試 Angular 管道

10.3.2 測試 Angular 服務

10.3.3 測試 Angular 元件

10.3.4 建立相依的假服務

10.3.5 測試表單元件

10.3.6 測試非同步作業

10.3.7 測試環境設置的變更

10.3.8 測試路由元件

11.3.9 封裝測試頁面物件

10.3.10 測試 Angular 指令

10.3.11 測試預先載入資料方法



Chapter 11 Angular 全新特性

11.1 獨立元件與指令組合 API

11.1.1 什麼是獨立元件

11.1.2 獨立元件的使用

11.1.3 用獨立元件啟動應用程式

11.1.4 透過模組引用獨立元件

11.1.5 指令組合 API

11.2 全新檢測變更機制 - 訊號（Signal）

11.2.1 使用 Signal 機制開發元件

11.2.2 結合 RxJS 作業開發元件

11.3 全新控制流程語法

11.3.1 條件判斷 - @if

11.3.2 清單列表 - @for

11.3.3 多個條件判斷 - @switch

11.3.4 可延遲載入頁面 - @defer



Chapter 12 開發、建置與部署

12.1 Angular CLI 常用指令

12.1.1 建立函式庫專案

12.1.2 利用 Schematics 管理套件與建立元件

12.1.3 程式碼風格檢查

12.2 應用程式的建置組態

12.2.1 工作空間組態

12.2.2 靜態檔案的設定

12.2.3 全域樣式與 JavaScript 檔案配置

12.2.4 不同執行環境變數的配置

12.3 部署應用程式

12.3.1 利用 ng build 命令建置應用程式

12.3.2 IIS 站別設定





?