目    錄

 
第Ⅰ部分  Angular基礎知識
第1章  準備工作   3
1.1  需要了解什麼   3
1.2  本書結構   3
1.2.1  第Ⅰ部分：Angular基礎知識   3
1.2.2  第Ⅱ部分：Angular詳解   3
1.2.3  第Ⅲ部分：Angular高級功能   3
1.3  大量示例   4
1.4  獲取示例代碼   5
1.5  如何搭建開發環境   5
1.6  聯繫作者   5
1.7  本章小結   5
第2章  個Angular應用程序   7
2.1  準備開發環境   7
2.1.1  安裝Node.js   7
2.1.2  安裝angular-cli包   8
2.1.3  安裝Git   8
2.1.4  安裝編輯器   8
2.1.5  安裝瀏覽器   9
2.2  創建並準備項目   9
2.2.1  創建項目   9
2.2.2  添加Bootstrap CSS包   9
2.2.3  啟動開發工具   10
2.2.4  編輯HTML文件   10
2.3  向項目中添加Angular功能   12
2.3.1  準備HTML文件   12
2.3.2  創建數據模型   12
2.3.3  創建模板   14
2.3.4  準備組件   14
2.3.5  將應用程序組合起來   16
2.4  向示例應用程序中添加功能   17
2.4.1  添加待辦事項表格   17
2.4.2  創建雙向數據綁定   19
2.4.3  添加待辦事項   21
2.5  本章小結   23
第3章  將Angular放在上下文中   25
3.1  理解Angular的強項   25
3.1.1  往返式應用程序和單頁式應用程序   25
3.1.2  Angular與jQuery的比較   26
3.2  比較Angular、React和Vue.js   27
3.3  理解MVC模式   27
3.3.1  理解模型   28
3.3.2  理解控制器/組件   29
3.3.3  理解視圖/模板   30
3.4  理解RESTful服務   30
3.5  常見的設計缺陷   31
3.5.1  將邏輯放錯地方   31
3.5.2  數據存儲采用的數據格式   32
3.5.3  足夠的知識足以制造麻煩   32
3.6  本章小結   32
第4章  HTML和CSS入門   33
4.1  準備示例項目   33
4.2  理解HTML   34
4.2.1  素   35
4.2.2  理解屬性   35
4.2.3  應用無值屬性   35
4.2.4  在屬性中引用字面量   35
4.2.5 素內容   36
4.2.6  理解文檔結構   36
4.3  理解Bootstrap   37
4.3.1  應用基本的Bootstrap類   37
4.3.2  使用Bootstrap樣式化表格   40
4.3.3  使用Bootstrap創建表單   41
4.3.4  使用Bootstrap創建網格   42
4.4  本章小結   46
第5章  JavaScript與TypeScript：第1部分   47
5.1  準備示例項目   48
5.2  使用語句   49
5.3  定義和使用函數   50
5.3.1  定義帶參數的函數   51
5.3.2  定義返回結果的函數   52
5.3.3  將函數用作其他函數的實參   52
5.4  使用變量和類型   53
5.4.1  使用變量閉包   54
5.4.2  使用基本數據類型   54
5.5  使用JavaScript操作符   56
5.5.1  使用條件語句   56
5.5.2  相等操作符和恆等操作符   57
5.5.3  顯式類型轉換   58
5.6  處理數組   59
5.6.1  使用數組字面量   59
5.6.2  數組內容的讀取和修改   59
5.6.3  遍歷數組內容   60
5.6.4  spread操作符   60
5.6.5  使用內置數組方法   61
5.7  本章小結   62
第6章  JavaScript與TypeScript：第2部分   63
6.1  準備示例項目   63
6.2  使用對像   63
6.2.1  使用對像字面量   64
6.2.2  將函數用作方法   64
6.2.3  定義類   65
6.3  處理JavaScript模塊   67
6.4  有用的TypeScript特性   70
6.4.1  使用類型注解   70
6.4.2 組   74
6.4.3  使用可索引類型   74
6.4.4  使用訪問修飾符   74
6.5  本章小結   75
第7章  SportsStore：一個真實的應用程序   77
7.1  準備項目   77
7.1.1  安裝額外的NPM軟件包   77
7.1.2  準備RESTful Web服務   78
7.1.3  準備HTML文件   80
7.1.4  創建文件夾結構   80
7.1.5  運行示例應用程序   80
7.1.6  啟動RESTful Web服務   81
7.2  準備Angular項目功能   81
7.2.1  更新根組件   81
7.2.2  更新根模塊   82
7.2.3  檢查引導文件   82
7.3  啟動數據模型   83
7.3.1  創建模型類   83
7.3.2  創建虛擬數據源   83
7.3.3  創建模型存儲庫   84
7.3.4  創建功能模塊   85
7.4  啟動商店   85
7.4.1  創建Store組件和模板   85
7.4.2  創建商店功能模塊   86
7.4.3  更新根組件和根模塊   87
7.5  添加商店功能：產品詳情   88
7.5.1  顯示產品詳情   88
7.5.2  添加類別選擇   89
7.5.3  添加產品分頁功能   90
7.5.4  創建自定義指令   92
7.6  本章小結   95
第8章  SportsStore：訂單和結賬   97
8.1  準備示例應用程序   97
8.2  創建購物車   97
8.2.1  創建購物車模型   97
8.2.2  創建購物車概覽組件   98
8.2.3  將購物車集成到商店中   100
8.3  添加URL路由   102
8.3.1  創建購物車詳情和結賬組件   102
8.3.2  創建和應用路由配置   103
8.3.3  應用程序導航   104
8.3.4  路由守衛   106
8.4  完成購物車詳情功能   107
8.5  處理訂單   109
8.5.1  擴展模型   109
8.5.2  收集訂單詳情   111
8.6  使用RESTful Web服務   114
8.7  本章小結   115
第9章  SportsStore：管理   117
9.1  準備示例應用程序   117
9.1.1  創建模塊   117
9.1.2  配置URL路由繫統   119
9.1.3  導航到管理URL   120
9.2  實現身份驗證   121
9.2.1  理解身份驗證繫統   121
9.2.2  擴展數據源   122
9.2.3  創建身份驗證服務   122
9.2.4  啟用身份驗證   123
9.3  擴展數據源和存儲庫   125
9.4  創建管理功能結構   128
9.4.1  創建占位符組件   128
9.4.2  準備常用內容和功能模塊   129
9.4.3  實現產品功能   130
9.4.4  實現訂單功能   133
9.5  本章小結   135
第10章  SportsStore：漸進式功能和部署   137
10.1  準備示例應用程序   137
10.2  添加漸進式特性   137
10.2.1  安裝PWA包   137
10.2.2  緩存數據URL   137
10.2.3  響應對連接的更改   138
10.3  為部署準備應用程序   140
10.3.1  創建數據文件   140
10.3.2  創建服務器   140
10.3.3  更改存儲庫類中的Web服務URL   142
10.4  構建和測試應用程序   142
10.5  將SportsStore應用程序容器化   144
10.5.1  安裝Docker   144
10.5.2  準備應用程序   144
10.5.3  創建Docker容器   144
10.5.4  運行應用程序   145
10.6  本章小結   146
第Ⅱ部分  Angular詳解
第11章  創建Angular項目   149
11.1  創建新的Angular項目   149
11.2  了解項目結構   150
11.2.1  了解src文件夾   151
11.2.2  了解包文件夾   152
11.3  使用開發工具   154
11.3.1  了解開發HTTP服務器   155
11.3.2  了解熱模型替換   155
11.3.3  使用linter   156
11.4  理解Angular應用程序是如何工作的   158
11.4.1  理解HTML文檔   158
11.4.2  理解應用程序引導   158
11.4.3  理解Angular根模塊   159
11.4.4  理解Angular組件   160
11.4.5  理解內容顯示   160
11.5  在Angular項目中開始開發   161
11.5.1  添加Bootstrap CSS框架   161
11.5.2  創建數據模型   161
11.5.3  創建模板和根組件   164
11.5.4  配置根Angular模塊   165
11.6  本章小結   165
第12章  使用數據綁定   167
12.1  準備示例項目   167
12.2  理解單向數據綁定   168
12.2.1  理解綁定目標   169
12.2.2  理解表達式   170
12.2.3  理解括號   171
12.2.4  理素   171
12.3  使用標準屬性和屬性綁定   172
12.3.1  使用標準屬性綁定   172
12.3.2  使用字符串插入綁定   173
12.3.3 素屬性綁定   174
12.4  設置CSS類和樣式   174
12.4.1  使用類綁定   175
12.4.2  使用樣式綁定   178
12.5  更新應用程序的數據   180
12.6  本章小結   182
第13章  使用內置指令   183
13.1  準備示例項目   183
13.2  使用內置指令   185
13.2.1  使用ngIf指令   185
13.2.2  使用ngSwitch指令   187
13.2.3  使用ngFor指令   189
13.2.4  使用ngTemplateOutlet指令   195
13.3  理解單向數據綁定的限制   197
13.3.1  使用冪等表達式   197
13.3.2  理解表達式上下文   199
13.4  本章小結   201
第14章  使用事件和表單   203
14.1  準備示例項目   203
14.1.1  導入表單模塊   203
14.1.2  準備組件和模板   204
14.2  使用事件綁定   205
14.2.1  理解動態定義的屬性   206
14.2.2  使用事件數據   208
14.2.3  使用模板引用變量   209
14.3  使用雙向數據綁定   210
14.4  處理表單   212
14.4.1  向示例應用程序添加表單   213
14.4.2  添加表單數據驗證   214
14.4.3  驗證整個表單   221
14.5  使用基於模型的表單   226
14.5.1  啟用基於模型的表單功能   226
14.5.2  定義表單模型類   226
14.5.3  使用模型進行驗證   229
14.5.4  根據模素   231
14.6  創建自定義表單驗證器   232
14.7  本章小結   234
第15章  創建屬性指令   235
15.1  準備示例項目   235
15.2  創建簡單的屬性指令   237
15.3  在指令中訪問應用程序數據   239
15.3.1  讀素屬性   239
15.3.2  創建數據綁定輸入屬性   241
15.3.3  響應輸入屬性的變化   243
15.4  創建自定義事件   244
15.5  創素綁定   247
15.6  素上創建雙向綁定   248
15.7  導出指令用於模板變量   250
15.8  本章小結   251
第16章  創建結構型指令   253
16.1  準備示例項目   253
16.2  創建簡單的結構型指令   254
16.2.1  實現結構型指令類   255
16.2.2  啟用結構型指令   257
16.2.3  使用結構型指令的簡潔語法   258
16.3  創建迭代結構型指令   259
16.3.1  提供額外的上下文數據   261
16.3.2  使用簡潔的結構語法   262
16.3.3  處理屬性級數據變更   263
16.3.4  處理集合級數據變更   264
16.4  查素內容   271
16.4.1  查詢多個子內容   274
16.4.2  接收查詢變更通知   275
16.5  本章小結   276
第17章  理解組件   277
17.1  準備示例項目   278
17.2  使用組件來組織應用程序   278
17.2.1  創建新組件   279
17.2.2  定義模板   282
17.2.3  完成組件的重組   289
17.3  使用組件樣式   289
17.3.1  定義外部組件樣式   290
17.3.2  使用高級樣式特性   291
17.4  查詢模板內容   296
17.5  本章小結   298
第18章  使用和創建管道   299
18.1  準備示例項目   299
18.2  理解管道   302
18.3  創建一個自定義管道   303
18.3.1  注冊自定義管道   303
18.3.2  應用自定義管道   304
18.3.3  組合管道   305
18.3.4  創建非純管道   306
18.4  使用內置管道   309
18.4.1  格式化數值   309
18.4.2  格式化貨幣值   311
18.4.3  格式化百分比   313
18.4.4  格式化日期   314
18.4.5  改變字符串大小寫   317
18.4.6  將數據序列化為JSON數據   317
18.4.7  將數據數組切片   318
18.5  本章小結   319
第19章  使用服務   321
19.1  準備示例項目   321
19.2  理解對像分發問題   322
19.2.1  問題的提出   322
19.2.2  利用依賴注入將對像作為服務分發   326
19.2.3  在其他構造塊中聲明依賴   330
19.3  理解測試隔離問題   335
19.4  完成服務的融入   338
19.4.1  更新根組件和模板   338
19.4.2  更新子組件   339
19.5  本章小結   340
第20章  使用服務提供程序   341
20.1  準備示例項目   342
20.2  使用服務提供程序   343
20.2.1  使用類提供程序   345
20.2.2  使用值提供程序   350
20.2.3  使用工廠提供程序   351
20.2.4  使用已有的服務提供程序   353
20.3  使用本地提供程序   354
20.3.1  理解單個服務對像的局限性   354
20.3.2  在組件中創建本地提供程序   355
20.3.3  理解服務提供程序的替代方案   357
20.3.4  控制依賴解析   360
20.4  本章小結   361
第21章  使用和創建模塊   363
21.1  準備示例項目   363
21.2  理解根模塊   365
21.2.1  理解imports屬性   366
21.2.2  理解declarations 屬性   366
21.2.3  理解providers屬性   367
21.2.4  理解bootstrap屬性   367
21.3  創建功能模塊   368
21.3.1  創建模型模塊   369
21.3.2  創建實用工具功能模塊   373
21.3.3  用組件創建一個功能模塊   377
21.4  本章小結   380
第Ⅲ部分  Angular高級功能
第22章  創建示例項目   383
22.1  啟動示例項目   383
22.1.1  添加和配置Bootstrap CSS包   383
22.1.2  創建項目結構   383
22.2  創建模型模塊   384
22.2.1  創建產品數據類型   384
22.2.2  創建數據源和存儲庫   384
22.2.3  完成模型模塊   385
22.3  創建核心模塊   385
22.3.1  創建共享狀態服務   386
22.3.2  創建表格組件   386
22.3.3  創建表單組件   387
22.4.4  完成核心模塊   389
22.4  創建消息模塊   389
22.4.1  創建消息模型和服務   389
22.4.2  創建組件和模板   390
22.4.3  完成消息模塊   390
22.5  完成項目   391
22.6  本章小結   392
第23章  使用Reactive Extensions   393
23.1  準備示例項目   394
23.2  理解問題   394
23.3  使用Reactive Extensions解決問題   396
23.3.1  理解Observable   396
23.3.2  理解Observer   398
23.3.3  理解Subject   399
23.4  使用async管道   400
23.5  擴展應用程序功能模塊   402
23.6  更進一步   404
23.6.1  過濾事件   404
23.6.2  轉換事件   405
23.6.3  隻接收不同的事件   407
23.6.4  獲取和忽略事件   409
23.7  本章小結   410
第24章  生成異步HTTP請求   411
24.1  準備示例項目   411
24.1.1  配置模型功能模塊   412
24.1.2  創建數據文件   412
24.1.3  更新表單組件   413
24.1.4  運行示例項目   413
24.2  理解RESTful Web服務   414
24.3  替換靜態數據源   414
24.3.1  創建新的數據源服務   414
24.3.2  配置數據源   416
24.3.3  使用REST數據源   416
24.3.4  保存和刪除數據   417
24.4  加強HTTP請求   419
24.5  生成跨域請求   420
24.6  配置請求頭   422
24.7  處理錯誤   424
24.7.1  生成用戶可使用的消息   425
24.7.2  處理錯誤   426
24.8  本章小結   427
第25章  路由與導航：第1部分   429
25.1  準備示例項目   429
25.2  開始學習路由   431
25.2.1  創建路由配置   431
25.2.2  創建路由組件   433
25.2.3  更新根模塊   433
25.2.4  完成配置   433
25.2.5  添加導航鏈接   434
25.2.6  理解路由的效果   436
25.3  完成路由實現   437
25.3.1  在組件中處理路由變化   438
25.3.2  使用路由參數   439
25.3.3  在代碼中導航   444
25.3.4  接收導航事件   445
25.3.5  刪除事件綁定和支持代碼   446
25.4  本章小結   448
第26章  路由與導航：第2部分   449
26.1  準備示例項目   449
26.2  使用通配符和重定向   454
26.2.1  在路由中使用通配符   454
26.2.2  在路由中使用重定向   455
26.3  在組件內部導航   456
26.3.1  響應正在發生的路由變化   457
26.3.2  為活動路由設置不同樣式的鏈接   459
26.3.3  修復All按鈕   461
26.4  創建子路由   462
26.4.1  創建子路由出口   463
26.4.2  從子路由訪問參數   464
26.5  本章小結   467
第27章  路由與導航：第3部分   469
27.1  準備示例項目   469
27.2  守衛路由   470
27.2.1  使用解析器推遲導航   470
27.2.2  避免帶有守衛的導航   476
27.3  動態加載功能模塊   484
27.3.1  創建一個簡單的功能模塊   484
27.3.2  動態加載模塊   485
27.3.3  守衛動態模塊   488
27.4  指定命名出口   490
27.4.1  創建附加素   490
27.4.2  在使用多個出口的情況下導航   491
27.5  本章小結   493
第28章  使用動畫   495
28.1  準備示例項目   496
28.1.1  禁用HTTP延遲   496
28.1.2  簡化表格模板和路由配置   496
28.2  開始學習Angular動畫   498
28.2.1  啟用動畫模塊   498
28.2.2  創建動畫   499
28.2.3  應用動畫   501
28.2.4  測試動畫效果   503
28.3  理解內置的動畫狀態   504
28.4 素過渡   505
28.4.1  為內置狀態創建過渡   505
28.4.2  控制動畫的過渡   506
28.5  理解動畫樣式組   510
28.5.1  在可重用的分組中定義公共樣式   510
28.5.2 素變形   511
28.5.3  應用CSS框架樣式   512
28.6  本章小結   514
第29章  Angul測試   515
29.1  準備示例項目   516
29.2  創建一個簡測試   517
29.3  使用Jasmine測試   518
29.4  測試Angular組件   519
29.4.1  使用TestBed類完成工作   519
29.4.2  測試數據綁定   522
29.4.3  測試帶有外部模板的組件   523
29.4.4  測試組件事件   525
29.4.5  測試輸出屬性   526
29.4.6  測試輸入屬性   528
29.4.7  測試異步操作   529
29.5  測試Angular指令   531
29.6  本章小結   532

