Angular 高級編程, 4/e (Pro Angular 9: Build Powerful and Dynamic Web Apps)

Adam Freeman

一位經驗豐富的IT專家，曾在多家公司擔任高級職位，
退休前擔任一家全球銀行的首席技術官和首席運營官。
退休之後，熱衷於寫作和長跑。

第Ⅰ部分  Angular基礎知識
第1章  準備工作   3
1.1  需要瞭解什麽   3
1.2  本書結構   3
1.2.1  第Ⅰ部分：Angular基礎知識   3
1.2.2  第Ⅱ部分：Angular詳解   4
1.2.3  第Ⅲ部分：Angular高級功能   4
1.3  本書不介紹什麽   4
1.4  Angular開發需要什麽軟件   4
1.5  如何設置開發環境   4
1.6  學習示例時遇到問題怎麽辦   4
1.7  如果在書中發現錯誤怎麽辦   5
1.8  大量示例   5
1.9  獲取示例代碼   6
1.10  聯系作者   6
1.11  如果你真的很喜歡這本書   7
1.12  如果你不喜歡這本書   7
1.13  本章小結   7

第2章  第一個Angular應用程序   9
2.1  準備開發環境   9
2.1.1  安裝Node.js   9
2.1.2  安裝angular-cli包   10
2.1.3  安裝編輯器   11
2.1.4  安裝瀏覽器   11
2.2  創建並準備項目   11
2.2.1  創建項目   11
2.2.2  啟動開發工具   12
2.3  向項目中添加Angular功能   13
2.3.1  創建數據模型   14
2.3.2  向用戶顯示數據   16
2.3.3  更新組件   17
2.3.4  設置HTML元素的樣式   20
2.3.5  顯示待辦事項列表   21
2.3.6  創建雙向數據綁定   24
2.3.7  添加待辦事項   26
2.3.8  顯示完成的待辦事項   29
2.4  本章小結   31

第3章  將Angular放在上下文中   33
3.1  理解Angular的強項   33
3.2  比較Angular、React和Vue.js   34
3.3  理解MVC模式   35
3.3.1  理解模型   36
3.3.2  理解控制器/組件   37
3.3.3  理解視圖/模板   38
3.4  理解RESTful服務   38
3.5  常見的設計缺陷   39
3.5.1  將邏輯放錯地方   40
3.5.2  數據存儲採用的數據格式   40
3.5.3  足夠的知識足以製造麻煩   40
3.6  本章小結   40

第4章  HTML和CSS入門   43
4.1  準備示例項目   43
4.2  理解HTML   45
4.2.1  理解空元素   45
4.2.2  理解屬性   45
4.2.3  應用無值屬性   46
4.2.4  在屬性中引用字面量   46
4.2.5  理解元素內容   46
4.2.6  理解文檔結構   47
4.3  理解Bootstrap   48
4.3.1  應用基本的Bootstrap類   48
4.3.2  使用Bootstrap樣式化表格   51
4.3.3  使用Bootstrap創建表單   52
4.3.4  使用Bootstrap創建網格   53
4.4  本章小結   58

第5章  JavaScript與TypeScript：第1部分   59
5.1  準備示例項目   60
5.2  使用語句   61
5.3  定義和使用函數   62
5.3.1  定義帶形參的函數   63
5.3.2  定義返回結果的函數   64
5.3.3  將函數用作其他函數的實參   64
5.4  使用變量和類型   65
5.4.1  使用變量閉包   67
5.4.2  使用基本數據類型   67
5.5  使用JavaScript操作符   69
5.5.1  使用條件語句   69
5.5.2  相等操作符和恆等操作符   70
5.5.3  顯式類型轉換   71
5.6  處理數組   72
5.6.1  使用數組字面量   73
5.6.2  數組內容的讀取和修改   73
5.6.3  遍歷數組內容   73
5.6.4  spread操作符   74
5.6.5  使用內置數組方法   75
5.7  本章小結   76

