揭秘Angular（第2版）

第一部分入門篇
1 前端風(fēng)云 2
1．1 故事的起點 2
1．2 AJAX 王者歸來 3
1．3 工具庫的流行 3
1．4 百家爭鳴 3
1．5 走進前端新時代 4
1．6 小結(jié) 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 9
2．1．4 快速發(fā)展的Angular 10
2．1．5 Angular 4 和后續(xù)語義版本 11
2．1．6 開發(fā)語言之選 13
2．2 Angular 簡述 14
2．2．1 核心概念 14
2．2．2 平臺簡介 16
2．2．3 平臺亮點 18
2．3 小結(jié) 19

3 TypeScript 入門 20
3．1 TypeScript 概述 20
3．1．1 概述 20
3．1．2 安裝 21
3．2 基本類型 22
3．2．1 布爾類型 22
3．2．2 數(shù)字類型 22
3．2．3 字符串類型 23
3．2．4 數(shù)組類型 23
3．2．5 元組類型 23
3．2．6 枚舉類型 23
3．2．7 任意值類型 24
3．2．8 null 和undefined 24
3．2．9 void 類型 25
3．2．10 never 類型 26
3．3 聲明和解構(gòu) 26
3．3．1 let 聲明 27
3．3．2 const 聲明 28
3．3．3 解構(gòu) 28
3．4 函數(shù) 30
3．4．1 函數(shù)定義 30
3．4．2 可選參數(shù) 30
3．4．3 默認參數(shù) 31
3．4．4 剩余參數(shù) 32
3．4．5 函數(shù)重載 32
3．4．6 箭頭函數(shù) 33
3．5 類 34
3．5．1 類的例子 34
3．5．2 繼承與多態(tài) 34
3．5．3 修飾符 35
3．5．4 參數(shù)屬性 37
3．5．5 靜態(tài)屬性 37
3．5．6 抽象類 38
3．6 模塊 39
3．6．1 概述 39
3．6．2 模塊導(dǎo)出方式 39
3．6．3 模塊導(dǎo)入方式 40
3．6．4 模塊的默認導(dǎo)出 41
3．6．5 模塊設(shè)計原則 42
3．7 接口 44
3．7．1 概述 44
3．7．2 屬性類型接口 44
3．7．3 函數(shù)類型接口 45
3．7．4 可索引類型接口 46
3．7．5 類類型接口 46
3．7．6 接口擴展 47
3．8 裝飾器 48
3．8．1 概述 48
3．8．2 方法裝飾器 49
3．8．3 類裝飾器 50
3．8．4 參數(shù)裝飾器 52
3．8．5 屬性裝飾器 53
3．8．6 裝飾器組合 53
3．9 泛型 55
3．10 TypeScript 周邊 56
3．10．1 編譯配置文件 56
3．10．2 聲明文件 57
3．10．3 編碼工具 58
3．10．4 展望未來 59
3．11 小結(jié) 59

4 快速入門 60
4．1 Hello World 例子 60
4．1．1 準備工作 60
4．1．2 構(gòu)建項目 61
4．2 通訊錄例子 66
4．2．1 背景介紹 66
4．2．2 架構(gòu)設(shè)計 68
4．3 小結(jié) 74

第二部分深入篇
5 Angular 架構(gòu)總覽 76
5．1 核心模塊介紹 76
5．1．1 組件 77
5．1．2 模板 81
5．1．3 指令 83
5．1．4 服務(wù) 84
5．1．5 依賴注入 84
5．1．6 路由 86
5．2 應(yīng)用模塊 89
5．3 源碼結(jié)構(gòu)介紹 92
5．4 小結(jié) 93

6 組件 94
6．1 概述 94
6．1．1 模塊化介紹 94
6．1．2 組件化標準 96
6．1．3 Angular 的組件 99
6．2 組件基礎(chǔ) 100
6．2．1 創(chuàng)建組件的步驟 100
6．2．2 組件的基礎(chǔ)構(gòu)成 101
6．2．3 組件與模塊 108
6．3 組件交互 113
6．3．1 組件的輸入、輸出屬性 113
6．3．2 父組件向子組件傳遞數(shù)據(jù) 114
6．3．3 子組件向父組件傳遞數(shù)據(jù) 120
6．3．4 其他組件交互方式 121
6．4 組件內(nèi)容嵌入 124
6．5 組件生命周期 128
6．5．1 概述 128
6．5．2 生命周期鉤子 128
6．6 變化監(jiān)測 130
6．6．1 數(shù)據(jù)變化的源頭 131
6．6．2 變動通知機制 132
6．6．3 變化監(jiān)測的響應(yīng)處理 134
6．7 擴展閱讀 140
6．7．1 元數(shù)據(jù)一覽表 140
6．7．2 元數(shù)據(jù)說明 141
6．7．3 深入理解Zone．js 150
6．7．4 不依賴Zone．js 的Angular 154
6．8 小結(jié) 155

