《揭秘Angular 2》第一部分從前端的故事起點(diǎn)說起，然后對(duì) Angular 以及 TypeScript 進(jìn)行了簡(jiǎn)單的介紹，接著通過一個(gè)通訊錄例子讓讀者快速入門 Angular 的開發(fā)；第二部分則深入講解了 Angular 架構(gòu)以及 Angular 核心內(nèi)容，包括組件、模板、指令、服務(wù)、依賴注入、路由以及測(cè)試，此外，在相應(yīng)的章節(jié)里還補(bǔ)充說明了譬如變化監(jiān)測(cè)的核心 Zones（第 6 章）、雙向綁定的原理（第 7 章）、RxJS（第 9 章）等關(guān)鍵內(nèi)容；第三部分則通過問卷調(diào)查系統(tǒng)來指引讀者進(jìn)行 Angular 項(xiàng)目的實(shí)戰(zhàn)。

目錄

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