Angular 應用程序開發指南

成龍

從事專業軟件開發工作近十年，擅長.NET/.NET Core 和Web 前端技術。
曾擔任北大青鳥培訓講師，樂於分享領域驅動設計的學習和運用經驗

第 1章 初識Angular 1
1．1 JavaScript的誕生 1
1．2 AngularJS的誕生 1
1．3 從AngularJS到Angular 2 2
1．4 從Angular 2到Angular 2
1．5 Angular是一個框架 3
1．6 小結 4

第 2章 準備工作 5
2．1 跨平臺的開發環境 5
2．1．1 Node．js 5
2．1．2 Visual Studio Code 8
2．1．3 TypeScript編譯器 10
2．1．4 調試TypeScript代碼 14
2．1．5 Express 18
2．2 瞭解模塊 22
2．2．1 通用模塊 22
2．2．2 ECMAScript模塊 31
2．3 小結 33

第3章 TypeScript語法基礎 34
3．1 基礎概念 34
3．1．1 模塊 34
3．1．2 變量和常量 39
3．1．3 基礎類型 41
3．1．4 類型斷言 51
3．2 函數 53
3．2．1 函數參數 53
3．2．2 函數的返回類型 57
3．2．3 函數類型 58
3．2．4 函數的重載 63
3．2．5 箭頭函數 64
3．3 類 67
3．3．1 實例成員 68
3．3．2 靜態成員 73
3．3．3 可選成員 76
3．3．4 索引 78
3．3．5 繼承 79
3．3．6 可訪問性 86
3．3．7 抽象類 92
3．4 小結 95

第4章 TypeScript進階 96
4．1 類型和接口 96
4．1．1 常用類型 96
4．1．2 特殊類型 104
4．1．3 接口 107
4．1．4 運行時類型判斷 113
4．2 泛型 120
4．2．1 泛型函數 121
4．2．2 泛型類 122
4．2．3 泛型接口 125
4．2．4 類型推斷 127
4．2．5 類型約束 128
4．3 裝飾器 129
4．3．1 元數據 130
4．3．2 reflect-metadata 134
4．3．3 屬性裝飾器 137
4．3．4 類裝飾器 142
4．3．5 其他裝飾器 153
4．3．6 裝飾器工廠 155
4．4 小結 160

第5章 TypeScript補充 161
5．1 模塊 161
5．1．1 導出 161
5．1．2 導入 164
5．1．3 模塊解析 168
5．1．4 模塊擴展 176
5．2 命名空間 178
5．2．1 全局命名空間 179
5．2．2 模塊內的命名空間 181
5．2．3 global擴展 183
5．2．4 Node．js全局作用域 188
5．3 聲明文件 191
5．3．1 環境上下文 192
5．3．2 編寫聲明文件 194
5．3．3 環境模塊 198
5．3．4 使用JavaScript包 200
5．3．5 TypeScript庫 205
5．4 項目配置 208
5．5 小結 209

第6章 Angular基礎概念 210
6．1 Angular應用程序的組成部分 210
6．1．1 組件 211
6．1．2 模板 212
6．1．3 數據綁定 213
6．1．4 服務 214
6．1．5 指令 215
6．1．6 管道 216
6．1．7 模塊 217
6．2 創建一個Angular應用程序 218
6．2．1 準備工作 219
6．2．2 編寫應用程序代碼 224
6．2．3 啟動應用程序 229
6．2．4 創建過程回顧 235
6．3 Angular和MVC 236
6．3．1 MVC 236
6．3．2 MVVM 238
6．3．3 Angular中的MVC 238
6．4 小結 240

第7章 天天菜園：一個真實的Angular應用程序 241
7．1 創建項目 241
7．2 服務：領域模型 245
7．3 組件：應用邏輯 246
7．4 模板：展示邏輯 248
7．4．1 指令 249
7．4．2 數據綁定 250
7．4．3 管道 265
7．5 完善 268
7．5．1 MVC目錄 268
7．5．2 常用指令 269
7．5．3 Bootstrap 277
7．5．4 根視圖 281
7．6 小結 285

第8章 天天菜園：商品展示 286
8．1 創建商品細節視圖 286
8．1．1 重構商品服務 286
8．1．2 創建商品細節組件 287
8．1．3 創建商品細節模板和樣式 288
8．1．4 封裝商品細節組件 289
8．2 路由器：構建單頁面應用程序 290
8．2．1 安裝和配置路由器包 291
8．2．2 註冊路由項 292
8．2．3 使用路由器鏈接指令 294
8．2．4 設置路由器出口 295
8．2．5 設置標簽 296
8．2．6 刷新商品細節視圖 298
8．2．7 美化商品細節視圖 300
8．3 領域模塊：劃分領域 304
8．3．1 創建商品領域目錄 304
8．3．2 轉移商品領域代碼 305
8．3．3 創建商品領域模塊 306
8．3．4 導入商品領域模塊到根模塊 307
8．3．5 導入Angular模塊到商品領域模塊 307
8．4 路由配置模塊：配置領域路由 308
8．4．1 創建商品領域路由配置模塊 310
8．4．2 導入商品領域路由配置模塊到商品領域模塊 311
8．4．3 創建應用程序根路由配置模塊 312
8．4．4 導入應用程序根路由配置模塊到應用程序根模塊 312
8．5 依賴註入：管理服務 313
8．5．1 註冊商品服務 314
8．5．2 為商品列表組件註入商品服務 316
8．5．3 為商品細節組件註入商品服務 317
8．6 綜合運用：傳遞業務參數 318
8．6．1 附加商品ID到目標path 318
8．6．2 配置匹配商品ID的路由參數 319
8．6．3 獲取目標path中的商品ID 320
8．6．4 完善 323
8．7 小結 324