7 模板 156
7．1 模板語法概覽 156
7．2 數(shù)據(jù)綁定 158
7．2．1 概述 158
7．2．2 插值 160
7．2．3 模板表達式 160
7．2．4 屬性綁定 162
7．2．5 事件綁定 165
7．2．6 雙向數(shù)據(jù)綁定 168
7．2．7 輸入和輸出屬性 169
7．3 內(nèi)置指令 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 表單校驗 186
7．5 管道 189
7．5．1 管道介紹 189
7．5．2 內(nèi)置管道 190
7．5．3 自定義管道 196
7．5．4 管道的變化監(jiān)測 198
7．6 擴展閱讀 202
7．6．1 安全導(dǎo)航操作符 202
7．6．2 雙向綁定的原理 202
7．7 小結(jié) 204

8 指令 206
8．1 概述 206
8．1．1 指令分類 208
8．1．2 內(nèi)置指令 210
8．2 自定義屬性指令 219
8．2．1 實現(xiàn)屬性指令 219
8．2．2 為指令綁定輸入 221
8．2．3 響應(yīng)用戶操作 223
8．3 自定義結(jié)構(gòu)指令 224
8．3．1 實現(xiàn)結(jié)構(gòu)指令 225
8．3．2 模板標簽與星號前綴 227
8．3．3 NgIf 指令原理 229
8．4 擴展閱讀 231
8．5 小結(jié) 235

9 服務(wù)與RxJS 237
9．1 Angular 服務(wù) 237
9．1．1 概述 237
9．1．2 使用場景 238
9．2 HTTP 服務(wù) 242
9．2．1 HttpModule 242
9．2．2 HttpClientModule 254
9．3 響應(yīng)式編程 262
9．3．1 概述 262
9．3．2 ReactiveX 264
9．4 RxJS 266
9．4．1 創(chuàng)建Observable 對象 266
9．4．2 使用RxJS 處理復(fù)雜場景 266
9．4．3 RxJS 和Promise 的對比 267
9．4．4 “冷”模式下的Observable 268
9．4．5 RxJS 中的Operator 269
9．4．6 Angular 中的RxJS 273
9．5 小結(jié) 277

10 依賴注入 278
10．1 依賴注入介紹 279
10．2 Angular 依賴注入 282
10．2．1 概述 282
10．2．2 在組件中注入服務(wù) 285
10．2．3 在服務(wù)中注入服務(wù) 287
10．2．4 在模塊中注入服務(wù) 288
10．2．5 層級注入 290
10．2．6 注入到派生組件 295
10．2．7 限定方式的依賴注入 297
10．3 Provider 300
10．3．1 概述 300
10．3．2 Provider 注冊方式 302
10．4 擴展閱讀 305
10．5 小結(jié) 308

11 路由 309
11．1 概述 309
11．2 基本用法 311
11．2．1 路由配置 311
11．2．2 創(chuàng)建根路由模塊 312
11．2．3 添加RouterOutlet 指令 312
11．3 路由策略 313
11．3．1 HashLocationStrategy 介紹 314
11．3．2 PathLocationStrategy 介紹 315
11．4 路由跳轉(zhuǎn) 316
11．4．1 使用指令跳轉(zhuǎn) 317
11．4．2 使用代碼跳轉(zhuǎn) 319
11．5 路由參數(shù) 321
11．5．1 Path 參數(shù) 321
11．5．2 Query 參數(shù) 324
11．5．3 Matrix 參數(shù) 326
11．6 子路由和附屬Outlet 326
11．6．1 子路由 326
11．6．2 附屬Outlet 328
11．7 路由攔截 330
11．7．1 激活攔截與反激活攔截 330
11．7．2 數(shù)據(jù)預(yù)加載攔截 334
11．8 模塊的延遲加載 337
11．8．1 延遲加載實現(xiàn) 337
11．8．2 模塊預(yù)加載 339
11．8．3 模塊加載攔截 341
11．9 小結(jié) 342

12 測試 343
12．1 概述 343
12．2 單元測試 344
12．2．1 概述 344
12．2．2 常用測試框架 345
12．2．3 Jasmine 介紹 345
12．2．4 Karma 介紹 350
12．2．5 Karma 結(jié)合Jasmine 測試 350
12．3 Angular 單元測試 355
12．3．1 概述 355
12．3．2 獨立單元測試 358
12．3．3 測試工具集 362
12．4 端到端測試 370
12．4．1 概述 370
12．4．2 Protractor 介紹 371
12．5 小結(jié) 374