第6章  JavaScript與TypeScript：第2部分   77
6.1  準備示例項目   77
6.2  使用對象   78
6.2.1  使用對象字面量   78
6.2.2  將函數用作方法   79
6.2.3  定義類   79
6.3  處理JavaScript模塊   82
6.4  有用的TypeScript特性   86
6.4.1  使用類型註解   86
6.4.2  使用元組   90
6.4.3  使用可索引類型   91
6.4.4  使用訪問修飾符   91
6.5  本章小結   92

第7章  SportsStore：一個真實的應用程序   93
7.1  準備項目   93
7.1.1  安裝額外的NPM軟件包   94
7.1.2  準備RESTful Web服務   95
7.1.3  準備HTML文件   97
7.1.4  創建文件夾結構   97
7.1.5  運行示例應用程序   98
7.1.6  啟動RESTful Web服務   98
7.2  準備Angular項目功能   98
7.2.1  更新根組件   98
7.2.2  更新根模塊   99
7.2.3  檢查引導文件   100
7.3  啟動數據模型   100
7.3.1  創建模型類   100
7.3.2  創建虛擬數據源   101
7.3.3  創建模型存儲庫   102
7.3.4  創建功能模塊   103
7.4  啟動商店   103
7.4.1  創建Store組件和模板   104
7.4.2  創建商店功能模塊   105
7.4.3  更新根組件和根模塊   106
7.5  添加商店功能：產品詳情   107
7.5.1  顯示產品詳情   107
7.5.2  添加類別選擇   108
7.5.3  添加產品分頁功能   110
7.5.4  創建自定義指令   112
7.6  本章小結   116

第8章  SportsStore：訂單和結賬   117
8.1  準備示例應用程序   117
8.2  創建購物車   117
8.2.1  創建購物車模型   117
8.2.2  創建購物車概覽組件   119
8.2.3  將購物車集成到商店中   120
8.3  添加URL路由   123
8.3.1  創建購物車詳情和結賬組件   124
8.3.2  創建和應用路由配置   124
8.3.3  應用程序導航   126
8.3.4  路由守衛   128
8.4  完成購物車詳情功能   130
8.5  處理訂單   133
8.5.1  擴展模型   133
8.5.2  收集訂單詳情   135
8.6  使用RESTful Web服務   138
8.7  本章小結   140

第9章  SportsStore：管理   141
9.1  準備示例應用程序   141
9.1.1  創建模塊   141
9.1.2  配置URL路由系統   144
9.1.3  導航到管理URL   145
9.2  實現身份驗證   146
9.2.1  理解身份驗證系統   146
9.2.2  擴展數據源   147
9.2.3  創建身份驗證服務   148
9.2.4  啟用身份驗證   149
9.3  擴展數據源和存儲庫   151
9.4  創建管理功能結構   155
9.4.1  創建占位符組件   155
9.4.2  準備常用內容和功能模塊   156
9.4.3  實現產品功能   158
9.4.4  實現訂單功能   162
9.5  本章小結   164

第10章  SportsStore：漸進式特性和部署   165
10.1  準備示例應用程序   165
10.2  添加漸進式特性   165
10.2.1  安裝PWA包   165
10.2.2  緩存數據URL   166
10.2.3  響應對連接的更改   167
10.3  為部署準備應用程序   169
10.3.1  創建數據文件   169
10.3.2  創建服務器   169
10.3.3  更改存儲庫類中的Web服務URL   171
10.4  構建和測試應用程序   172
10.5  將SportsStore應用程序容器化   174
10.5.1  安裝Docker   174
10.5.2  準備應用程序   174
10.5.3  創建Docker容器   174
10.5.4  運行應用程序   175
10.6  本章小結   177