譯  者  序



在Web開發領域，一般使用HTML作為前素的聲明式語言，使用CSS技術作為展示樣式的描述語言，JavaScript作為業務處理交互的命令式語言。而構建非常復雜的Web應用時，純粹而有限的HTML就顯得非常不足，JavaScript本身也會隨著項目代碼量的膨脹而變得難以維護和管理，研發工期和成本也會隨之難以控制。此時，一般使用類庫(如jQuery、Dojo等)或框架(如Backbone、Ember和ExtJS等)來提升開發效率，縮短項目的工期和降低成本，方便後續的維護和管理。
 而AngularJS不僅是一個理念先進的前端開發框架，更是一種端對端的解決方案，已經被用於Google的多款產品中。AngularJS遵從架構設計中的MVC模式，提倡展現、數據和邏輯處理組件的松耦合(類似Flex和WPF)。AngularJS通過指令技術對傳統HTML實現了自然擴展，通過編譯技術實現了數據模型與展現視圖的雙向自動同步，消除了前端開發中繁雜的DOM操作。後通過模塊化設計解決了JS代碼管理維護和按需加載的問題，提高了廣大前端程序員以及後端程序員的生產效率。而且這種解耦本身，也對前端的自動化測試技術提供了良好的支持。
AngularJS誕生於2009年，由Misko Hevery 和Adam Abrons創建，後為Google所收購。AngularJS有許多特性，為核心的是：MVVM、模塊化、自動化雙向數據綁定、語義化標簽、依賴注入等。AngularJS 是專門為應用程序設計的 HTML。
Angular 2.0是2014年10月22日在ng-Europe會議上發布的，該版本完全重寫了AngularJS。為避免開發人員的困惑，開發團隊宣布每個框架都應該使用單獨的術語，其中“AngularJS”指的是版本1。x版本和沒有“JS”的“Angular”指的是版本2及更高版本。
Angular 6於2018年5月4日發布。這是一個重要版本，它對底層框架的關注較少，考慮更多的是工具鏈，以及如何使Angular更易於在未來提高效率，如ng update、ng add、Angular Elements、Angular Material CDK Components、Angular Material Starter Components、CLI Workspaces、Library Support、Tree Shakable Providers、Animations Performance Improvements和RxJS v6。
Angular 7讓Angular變得更出色，為順應現代趨勢增加了比特幣挖掘、虛擬滾動、拖放等功能。
《Angular高級編程(第3版)》分為三個部分，每部分涵蓋一組相關的主題。《Angular高級編程(第3版)》第Ⅰ部分回顧了一些關鍵技術的基本知識，包括HTML、CSS和TypeScript，並展示如何構建個Angular應用程序。第Ⅱ部分介紹Angular為構建應用程序提供的構造塊，依次描述所有這些構造塊。深入描述Angular包含的很多內置功能，以及豐富的Angular自定義選項。第Ⅲ部分介紹如何使用高級功能來創建更復雜、可擴展的應用程序。演示如何在Angular應用程序中進行異步HTTP請求，如何使用URL路由在應用程序中導航，以及在應用程序的狀態發生變化時如何使H素具有動畫效果。
《Angular高級編程(第3版)》堪稱Angular領域的裡程碑式著作，涵蓋了關於Angular的幾乎所有內容。《Angular高級編程(第3版)》平實、通俗的講解，豐富、翔實的示例，遞進、嚴密的組織，可以讓新手毫無壓力地登堂入室，迅速吸取新一代Web應用開發的精髓。對於具有相關經驗的用戶，《Angular高級編程(第3版)》對Angular概念和技術細節的全面剖析，以及引人入勝、切中肯綮的講解，將幫助讀者徹底掌握這個框架，在自己職業技術修煉之路上更進一步。
這裡要感謝清華大學出版社的編輯們，他們為《Angular高級編程(第3版)》的翻譯投入了巨大熱情並付出了很多心血。沒有他們的幫助和鼓勵，《Angular高級編程(第3版)》不可能順利付梓。
對於這本經典之作，譯者本著“誠惶誠恐”的態度，在翻譯過程中力求“信、達、雅”，但是鋻於譯者水平有限，錯誤和失誤在所難免，如有任何意見和建議，請不吝指正。
譯者