第三部分實戰(zhàn)篇
13 問卷調(diào)查系統(tǒng)簡介 376
13．1 項目背景 376
13．2 主要特性 377
13．2．1 首頁和幫助頁 378
13．2．2 問卷編輯頁 378
13．2．3 我的問卷頁 378
13．2．4 用戶管理頁 379
13．3 產(chǎn)品設(shè)計 379
13．4 小結(jié) 380

14 項目起步 381
14．1 Angular CLI 381
14．1．1 簡介 381
14．1．2 常用命令介紹 382
14．2 其他技術(shù)選型 391
14．2．1 UI 樣式庫 391
14．2．2 后端服務(wù)器 391
14．3 環(huán)境搭建 392
14．3．1 搭建前端環(huán)境 392
14．3．2 引入樣式庫 393
14．3．3 搭建后端環(huán)境 394
14．4 目錄結(jié)構(gòu)介紹 396
14．5 首頁開發(fā) 397
14．6 導(dǎo)航欄開發(fā) 401
14．7 小結(jié) 402

15 問卷編輯模塊 403
15．1 概述 403
15．1．1 特性管理模塊 403
15．1．2 功能設(shè)計 406
15．1．3 數(shù)據(jù)模型 407
15．2 問卷編輯模塊開發(fā) 410
15．2．1 問題選擇組件 410
15．2．2 問題組件 414
15．2．3 問卷組件 425
15．2．4 問卷服務(wù) 431
15．2．5 問卷大綱組件 438
15．3 小結(jié) 441

16 我的問卷模塊 442
16．1 問卷列表 443
16．1．1 問卷列表項 443
16．1．2 顯示問卷列表 445
16．1．3 顯示問卷詳情 447
16．2 問卷操作 449
16．2．1 發(fā)布后的問卷頁面 450
16．2．2 問卷操作組件 453
16．3 小結(jié) 456

17 用戶管理模塊 457
17．1 開發(fā)簡單注冊頁 458
17．2 表單控件組件 460
17．2．1 定義表單控件 460
17．2．2 校驗表單控件 461
17．2．3 表單安全 464
17．3 用戶注冊功能開發(fā) 465
17．3．1 用戶注冊服務(wù) 465
17．3．2 組件的邏輯 466
17．3．3 注冊接口開發(fā) 469
17．4 權(quán)限管理 470
17．5 小結(jié) 473

18 項目構(gòu)建和最佳實踐 475
18．1 項目構(gòu)建 475
18．1．1 代碼質(zhì)量檢查 475
18．1．2 測試 476
18．1．3 打包 478
18．1．4 容器化 479
18．2 最佳實踐 479
18．2．1 單一職責(zé) 480
18．2．2 命名約定 480
18．2．3 編碼約定 483
18．2．4 Angular 模塊約定 487
18．2．5 組件相關(guān)約定 487
18．2．6 指令相關(guān)約定 489
18．2．7 服務(wù)相關(guān)約定 490
18．2．8 其他 491
18．3 小結(jié) 492

第四部分延伸篇
19 移動開發(fā)框架：ionic 介紹與實戰(zhàn) 494
19．1 移動開發(fā) 494
19．1．1 背景介紹 494
19．1．2 四種開發(fā)模式 495
19．1．3 技術(shù)選型 495
19．2 ionic 平臺介紹 496
19．2．1 概覽 496
19．2．2 Cordova 498
19．2．3 環(huán)境搭建 499
19．2．4 組件開發(fā) 501
19．2．5 路由和導(dǎo)航 503
19．3 ionic Native 507
19．3．1 插件介紹 507
19．3．2 插件使用 508
19．3．3 插件開發(fā) 509
19．4 樣式和主題 509
19．4．1 平臺樣式 509
19．4．2 主題 511
19．4．3 全局變量 512
19．4．4 工具屬性 513
19．4．5 Iconfont 514
19．5 ionic CLI 515
19．6 通訊錄實例 518
19．6．1 項目搭建 519
19．6．2 主頁面 520
19．7 小結(jié) 525

20 服務(wù)端渲染 527
20．1 概述 527
20．2 客戶端渲染的局限性 528
20．3 服務(wù)端渲染的局限性 529
20．4 Angular Universal 介紹 531
20．5 將通訊錄例子改造成Angular Universal 的方式 533
20．6 服務(wù)端渲染的進階實踐 540
20．6．1 服務(wù)端數(shù)據(jù)的同步 541
20．6．2 使用依賴注入解決環(huán)境差異 544
20．6．3 使用Preboot 解決事件脫節(jié) 546
20．7 小結(jié) 549