第Ⅱ部分  Angular詳解
第11章  理解Angular項目和工具   181
11.1  創建新的Angular項目   181
11.2  瞭解項目結構   182
11.2.1  瞭解src文件夾   183
11.2.2  瞭解包文件夾   184
11.3  使用開發工具   187
11.3.1  瞭解開發HTTP服務器   187
11.3.2  瞭解構建過程   188
11.3.3  使用linter   192
11.4  理解Angular應用程序是如何工作的   194
11.4.1  理解HTML文檔   194
11.4.2  理解應用程序引導   195
11.4.3  理解Angular根模塊   196
11.4.4  理解Angular組件   197
11.4.5  理解內容顯示   197
11.5  瞭解生產構建過程   199
11.5.1  瞭解預編譯   199
11.5.2  瞭解差異加載   199
11.5.3  運行生產構建   201
11.6  在Angular項目中開始開發   201
11.6.1  創建數據模型   201
11.6.2  創建組件和模板   205
11.6.3  配置根Angular模塊   206
11.7  本章小結   207

第12章  使用數據綁定   209
12.1  準備示例項目   210
12.2  理解單向數據綁定   210
12.2.1  理解綁定目標   212
12.2.2  理解表達式   213
12.2.3  理解括號   214
12.2.4  理解宿主元素   214
12.3  使用標準屬性和屬性綁定   215
12.3.1  使用標準屬性綁定   215
12.3.2  使用字符串插入綁定   216
12.3.3  使用元素屬性綁定   217
12.4  設置CSS類和樣式   218
12.4.1  使用類綁定   218
12.4.2  使用樣式綁定   223
12.5  更新應用程序的數據   226
12.6  本章小結   228

第13章  使用內置指令   229
13.1  準備示例項目   230
13.2  使用內置指令   231
13.2.1  使用ngIf指令   232
13.2.2  使用ngSwitch指令   234
13.2.3  使用ngFor指令   236
13.2.4  使用ngTemplateOutlet指令   244
13.3  理解單向數據綁定的限制   246
13.3.1  使用冪等表達式   246
13.3.2  理解表達式上下文   249
13.4  本章小結   251

第14章  使用事件和表單   253
14.1  準備示例項目   254
14.1.1  導入表單模塊   254
14.1.2  準備組件和模板   254
14.2  使用事件綁定   255
14.2.1  使用事件數據   259
14.2.2  使用模板引用變量   260
14.3  使用雙向數據綁定   262
14.4  處理表單   265
14.4.1  向示例應用程序添加表單   265
14.4.2  添加表單數據驗證   267
14.4.3  驗證整個表單   275
14.5  使用基於模型的表單   281
14.5.1  啟用基於模型的表單功能   282
14.5.2  定義表單模型類   282
14.5.3  使用模型進行驗證   285
14.5.4  根據模型生成元素   288
14.6  創建自定義表單驗證器   289
14.7  本章小結   292

第15章  創建屬性指令   293
15.1  準備示例項目   294
15.2  創建簡單的屬性指令   296
15.3  在指令中訪問應用程序數據   298
15.3.1  讀取宿主元素屬性   298
15.3.2  創建數據綁定輸入屬性   300
15.3.3  響應輸入屬性的變化   303
15.4  創建自定義事件   305
15.5  創建宿主元素綁定   308
15.6  在宿主元素上創建雙向綁定   309
15.7  導出指令用於模板變量   312
15.8  本章小結   315

第16章  創建結構型指令   317
16.1  準備示例項目   318
16.2  創建簡單的結構型指令   319
16.2.1  實現結構型指令類   320
16.2.2  啟用結構型指令   322
16.2.3  使用結構型指令的簡潔語法   323
16.3  創建迭代結構型指令   324
16.3.1  提供額外的上下文數據   327
16.3.2  使用簡潔的結構語法   329
16.3.3  處理屬性級數據變更   330
16.3.4  處理集合級數據變更   331
16.4  查詢宿主元素內容   340
16.4.1  查詢多個子內容   344
16.4.2  接收查詢變更通知   346
16.5  本章小結   347

