內容提要
《揭秘Angular 2》第一部分從前端的故事起點說起，然後對 Angular 以及 TypeScript 進行了簡單的介紹，接著通過一個通訊錄例子讓讀者快速入門 Angular 的開發；第二部分則深入講解了 Angular 架構以及 Angular 核心內容，包括組件、模板、指令、服務、依賴注入、路由以及測試，此外，在相應的章節里還補充說明了譬如變化監測的核心 Zones（第 6 章）、雙向綁定的原理（第 7 章）、RxJS（第 9 章）等關鍵內容；第三部分則通過問卷調查系統來指引讀者進行 Angular 項目的實戰。
目錄
第一部分入門篇
1 前端風雲. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1 故事的起點2
1.2 AJAX 王者歸來3
1.3 工具庫的流行3
1.4 百家爭鳴3
1.5 走進前端新時代4
1.6 小結6
2 Angular 簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2.1 歷史回顧7
2.1.1 AngularJS 1.x 起源7
2.1.2 AngularJS 1.x 疊代之路8
2.1.3 初生的Angular 2 9
2.1.4 快速發展的Angular 2 10
2.1.5 開發語言之選11
2.2 Angular 2 簡述12
2.2.1 核心概念12
2.2.2 平台簡介14
2.2.3 平台亮點16
2.3 小結17
3 TypeScript 入門. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 TypeScript 概述18
3.1.1 概述18
3.1.2 安裝19
3.2 基本類型20
3.2.1 布爾類型20
3.2.2 數字類型20
3.2.3 字元串類型21
3.2.4 數組類型21
3.2.5 元組類型21
3.2.6 枚舉類型21
3.2.7 任意值類型22
3.2.8 null 和undefined 22
3.2.9 void 類型23
3.2.10 never 類型24
3.3 聲明和解構24
3.3.1 let 聲明25
3.3.2 const 聲明26
3.3.3 解構26
3.4 函式28
3.4.1 函式定義28
3.4.2 可選參數28
3.4.3 默認參數29
3.4.4 剩餘參數30
3.4.5 函式重載30
3.4.6 箭頭函式31
3.5 類32
3.5.1 類的例子32
3.5.2 繼承與多態32
3.5.3 修飾符33
3.5.4 參數屬性35
3.5.5 靜態屬性35
3.5.6 抽象類36
3.6 模組37
3.6.1 概述37
3.6.2 模組導出方式37
3.6.3 模組導入方式38
3.6.4 模組的默認導出39
3.6.5 模組設計原則40
3.7 接口42
3.7.1 概述42
3.7.2 屬性類型接口42
3.7.3 函式類型接口43
3.7.4 可索引類型接口44
3.7.5 類類型接口44
3.7.6 接口擴展45
3.8 裝飾器46
3.8.1 概述46
3.8.2 方法裝飾器47
3.8.3 類裝飾器48
3.8.4 參數裝飾器50
3.8.5 屬性裝飾器51
3.8.6 裝飾器組合51
3.9 泛型53
3.10 TypeScript 周邊54
3.10.1 編譯配置檔案54
3.10.2 聲明檔案55
3.10.3 編碼工具56
3.10.4 展望未來57
3.11 小結57
4 快速入門. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.1 Hello World 例子58
4.1.1 準備工作58
4.1.2 搭建步驟59
4.2 通訊錄例子66
4.2.1 背景介紹66
4.2.2 架構設計68
4.3 小結74
第二部分深入篇
5 Angular 架構總覽. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
5.1 核心模組介紹76
5.1.1 組件77
5.1.2 模板81
5.1.3 指令82
5.1.4 服務83
5.1.5 依賴注入84
5.1.6 路由86
5.2 套用模組88
5.3 源碼結構介紹91
5.4 小結93
6 組件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6.1 概述94
6.1.1 模組化介紹94
6.1.2 組件化標準96
6.1.3 Angular 的組件100
6.2 組件基礎100
6.2.1 創建組件的步驟100
6.2.2 組件基礎構成102
6.2.3 組件與模組108
6.3 組件互動113
6.3.1 組件的輸入輸出屬性114
6.3.2 父組件向子組件傳遞數據115
6.3.3 子組件向父組件傳遞數據120
6.3.4 其他組件互動方式122
6.4 組件內容嵌入124
6.5 組件生命周期128
6.5.1 概述128
6.5.2 生命周期鉤子128
6.6 變化監測131
6.6.1 數據變化的源頭131
6.6.2 變動通知機制132
6.6.3 變化監測的回響處理133
6.7 擴展閱讀139
6.7.1 元數據一覽表139
6.7.2 元數據說明139
6.7.3 深入理解Zones 149
6.8 小結155
7 模板. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
7.1 模板語法概覽156
7.2 數據綁定158
7.2.1 概述158
7.2.2 插值160
7.2.3 模板表達式160
7.2.4 屬性綁定162
7.2.5 事件綁定165
7.2.6 雙向數據綁定168
7.2.7 輸入和輸出屬性169
7.3 內置指令170
7.3.1 NgClass 170
7.3.2 NgStyle 170
7.3.3 NgIf 171
7.3.4 NgSwitch 172
7.3.5 NgFor 172
7.4 表單173
7.4.1 模板表單例子174
7.4.2 表單指令175
7.4.3 自定義表單樣式184
7.4.4 表單校驗185
7.5 管道189
7.5.1 管道介紹190
7.5.2 內置管道190
7.5.3 自定義管道196
7.5.4 管道的變化監測198
7.6 擴展閱讀202
7.6.1 安全導航操作符202
7.6.2 雙向綁定的原理202
7.7 小結205
8 指令. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
8.1 概述206
8.1.1 指令分類208
8.1.2 內置指令210
8.2 自定義屬性指令219
8.2.1 實現屬性指令219
8.2.2 為指令綁定輸入221
8.2.3 回響用戶操作223
8.3 自定義結構指令224
8.3.1 實現結構指令224
8.3.2 模板標籤與星號前綴227
8.3.3 NgIf 指令原理228
8.4 擴展閱讀231
8.5 小結235
9 服務與RxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
9.1 Angular 服務237
9.1.1 概述237
9.1.2 使用場景238
9.2 HTTP 服務242
9.2.1 AJAX 介紹243
9.2.2 JSONP 介紹249
9.2.3 HttpModule 250
9.3 回響式編程254
9.3.1 概述254
9.3.2 ReactiveX 256
9.4 RxJS 258
9.4.1 創建Observable 對象258
9.4.2 使用RxJS 處理複雜場景258
9.4.3 RxJS 和Promise 的對比259
9.4.4 “冷”模式下的Observable 260
9.4.5 RxJS 中的Operator 261
9.4.6 Angular 中的RxJS 265
9.5 小結269
10 依賴注入. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
10.1 依賴注入介紹271
10.2 Angular 依賴注入274
10.2.1 概述274
10.2.2 在組件中注入服務276
10.2.3 在服務中注入服務278
目錄xvii
10.2.4 在模組中注入服務280
10.2.5 層級注入282
10.2.6 注入到派生組件286
10.2.7 限定方式的依賴注入288
10.3 Provider 292
10.3.1 概述292
10.3.2 Provider 註冊方式293
10.4 擴展閱讀297
10.5 小結299
11 路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
11.1 概述300
11.2 基本用法302
11.2.1 路由配置302
11.2.2 創建根路由模組303
11.2.3 添加RouterOutlet 指令303
11.3 路由策略304
11.3.1 HashLocationStrategy 介紹305
11.3.2 PathLocationStrategy 介紹306
11.4 路由跳轉307
11.4.1 使用指令跳轉308
11.4.2 使用代碼跳轉310
11.5 路由參數312
11.5.1 Path 參數312
11.5.2 Query 參數315
11.5.3 Matrix 參數317
11.6 子路由和附屬Outlet 317
11.6.1 子路由317
11.6.2 附屬Outlet 319
11.7 路由攔截320
11.7.1 激活攔截與反激活攔截321
11.7.2 數據預載入攔截325
11.8 模組的延遲載入327
11.8.1 延遲載入實現328
11.8.2 模組載入攔截329
11.9 小結331
12 測試. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
12.1 概述332
12.2 單元測試333
12.2.1 概述333
12.2.2 常用測試框架334
12.2.3 Jasmine 介紹334
12.2.4 Karma 介紹338
12.2.5 Karma 結合Jasmine 測試339
12.3 Angular 單元測試343
12.3.1 概述343
12.3.2 獨立單元測試348
12.3.3 測試工具集352
12.4 端到端測試360
12.4.1 概述360
12.4.2 Protractor 介紹361
12.5 小結364
第三部分實戰篇
13 問卷調查系統簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
13.1 項目背景366
13.2 主要特性367
13.2.1 首頁和幫助頁369
13.2.2 問卷編輯頁369
13.2.3 我的問卷頁369
13.2.4 用戶管理頁369
13.3 產品設計369
13.4 小結371
14 項目起步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
14.1 技術選型372
14.1.1 前端腳手架372
14.1.2 UI 樣式庫373
14.1.3 後端伺服器374
14.2 環境搭建374
14.2.1 搭建腳手架374
14.2.2 引入樣式庫377
14.2.3 搭建後台環境378
14.3 目錄結構介紹380
14.4 首頁開發384
14.5 小結388
15 問卷編輯模組. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
15.1 概述389
15.1.1 功能設計389
15.1.2 數據模型391
15.2 問卷編輯模組開發393
15.2.1 問題選擇組件394
15.2.2 問題組件398
15.2.3 問卷組件408
15.2.4 問卷服務415
15.2.5 問卷大綱422
15.3 小結425
16 我的問卷模組. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
16.1 問卷列表427
16.1.1 問卷列表項428
16.1.2 顯示問卷列表429
16.1.3 顯示問卷詳情431
16.2 問卷操作433
16.2.1 修改路由配置434
16.2.2 發布後的問卷頁面436
16.2.3 問卷操作組件439
16.3 小結442
17 用戶管理模組. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
17.1 開發簡單註冊頁444
17.2 表單控制項組件446
17.2.1 定義表單控制項446
17.2.2 校驗表單控制項447
17.2.3 表單安全450
17.3 用戶註冊功能開發451
17.3.1 用戶註冊服務451
17.3.2 組件的邏輯453
17.3.3 註冊接口開發455
17.4 許可權管理456
17.5 小結460
18 項目構建和最佳實踐. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
18.1 項目構建461
18.1.1 代碼質量檢查461
18.1.2 測試463
18.1.3 打包465
18.1.4 容器化467
18.2 最佳實踐468
18.2.1 單一職責468
18.2.2 命名約定469
18.2.3 編碼約定471
18.2.4 套用結構約定474
18.2.5 組件相關約定475
18.2.6 指令相關約定478
18.2.7 服務相關約定478
18.2.8 其他479
18.3 小結480