第9章 天天菜園：客戶中心（上） 325
9．1 客戶領域模塊：復習鞏固 325
9．1．1 創建客戶領域目錄 325
9．1．2 創建客戶領域模型 326
9．1．3 創建客戶組件 328
9．1．4 創建視圖相關文件 331
9．1．5 創建客戶領域路由配置模塊 334
9．1．6 創建客戶領域模塊 335
9．1．7 導入客戶領域模塊到根模塊 336
9．1．8 導航到客戶視圖 337
9．2 路由加載模塊：提高應用程序啟動效率 338
9．2．1 路由加載客戶領域模塊 339
9．2．2 重新導航到客戶視圖 341
9．2．3 模塊和依賴註入器 343
9．3 表單（上）：雙向數據綁定 347
9．3．1 安裝和配置表單包 347
9．3．2 導入表單模塊到客戶領域模塊 348
9．3．3 提交客戶表單 349
9．3．4 綁定客戶表單 351
9．3．5 進行註冊和登錄 356
9．4 小結 357

第 10章 天天菜園：客戶中心（下） 358
10．1 表單（下）：驗證用戶輸入 358
10．1．1 客戶表單驗證 358
10．1．2 提示表單驗證規則 365
10．2 Web API：真實的服務端 375
10．2．1 Web API列表 375
10．2．2 Web API實現 378
10．2．3 Web API註冊 381
10．2．4 獲取請求體 383
10．3 HttpClient：與Web服務端通信 384
10．3．1 重構客戶服務 385
10．3．2 重構客戶組件 396
10．3．3 重構商品服務 399
10．3．4 重構商品組件 401
10．4 小結 402

第 11章 天天菜園：購物車 404
11．1 Web API：服務端支持 404
11．1．1 Web API列表 404
11．1．2 Web API實現 409
11．1．3 Web API註冊 415
11．2 重構商品領域模塊：添加商品到購物車 417
11．2．1 重構商品領域模塊 417
11．2．2 重構商品服務 417
11．2．3 重構商品細節組件 418
11．2．4 重構商品細節模板 419
11．2．5 重構商品細節樣式 420
11．3 購物車領域模塊：一次完整的領域實現體驗 421
11．3．1 創建購物車領域目錄 422
11．3．2 創建購物車領域模型 422
11．3．3 創建購物車組件 424
11．3．4 創建購物車視圖文件 427
11．3．5 創建購物車領域路由配置模塊 430
11．3．6 創建購物車領域模塊 430
11．3．7 加載購物車領域模塊 431
11．3．8 導航到購物車視圖 432
11．4 事件綁定：處理用戶交互 433
11．4．1 增加或減少購物車商品數量 434
11．4．2 刪除購物車商品 436
11．4．3 直接修改購物車商品數量 437
11．5 嵌套組件：構建復雜應用程序 441
11．5．1 重構商品服務 442
11．5．2 重構商品列表組件 442
11．5．3 重構商品列表模板 443
11．5．4 傳遞搜索參數 444
11．5．5 創建商品搜索組件 446
11．5．6 重構購物車領域模塊 448
11．5．7 顯示商品搜索視圖 448
11．5．8 強化商品搜索組件 450
11．6 小結 453

第 12章 天天菜園：完善（上） 455
12．1 部件模塊：封裝共享組件 455
12．2 Subject：模塊間通信 463
12．2．1 同步購物車商品總數（上） 464
12．2．2 同步購物車商品總數（中） 468
12．2．3 Observable vs． Subject 470
12．3 服務模塊：封裝共享服務 482
12．3．1 同步購物車商品總數（下） 482
12．3．2 同步登錄客戶姓名 485
12．3．3 完善同步 489
12．3．4 五種特性模塊的比較 493
12．4 小結 493

第 13章 天天菜園：完善（下） 494
13．1 保護購物車視圖 494
13．1．1 創建路由守衛 494
13．1．2 註冊路由守衛 496
13．1．3 應用路由守衛 496
13．2 保護登錄客戶元素 497
13．2．1 創建登錄驗證指令 497
13．2．2 封裝登錄驗證指令 498
13．2．3 運用登錄驗證指令 499
13．3 共享消息提示 500
13．3．1 創建消息提示服務 501
13．3．2 註冊消息提示服務 501
13．3．3 創建消息提示組件 502
13．3．4 封裝消息提示組件 503
13．3．5 發送提示消息 504
13．3．6 顯示提示消息 505
13．4 簡化消息提示 507
13．4．1 創建消息提示組件 507
13．4．2 重構消息提示服務 508
13．4．3 創建UI服務模塊 510
13．4．4 導入UI服務模塊到根模塊 511
13．4．5 顯示消息提示 511
13．5 確認提示 514
13．5．1 創建確認提示組件 514
13．5．2 創建確認提示服務 515
13．5．3 註冊確認提示服務 517
13．5．4 顯示確認提示 517
13．6 動畫 519
13．6．1 安裝Angular動畫包 519
13．6．2 搜索按鈕動畫 520
13．6．3 購物車商品刪除動畫 524
13．6．4 路由過渡動畫 531
13．7 小結 538

第 14章 使用Angular CLI 539
14．1 構建已有應用程序 540
14．1．1 安裝Angular CLI 540
14．1．2 安裝Angular編譯器 540
14．1．3 選擇要打包的墊片 541
14．1．4 創建Angular工作空間配置文件 542
14．1．5 不執行預先編譯的構建 544
14．1．6 執行預先編譯的構建 551
14．1．7 用於生產的構建 553
14．1．8 完善 556
14．2 開發新的應用程序 558
14．2．1 創建應用程序 558
14．2．2 啟動應用程序 564
14．2．3 添加功能 565
14．2．4 使用語言服務 572
14．2．5 構建應用程序 573
14．3 小結 574