第17章  理解組件   349
17.1  準備示例項目   350
17.2  使用組件組織應用程序   350
17.2.1  創建新組件   351
17.2.2  定義模板   354
17.2.3  完成組件的重組   363
17.3  使用組件樣式   364
17.3.1  定義外部組件樣式   365
17.3.2  使用高級樣式特性   366
17.4  查詢模板內容   372
17.5  本章小結   374

第18章  使用和創建管道   375
18.1  準備示例項目   376
18.2  理解管道   378
18.3  創建一個自定義管道   380
18.3.1  註冊自定義管道   381
18.3.2  應用自定義管道   382
18.3.3  組合管道   383
18.3.4  創建非純管道   384
18.4  使用內置管道   387
18.4.1  格式化數值   388
18.4.2  格式化貨幣值   390
18.4.3  格式化百分比   393
18.4.4  格式化日期   394
18.4.5  改變字符串大小寫   397
18.4.6  將數據序列化為JSON數據   399
18.4.7  將數據數組切片   400
18.4.8  格式化鍵/值對   401
18.4.9  選擇值   402
18.4.10  復數化值   404
18.5  本章小結   405

第19章  使用服務   407
19.1  準備示例項目   408
19.2  理解對象分發問題   409
19.2.1  問題的提出   409
19.2.2  利用依賴註入將對象作為服務分發   414
19.2.3  在其他構造塊中聲明依賴   419
19.3  理解測試隔離問題   425
19.4  完成服務的融入   428
19.4.1  更新根組件和模板   429
19.4.2  更新子組件   430
19.5  本章小結   431

第20章  使用服務提供程序   433
20.1  準備示例項目   434
20.2  使用服務提供程序   435
20.2.1  使用類提供程序   438
20.2.2  使用值提供程序   445
20.2.3  使用工廠提供程序   447
20.2.4  使用已有的服務提供程序   449
20.3  使用本地提供程序   450
20.3.1  理解單個服務對象的局限性   450
20.3.2  在組件中創建本地提供程序   452
20.3.3  理解服務提供程序的替代方案   453
20.3.4  控制依賴解析   458
20.4  本章小結   459

第21章  使用和創建模塊   461
21.1  準備示例項目   461
21.2  理解根模塊   463
21.2.1  理解imports屬性   465
21.2.2  理解declarations屬性   465
21.2.3  理解providers屬性   466
21.2.4  理解bootstrap屬性   466
21.3  創建功能模塊   468
21.3.1  創建模型模塊   469
21.3.2  創建實用工具功能模塊   473
21.3.3  使用組件創建一個功能模塊   478
21.4  本章小結   482

第Ⅲ部分  Angular高級功能
第22章  創建示例項目   485
22.1  啟動示例項目   485
22.1.1  添加和配置Bootstrap CSS包   485
22.1.2  創建項目結構   486
22.2  創建模型模塊   486
22.2.1  創建產品數據類型   486
22.2.2  創建數據源和存儲庫   486
22.2.3  完成模型模塊   488
22.3  創建核心模塊   488
22.3.1  創建共享狀態服務   488
22.3.2  創建表格組件   489
22.3.3  創建表單組件   490
22.3.4  完成核心模塊   492
22.4  創建消息模塊   493
22.4.1  創建消息模型和服務   493
22.4.2  創建組件和模板   493
22.4.3  完成消息模塊   494
22.5  完成項目   495
22.6  本章小結   496

第23章  使用Reactive Extensions   497
23.1  準備示例項目   498
23.2  理解問題   498
23.3  使用Reactive Extensions解決問題   501
23.3.1  理解Observable   502
23.3.2  理解Observer   503
23.3.3  理解Subject   505
23.4  使用async管道   506
23.5  擴展應用程序功能模塊   509
23.6  更進一步   511
23.6.1  過濾事件   511
23.6.2  轉換事件   513
23.6.3  只接收不同的事件   515
23.6.4  獲取和忽略事件   517
23.7  本章小結   519

