第一部分入門篇
1 前端風雲. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.1 故事的起點2
1.2 AJAX 王者歸來3
1.3 工具庫的流行3
1.4 百傢爭鳴3
1.5 走進前端新時代4
1.6 小結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 2 9
2.1.4 快速發展的Angular 2 10
2.1.5 開發語言之選11
2.2 Angular 2 簡述12
2.2.1 核心概念12
2.2.2 平颱簡介14
2.2.3 平颱亮點16
2.3 小結17
3 TypeScript 入門. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 18
3.1 TypeScript 概述18
3.1.1 概述18
3.1.2 安裝19
3.2 基本類型20
3.2.1 布爾類型20
3.2.2 數字類型20
3.2.3 字符串類型21
3.2.4 數組類型21
3.2.5 元組類型21
3.2.6 枚舉類型21
3.2.7 任意值類型22
3.2.8 null 和undefined 22
3.2.9 void 類型23
3.2.10 never 類型24
3.3 聲明和解構24
3.3.1 let 聲明25
3.3.2 const 聲明26
3.3.3 解構26
3.4 函數28
3.4.1 函數定義28
3.4.2 可選參數28
3.4.3 默認參數29
3.4.4 剩餘參數30
3.4.5 函數重載30
3.4.6 箭頭函數31
3.5 類32
3.5.1 類的例子32
3.5.2 繼承與多態32
3.5.3 修飾符33
3.5.4 參數屬性35
3.5.5 靜態屬性35
3.5.6 抽象類36
3.6 模塊37
3.6.1 概述37
3.6.2 模塊導齣方式37
3.6.3 模塊導入方式38
3.6.4 模塊的默認導齣39
3.6.5 模塊設計原則40
3.7 接口42
3.7.1 概述42
3.7.2 屬性類型接口42
3.7.3 函數類型接口43
3.7.4 可索引類型接口44
3.7.5 類類型接口44
3.7.6 接口擴展45
3.8 裝飾器46
3.8.1 概述46
3.8.2 方法裝飾器47
3.8.3 類裝飾器48
3.8.4 參數裝飾器50
3.8.5 屬性裝飾器51
3.8.6 裝飾器組閤51
3.9 泛型53
3.10 TypeScript 周邊54
3.10.1 編譯配置文件54
3.10.2 聲明文件55
3.10.3 編碼工具56
3.10.4 展望未來57
3.11 小結57
4 快速入門. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 58
4.1 Hello World 例子58
4.1.1 準備工作58
4.1.2 搭建步驟59
4.2 通訊錄例子66
4.2.1 背景介紹66
4.2.2 架構設計68
4.3 小結74
第二部分深入篇
5 Angular 架構總覽. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 76
5.1 核心模塊介紹76
5.1.1 組件77
5.1.2 模闆81
5.1.3 指令82
5.1.4 服務83
5.1.5 依賴注入84
5.1.6 路由86
5.2 應用模塊88
5.3 源碼結構介紹91
5.4 小結93
6 組件. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 94
6.1 概述94
6.1.1 模塊化介紹94
6.1.2 組件化標準96
6.1.3 Angular 的組件100
6.2 組件基礎100
6.2.1 創建組件的步驟100
6.2.2 組件基礎構成102
6.2.3 組件與模塊108
6.3 組件交互113
6.3.1 組件的輸入輸齣屬性114
6.3.2 父組件嚮子組件傳遞數據115
6.3.3 子組件嚮父組件傳遞數據120
6.3.4 其他組件交互方式122
6.4 組件內容嵌入124
6.5 組件生命周期128
6.5.1 概述128
6.5.2 生命周期鈎子128
6.6 變化監測131
6.6.1 數據變化的源頭131
6.6.2 變動通知機製132
6.6.3 變化監測的響應處理133
6.7 擴展閱讀139
6.7.1 元數據一覽錶139
6.7.2 元數據說明139
6.7.3 深入理解Zones 149
6.8 小結155
7 模闆. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 156
7.1 模闆語法概覽156
7.2 數據綁定158
7.2.1 概述158
7.2.2 插值160
7.2.3 模闆錶達式160
7.2.4 屬性綁定162
7.2.5 事件綁定165
7.2.6 雙嚮數據綁定168
7.2.7 輸入和輸齣屬性169
7.3 內置指令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 錶單校驗185
7.5 管道189
7.5.1 管道介紹190
7.5.2 內置管道190
7.5.3 自定義管道196
7.5.4 管道的變化監測198
7.6 擴展閱讀202
7.6.1 安全導航操作符202
7.6.2 雙嚮綁定的原理202
7.7 小結205
8 指令. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 206
8.1 概述206
8.1.1 指令分類208
8.1.2 內置指令210
8.2 自定義屬性指令219
8.2.1 實現屬性指令219
8.2.2 為指令綁定輸入221
8.2.3 響應用戶操作223
8.3 自定義結構指令224
8.3.1 實現結構指令224
8.3.2 模闆標簽與星號前綴227
8.3.3 NgIf 指令原理228
8.4 擴展閱讀231
8.5 小結235
9 服務與RxJS . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 237
9.1 Angular 服務237
9.1.1 概述237
9.1.2 使用場景238
9.2 HTTP 服務242
9.2.1 AJAX 介紹243
9.2.2 JSONP 介紹249
9.2.3 HttpModule 250
9.3 響應式編程254
9.3.1 概述254
9.3.2 ReactiveX 256
9.4 RxJS 258
9.4.1 創建Observable 對象258
9.4.2 使用RxJS 處理復雜場景258
9.4.3 RxJS 和Promise 的對比259
9.4.4 “冷”模式下的Observable 260
9.4.5 RxJS 中的Operator 261
9.4.6 Angular 中的RxJS 265
9.5 小結269
10 依賴注入. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 270
10.1 依賴注入介紹271
10.2 Angular 依賴注入274
10.2.1 概述274
10.2.2 在組件中注入服務276
10.2.3 在服務中注入服務278
目錄xvii
10.2.4 在模塊中注入服務280
10.2.5 層級注入282
10.2.6 注入到派生組件286
10.2.7 限定方式的依賴注入288
10.3 Provider 292
10.3.1 概述292
10.3.2 Provider 注冊方式293
10.4 擴展閱讀297
10.5 小結299
11 路由. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 300
11.1 概述300
11.2 基本用法302
11.2.1 路由配置302
11.2.2 創建根路由模塊303
11.2.3 添加RouterOutlet 指令303
11.3 路由策略304
11.3.1 HashLocationStrategy 介紹305
11.3.2 PathLocationStrategy 介紹306
11.4 路由跳轉307
11.4.1 使用指令跳轉308
11.4.2 使用代碼跳轉310
11.5 路由參數312
11.5.1 Path 參數312
11.5.2 Query 參數315
11.5.3 Matrix 參數317
11.6 子路由和附屬Outlet 317
11.6.1 子路由317
11.6.2 附屬Outlet 319
11.7 路由攔截320
11.7.1 激活攔截與反激活攔截321
11.7.2 數據預加載攔截325
11.8 模塊的延遲加載327
11.8.1 延遲加載實現328
11.8.2 模塊加載攔截329
11.9 小結331
12 測試. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 332
12.1 概述332
12.2 單元測試333
12.2.1 概述333
12.2.2 常用測試框架334
12.2.3 Jasmine 介紹334
12.2.4 Karma 介紹338
12.2.5 Karma 結閤Jasmine 測試339
12.3 Angular 單元測試343
12.3.1 概述343
12.3.2 獨立單元測試348
12.3.3 測試工具集352
12.4 端到端測試360
12.4.1 概述360
12.4.2 Protractor 介紹361
12.5 小結364
第三部分實戰篇
13 問捲調查係統簡介. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 366
13.1 項目背景366
13.2 主要特性367
13.2.1 首頁和幫助頁369
13.2.2 問捲編輯頁369
13.2.3 我的問捲頁369
13.2.4 用戶管理頁369
13.3 産品設計369
13.4 小結371
14 項目起步. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 372
14.1 技術選型372
14.1.1 前端腳手架372
14.1.2 UI 樣式庫373
14.1.3 後端服務器374
14.2 環境搭建374
14.2.1 搭建腳手架374
14.2.2 引入樣式庫377
14.2.3 搭建後颱環境378
14.3 目錄結構介紹380
14.4 首頁開發384
14.5 小結388
15 問捲編輯模塊. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 389
15.1 概述389
15.1.1 功能設計389
15.1.2 數據模型391
15.2 問捲編輯模塊開發393
15.2.1 問題選擇組件394
15.2.2 問題組件398
15.2.3 問捲組件408
15.2.4 問捲服務415
15.2.5 問捲大綱422
15.3 小結425
16 我的問捲模塊. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 426
16.1 問捲列錶427
16.1.1 問捲列錶項428
16.1.2 顯示問捲列錶429
16.1.3 顯示問捲詳情431
16.2 問捲操作433
16.2.1 修改路由配置434
16.2.2 發布後的問捲頁麵436
16.2.3 問捲操作組件439
16.3 小結442
17 用戶管理模塊. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 443
17.1 開發簡單注冊頁444
17.2 錶單控件組件446
17.2.1 定義錶單控件446
17.2.2 校驗錶單控件447
17.2.3 錶單安全450
17.3 用戶注冊功能開發451
17.3.1 用戶注冊服務451
17.3.2 組件的邏輯453
17.3.3 注冊接口開發455
17.4 權限管理456
17.5 小結460
18 項目構建和最佳實踐. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 461
18.1 項目構建461
18.1.1 代碼質量檢查461
18.1.2 測試463
18.1.3 打包465
18.1.4 容器化467
18.2 最佳實踐468
18.2.1 單一職責468
18.2.2 命名約定469
18.2.3 編碼約定471
18.2.4 應用結構約定474
18.2.5 組件相關約定475
18.2.6 指令相關約定478
18.2.7 服務相關約定478
18.2.8 其他479
18.3 小結480
· · · · · · (收起)