揭秘Angular（第2版）

第一部分入門(mén)篇
1 前端風(fēng)云 2
1．1 故事的起點(diǎn) 2
1．2 AJAX 王者歸來(lái) 3
1．3 工具庫(kù)的流行 3
1．4 百家爭(zhēng)鳴 3
1．5 走進(jìn)前端新時(shí)代 4
1．6 小結(jié) 6

2 Angular 簡(jiǎn)介 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ù)語(yǔ)義版本 11
2．1．6 開(kāi)發(fā)語(yǔ)言之選 13
2．2 Angular 簡(jiǎn)述 14
2．2．1 核心概念 14
2．2．2 平臺(tái)簡(jiǎn)介 16
2．2．3 平臺(tái)亮點(diǎn) 18
2．3 小結(jié) 19

3 TypeScript 入門(mén) 20
3．1 TypeScript 概述 20
3．1．1 概述 20
3．1．2 安裝 21
3．2 基本類(lèi)型 22
3．2．1 布爾類(lèi)型 22
3．2．2 數(shù)字類(lèi)型 22
3．2．3 字符串類(lèi)型 23
3．2．4 數(shù)組類(lèi)型 23
3．2．5 元組類(lèi)型 23
3．2．6 枚舉類(lèi)型 23
3．2．7 任意值類(lèi)型 24
3．2．8 null 和undefined 24
3．2．9 void 類(lèi)型 25
3．2．10 never 類(lèi)型 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 默認(rèn)參數(shù) 31
3．4．4 剩余參數(shù) 32
3．4．5 函數(shù)重載 32
3．4．6 箭頭函數(shù) 33
3．5 類(lèi) 34
3．5．1 類(lèi)的例子 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 抽象類(lèi) 38
3．6 模塊 39
3．6．1 概述 39
3．6．2 模塊導(dǎo)出方式 39
3．6．3 模塊導(dǎo)入方式 40
3．6．4 模塊的默認(rèn)導(dǎo)出 41
3．6．5 模塊設(shè)計(jì)原則 42
3．7 接口 44
3．7．1 概述 44
3．7．2 屬性類(lèi)型接口 44
3．7．3 函數(shù)類(lèi)型接口 45
3．7．4 可索引類(lèi)型接口 46
3．7．5 類(lèi)類(lèi)型接口 46
3．7．6 接口擴(kuò)展 47
3．8 裝飾器 48
3．8．1 概述 48
3．8．2 方法裝飾器 49
3．8．3 類(lèi)裝飾器 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 展望未來(lái) 59
3．11 小結(jié) 59

4 快速入門(mén) 60
4．1 Hello World 例子 60
4．1．1 準(zhǔn)備工作 60
4．1．2 構(gòu)建項(xiàng)目 61
4．2 通訊錄例子 66
4．2．1 背景介紹 66
4．2．2 架構(gòu)設(shè)計(jì) 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 組件化標(biāo)準(zhǔn) 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)測(cè) 130
6．6．1 數(shù)據(jù)變化的源頭 131
6．6．2 變動(dòng)通知機(jī)制 132
6．6．3 變化監(jiān)測(cè)的響應(yīng)處理 134
6．7 擴(kuò)展閱讀 140
6．7．1 元數(shù)據(jù)一覽表 140
6．7．2 元數(shù)據(jù)說(shuō)明 141
6．7．3 深入理解Zone．js 150
6．7．4 不依賴Zone．js 的Angular 154
6．8 小結(jié) 155

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

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

9 服務(wù)與RxJS 237
9．1 Angular 服務(wù) 237
9．1．1 概述 237
9．1．2 使用場(chǎng)景 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 對(duì)象 266
9．4．2 使用RxJS 處理復(fù)雜場(chǎng)景 266
9．4．3 RxJS 和Promise 的對(duì)比 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 層級(jí)注入 290
10．2．6 注入到派生組件 295
10．2．7 限定方式的依賴注入 297
10．3 Provider 300
10．3．1 概述 300
10．3．2 Provider 注冊(cè)方式 302
10．4 擴(kuò)展閱讀 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 延遲加載實(shí)現(xiàn) 337
11．8．2 模塊預(yù)加載 339
11．8．3 模塊加載攔截 341
11．9 小結(jié) 342

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

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

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

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

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

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

18 項(xiàng)目構(gòu)建和最佳實(shí)踐 475
18．1 項(xiàng)目構(gòu)建 475
18．1．1 代碼質(zhì)量檢查 475
18．1．2 測(cè)試 476
18．1．3 打包 478
18．1．4 容器化 479
18．2 最佳實(shí)踐 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 移動(dòng)開(kāi)發(fā)框架：ionic 介紹與實(shí)戰(zhàn) 494
19．1 移動(dòng)開(kāi)發(fā) 494
19．1．1 背景介紹 494
19．1．2 四種開(kāi)發(fā)模式 495
19．1．3 技術(shù)選型 495
19．2 ionic 平臺(tái)介紹 496
19．2．1 概覽 496
19．2．2 Cordova 498
19．2．3 環(huán)境搭建 499
19．2．4 組件開(kāi)發(fā) 501
19．2．5 路由和導(dǎo)航 503
19．3 ionic Native 507
19．3．1 插件介紹 507
19．3．2 插件使用 508
19．3．3 插件開(kāi)發(fā) 509
19．4 樣式和主題 509
19．4．1 平臺(tái)樣式 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 通訊錄實(shí)例 518
19．6．1 項(xiàng)目搭建 519
19．6．2 主頁(yè)面 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ù)端渲染的進(jìn)階實(shí)踐 540
20．6．1 服務(wù)端數(shù)據(jù)的同步 541
20．6．2 使用依賴注入解決環(huán)境差異 544
20．6．3 使用Preboot 解決事件脫節(jié) 546
20．7 小結(jié) 549