第24章  生成HTTP請求   521
24.1  準備示例項目   522
24.1.1  配置模型功能模塊   522
24.1.2  創建數據文件   523
24.1.3  更新表單組件   523
24.1.4  運行示例項目   524
24.2  理解RESTful Web服務   524
24.3  替換靜態數據源   525
24.3.1  創建新的數據源服務   525
24.3.2  配置數據源   527
24.3.3  使用REST數據源   527
24.3.4  保存和刪除數據   529
24.4  加強HTTP請求   531
24.5  生成跨域請求   533
24.6  配置請求頭   535
24.7  處理錯誤   537
24.7.1  生成用戶可使用的消息   538
24.7.2  處理錯誤   540
24.8  本章小結   541

第25章  路由與導航：第1部分   543
25.1  準備示例項目   544
25.2  開始學習路由   546
25.2.1  創建路由配置   546
25.2.2  創建路由組件   548
25.2.3  更新根模塊   548
25.2.4  完成配置   549
25.2.5  添加導航鏈接   550
25.2.6  理解路由的效果   552
25.3  完成路由實現   554
25.3.1  在組件中處理路由變化   554
25.3.2  使用路由參數   556
25.3.3  在代碼中導航   562
25.3.4  接收導航事件   564
25.3.5  刪除事件綁定和支持代碼   566
25.4  本章小結   568

第26章  路由與導航：第2部分   569
26.1  準備示例項目   569
26.2  使用通配符和重定向   575
26.2.1  在路由中使用通配符   575
26.2.2  在路由中使用重定向   577
26.3  在組件內部導航   578
26.3.1  響應正在發生的路由變化   579
26.3.2  為活動路由設置不同樣式的鏈接   581
26.3.3  修復All按鈕   584
26.4  創建子路由   585
26.4.1  創建子路由出口   586
26.4.2  從子路由訪問參數   588
26.5  本章小結   592

第27章  路由與導航：第3部分   593
27.1  準備示例項目   593
27.2  守衛路由   595
27.2.1 使用解析器推遲導航   595
27.2.2  避免帶有守衛的導航   601
27.3  動態加載功能模塊   613
27.3.1  創建一個簡單的功能模塊   613
27.3.2  動態加載模塊   614
27.3.3  守衛動態模塊   618
27.4  指定命名出口   620
27.4.1  創建附加的出口元素   621
27.4.2  在使用多個出口的情況下導航   623
27.5  本章小結   624

第28章  使用動畫   625
28.1  準備示例項目   626
28.1.1  禁用HTTP延遲   626
28.1.2  簡化表格模板和路由配置   627
28.2  開始學習Angular動畫   629
28.2.1  啟用動畫模塊   629
28.2.2  創建動畫   630
28.2.3  應用動畫   633
28.2.4  測試動畫效果   635
28.3  理解內置的動畫狀態   637
28.4  理解元素過渡   638
28.4.1  為內置狀態創建過渡   638
28.4.2  控制動畫的過渡   639
28.5  理解動畫樣式組   644
28.5.1  在可重用的分組中定義公共樣式   644
28.5.2  使用元素變形   646
28.5.3  應用CSS框架樣式   647
28.6  本章小結   649

第29章  Angular單元測試   651
29.1  準備示例項目   652
29.2  創建一個簡單的單元測試   654
29.3  使用Jasmine完成單元測試   655
29.4  測試Angular組件   656
29.4.1  使用TestBed類完成工作   656
29.4.2  測試數據綁定   660
29.4.3  測試帶有外部模板的組件   662
29.4.4  測試組件事件   663
29.4.5  測試輸出屬性   665
29.4.6  測試輸入屬性   667
29.4.7  測試異步操作   669
29.5  測試Angular指令   671
29.6  本章小結   673