主要內(nèi)容
● 從架構(gòu)的角度理解MVC模式
● 使用Angular創(chuàng)建豐富、動(dòng)態(tài)的Web應(yīng)用程序客戶端
● 使用ng工具構(gòu)建Angular項(xiàng)目
● 擴(kuò)展和自定義Angular
● 如何對(duì)Angular項(xiàng)目進(jìn)行單元測(cè)試
本書分為三部分。
第Ⅰ部分講解 Angular 開發(fā)的基礎(chǔ)知識(shí),對(duì) HTML、CSS、JavaScript 和TypeScript 也進(jìn)行了介紹,確保對(duì)前端開發(fā)一無(wú)所知的讀者,也能夠快速上手。本部分*后還開發(fā)了一個(gè)簡(jiǎn)單的 Web 應(yīng)用程序,幫助讀者鞏固基礎(chǔ)知識(shí)。
第Ⅱ部分詳細(xì)講解 Angular。
內(nèi)容涵蓋
項(xiàng)目結(jié)構(gòu)、
開發(fā)工具、
數(shù)據(jù)綁定、
各種指令、
事件和表單、
管道、
服務(wù)、
服務(wù)提供程序、
模塊等。
這部分是大全式講解,對(duì) Angular 的主要功能都進(jìn)行了介紹。第Ⅲ部分更偏向較高級(jí)的功能,介紹了 Reactive Extensions、HTTP 請(qǐng)求、路由、動(dòng)畫和單元測(cè)試。
譯 者 序
Web應(yīng)用程序的功能越來(lái)越豐富、用戶體驗(yàn)越來(lái)越好,隨之而來(lái)的,是前端開發(fā)人員變得越來(lái)越受歡迎。
經(jīng)驗(yàn)豐富的前端開發(fā)人員知道,合適的前端框架能夠幫助自己提高工作效率,編寫出高性能且容易使用的Web應(yīng)用程序。在前端開發(fā)的世界中,Angular是一個(gè)非常出色的框架,目前由Google提供支持。
關(guān)于Angular,有一個(gè)小故事。Angular的前身是AngularJS,而AngularJS的前身稱作GetAngular,那是一個(gè)由Mi?ko Hevery和Adam Abrons在工作之余開發(fā)的項(xiàng)目。在項(xiàng)目開發(fā)期間,Hevery已經(jīng)就職于Google,并負(fù)責(zé)Google Feedback項(xiàng)目。經(jīng)歷了6個(gè)月的開發(fā)后,該項(xiàng)目的代碼超過(guò)17 000行,這讓Hevery感到非常沮喪。他想到了GetAngular,認(rèn)為這個(gè)框架能夠?yàn)镚oogle Feedback項(xiàng)目提供很大的幫助。于是,他找到自己的經(jīng)理,請(qǐng)求用AngularJS重寫項(xiàng)目,并打賭說(shuō)自己能夠在兩周內(nèi)重寫整個(gè)項(xiàng)目。盡管他輸?shù)袅速局(因?yàn)樗罱K用了3周而不是2周),但項(xiàng)目的代碼量從近兩萬(wàn)行銳減到1500行。也正因如此,Google才對(duì)GetAngular產(chǎn)生了濃厚的興趣,并最終將其納入自己的產(chǎn)品體系,更名為AngularJS。
從這個(gè)小故事可以看出,Angular能夠顯著降低Web應(yīng)用程序的代碼量,進(jìn)而提高開發(fā)人員的生產(chǎn)效率、加快項(xiàng)目的開發(fā)進(jìn)度。這種優(yōu)勢(shì)源于Angular提供的多種功能,例如依賴注入、雙向數(shù)據(jù)綁定、采用指令等。而且,Angular是使用TypeScript構(gòu)建的,這是JavaScript的超集,提供了對(duì)強(qiáng)類型的支持,使得前端開發(fā)工作變得更加簡(jiǎn)單。不僅如此,Angular的更新相當(dāng)迅速,每個(gè)新的主版本都帶來(lái)不小的改進(jìn),使這個(gè)框架依然保持著旺盛的生命力。
綜上可知,對(duì)于有志于轉(zhuǎn)向前端的開發(fā)人員,Angular是一個(gè)上佳的選擇,而《Angular高級(jí)編程(第4版)》則可作為學(xué)習(xí)Angular的指路明燈,幫助讀者從基礎(chǔ)功能到高級(jí)功能,了解Angular開發(fā)的方方面面。
《Angular高級(jí)編程(第4版)》分為三部分。第Ⅰ部分講解Angular開發(fā)的基礎(chǔ)知識(shí),對(duì)HTML、CSS、JavaScript和TypeScript也進(jìn)行了介紹,確保對(duì)前端開發(fā)一無(wú)所知的讀者,也能夠快速上手。本部分最后還開發(fā)了一個(gè)簡(jiǎn)單的Web應(yīng)用程序,幫助讀者鞏固基礎(chǔ)知識(shí)。第Ⅱ部分詳細(xì)講解Angular,內(nèi)容涵蓋項(xiàng)目結(jié)構(gòu)、開發(fā)工具、數(shù)據(jù)綁定、各種指令、事件和表單、管道、服務(wù)、服務(wù)提供程序、模塊等。這部分是大全式講解,對(duì)Angular的主要功能都進(jìn)行了介紹。第Ⅲ部分更偏向較高級(jí)的功能,介紹了Reactive Extensions、HTTP請(qǐng)求、路由、動(dòng)畫和單元測(cè)試。
《Angular高級(jí)編程(第4版)》內(nèi)容全面詳細(xì),并且通過(guò)大量代碼示例和屏幕截圖來(lái)演示概念和功能,理解起來(lái)比較輕松。相信讀者在閱讀完《Angular高級(jí)編程(第4版)》后,一定會(huì)有豐厚的收獲。希望這本書能夠?yàn)樽x者成為優(yōu)秀的前端開發(fā)人員助力!
譯者
Adam Freeman是一位經(jīng)驗(yàn)豐富的IT專業(yè)人士,在多家公司擔(dān)任過(guò)高級(jí)職位,還曾擔(dān)任一家全球銀行的首席技術(shù)官和首席運(yùn)營(yíng)官。退休之后,他熱衷于寫作和長(zhǎng)跑。
第Ⅰ部分 Angular基礎(chǔ)知識(shí)
第1章 準(zhǔn)備工作 3
1.1 需要了解什么 3
1.2 本書結(jié)構(gòu) 3
1.2.1 第Ⅰ部分:Angular基礎(chǔ)知識(shí) 3
1.2.2 第Ⅱ部分:Angular詳解 4
1.2.3 第Ⅲ部分:Angular高級(jí)功能 4
1.3 本書不介紹什么 4
1.4 Angular開發(fā)需要什么軟件 4
1.5 如何設(shè)置開發(fā)環(huán)境 4
1.6 學(xué)習(xí)示例時(shí)遇到問(wèn)題怎么辦 4
1.7 如果在書中發(fā)現(xiàn)錯(cuò)誤怎么辦 5
1.8 大量示例 5
1.9 獲取示例代碼 6
1.10 聯(lián)系作者 6
1.11 如果你真的很喜歡這本書 7
1.12 如果你不喜歡這本書 7
1.13 本章小結(jié) 7
第2章 第一個(gè)Angular應(yīng)用程序 9
2.1 準(zhǔn)備開發(fā)環(huán)境 9
2.1.1 安裝Node.js 9
2.1.2 安裝angular-cli包 10
2.1.3 安裝編輯器 11
2.1.4 安裝瀏覽器 11
2.2 創(chuàng)建并準(zhǔn)備項(xiàng)目 11
2.2.1 創(chuàng)建項(xiàng)目 11
2.2.2 啟動(dòng)開發(fā)工具 12
2.3 向項(xiàng)目中添加Angular功能 13
2.3.1 創(chuàng)建數(shù)據(jù)模型 14
2.3.2 向用戶顯示數(shù)據(jù) 16
2.3.3 更新組件 17
2.3.4 設(shè)置HTML元素的樣式 20
2.3.5 顯示待辦事項(xiàng)列表 21
2.3.6 創(chuàng)建雙向數(shù)據(jù)綁定 24
2.3.7 添加待辦事項(xiàng) 26
2.3.8 顯示完成的待辦事項(xiàng) 29
2.4 本章小結(jié) 31
第3章 將Angular放在上下文中 33
3.1 理解Angular的強(qiáng)項(xiàng) 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服務(wù) 38
3.5 常見(jiàn)的設(shè)計(jì)缺陷 39
3.5.1 將邏輯放錯(cuò)地方 40
3.5.2 數(shù)據(jù)存儲(chǔ)采用的數(shù)據(jù)格式 40
3.5.3 足夠的知識(shí)足以制造麻煩 40
3.6 本章小結(jié) 40
第4章 HTML和CSS入門 43
4.1 準(zhǔn)備示例項(xiàng)目 43
4.2 理解HTML 45
4.2.1 理解空元素 45
4.2.2 理解屬性 45
4.2.3 應(yīng)用無(wú)值屬性 46
4.2.4 在屬性中引用字面量 46
4.2.5 理解元素內(nèi)容 46
4.2.6 理解文檔結(jié)構(gòu) 47
4.3 理解Bootstrap 48
4.3.1 應(yīng)用基本的Bootstrap類 48
4.3.2 使用Bootstrap樣式化表格 51
4.3.3 使用Bootstrap創(chuàng)建表單 52
4.3.4 使用Bootstrap創(chuàng)建網(wǎng)格 53
4.4 本章小結(jié) 58
第5章 JavaScript與TypeScript:第1部分 59
5.1 準(zhǔn)備示例項(xiàng)目 60
5.2 使用語(yǔ)句 61
5.3 定義和使用函數(shù) 62
5.3.1 定義帶形參的函數(shù) 63
5.3.2 定義返回結(jié)果的函數(shù) 64
5.3.3 將函數(shù)用作其他函數(shù)的實(shí)參 64
5.4 使用變量和類型 65
5.4.1 使用變量閉包 67
5.4.2 使用基本數(shù)據(jù)類型 67
5.5 使用JavaScript操作符 69
5.5.1 使用條件語(yǔ)句 69
5.5.2 相等操作符和恒等操作符 70
5.5.3 顯式類型轉(zhuǎn)換 71
5.6 處理數(shù)組 72
5.6.1 使用數(shù)組字面量 73
5.6.2 數(shù)組內(nèi)容的讀取和修改 73
5.6.3 遍歷數(shù)組內(nèi)容 73
5.6.4 spread操作符 74
5.6.5 使用內(nèi)置數(shù)組方法 75
5.7 本章小結(jié) 76
第6章 JavaScript與TypeScript:第2部分 77
6.1 準(zhǔn)備示例項(xiàng)目 77
6.2 使用對(duì)象 78
6.2.1 使用對(duì)象字面量 78
6.2.2 將函數(shù)用作方法 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 使用訪問(wèn)修飾符 91
6.5 本章小結(jié) 92
第7章 SportsStore:一個(gè)真實(shí)的應(yīng)用程序 93
7.1 準(zhǔn)備項(xiàng)目 93
7.1.1 安裝額外的NPM軟件包 94
7.1.2 準(zhǔn)備RESTful Web服務(wù) 95
7.1.3 準(zhǔn)備HTML文件 97
7.1.4 創(chuàng)建文件夾結(jié)構(gòu) 97
7.1.5 運(yùn)行示例應(yīng)用程序 98
7.1.6 啟動(dòng)RESTful Web服務(wù) 98
7.2 準(zhǔn)備Angular項(xiàng)目功能 98
7.2.1 更新根組件 98
7.2.2 更新根模塊 99
7.2.3 檢查引導(dǎo)文件 100
7.3 啟動(dòng)數(shù)據(jù)模型 100
7.3.1 創(chuàng)建模型類 100
7.3.2 創(chuàng)建虛擬數(shù)據(jù)源 101
7.3.3 創(chuàng)建模型存儲(chǔ)庫(kù) 102
7.3.4 創(chuàng)建功能模塊 103
7.4 啟動(dòng)商店 103
7.4.1 創(chuàng)建Store組件和模板 104
7.4.2 創(chuàng)建商店功能模塊 105
7.4.3 更新根組件和根模塊 106
7.5 添加商店功能:產(chǎn)品詳情 107
7.5.1 顯示產(chǎn)品詳情 107
7.5.2 添加類別選擇 108
7.5.3 添加產(chǎn)品分頁(yè)功能 110
7.5.4 創(chuàng)建自定義指令 112
7.6 本章小結(jié) 116
第8章 SportsStore:訂單和結(jié)賬 117
8.1 準(zhǔn)備示例應(yīng)用程序 117
8.2 創(chuàng)建購(gòu)物車 117
8.2.1 創(chuàng)建購(gòu)物車模型 117
8.2.2 創(chuàng)建購(gòu)物車概覽組件 119
8.2.3 將購(gòu)物車集成到商店中 120
8.3 添加URL路由 123
8.3.1 創(chuàng)建購(gòu)物車詳情和結(jié)賬組件 124
8.3.2 創(chuàng)建和應(yīng)用路由配置 124
8.3.3 應(yīng)用程序?qū)Ш? 126
8.3.4 路由守衛(wèi) 128
8.4 完成購(gòu)物車詳情功能 130
8.5 處理訂單 133
8.5.1 擴(kuò)展模型 133
8.5.2 收集訂單詳情 135
8.6 使用RESTful Web服務(wù) 138
8.7 本章小結(jié) 140
第9章 SportsStore:管理 141
9.1 準(zhǔn)備示例應(yīng)用程序 141
9.1.1 創(chuàng)建模塊 141
9.1.2 配置URL路由系統(tǒng) 144
9.1.3 導(dǎo)航到管理URL 145
9.2 實(shí)現(xiàn)身份驗(yàn)證 146
9.2.1 理解身份驗(yàn)證系統(tǒng) 146
9.2.2 擴(kuò)展數(shù)據(jù)源 147
9.2.3 創(chuàng)建身份驗(yàn)證服務(wù) 148
9.2.4 啟用身份驗(yàn)證 149
9.3 擴(kuò)展數(shù)據(jù)源和存儲(chǔ)庫(kù) 151
9.4 創(chuàng)建管理功能結(jié)構(gòu) 155
9.4.1 創(chuàng)建占位符組件 155
9.4.2 準(zhǔn)備常用內(nèi)容和功能模塊 156
9.4.3 實(shí)現(xiàn)產(chǎn)品功能 158
9.4.4 實(shí)現(xiàn)訂單功能 162
9.5 本章小結(jié) 164
第10章 SportsStore:漸進(jìn)式特性和部署 165
10.1 準(zhǔn)備示例應(yīng)用程序 165
10.2 添加漸進(jìn)式特性 165
10.2.1 安裝PWA包 165
10.2.2 緩存數(shù)據(jù)URL 166
10.2.3 響應(yīng)對(duì)連接的更改 167
10.3 為部署準(zhǔn)備應(yīng)用程序 169
10.3.1 創(chuàng)建數(shù)據(jù)文件 169
10.3.2 創(chuàng)建服務(wù)器 169
10.3.3 更改存儲(chǔ)庫(kù)類中的Web服務(wù)URL 171
10.4 構(gòu)建和測(cè)試應(yīng)用程序 172
10.5 將SportsStore應(yīng)用程序容器化 174
10.5.1 安裝Docker 174
10.5.2 準(zhǔn)備應(yīng)用程序 174
10.5.3 創(chuàng)建Docker容器 174
10.5.4 運(yùn)行應(yīng)用程序 175
10.6 本章小結(jié) 177
第Ⅱ部分 Angular詳解
第11章 理解Angular項(xiàng)目和工具 181
11.1 創(chuàng)建新的Angular項(xiàng)目 181
11.2 了解項(xiàng)目結(jié)構(gòu) 182
11.2.1 了解src文件夾 183
11.2.2 了解包文件夾 184
11.3 使用開發(fā)工具 187
11.3.1 了解開發(fā)HTTP服務(wù)器 187
11.3.2 了解構(gòu)建過(guò)程 188
11.3.3 使用linter 192
11.4 理解Angular應(yīng)用程序是如何工作的 194
11.4.1 理解HTML文檔 194
11.4.2 理解應(yīng)用程序引導(dǎo) 195
11.4.3 理解Angular根模塊 196
11.4.4 理解Angular組件 197
11.4.5 理解內(nèi)容顯示 197
11.5 了解生產(chǎn)構(gòu)建過(guò)程 199
11.5.1 了解預(yù)編譯 199
11.5.2 了解差異加載 199
11.5.3 運(yùn)行生產(chǎn)構(gòu)建 201
11.6 在Angular項(xiàng)目中開始開發(fā) 201
11.6.1 創(chuàng)建數(shù)據(jù)模型 201
11.6.2 創(chuàng)建組件和模板 205
11.6.3 配置根Angular模塊 206
11.7 本章小結(jié) 207
第12章 使用數(shù)據(jù)綁定 209
12.1 準(zhǔn)備示例項(xiàng)目 210
12.2 理解單向數(shù)據(jù)綁定 210
12.2.1 理解綁定目標(biāo) 212
12.2.2 理解表達(dá)式 213
12.2.3 理解括號(hào) 214
12.2.4 理解宿主元素 214
12.3 使用標(biāo)準(zhǔn)屬性和屬性綁定 215
12.3.1 使用標(biāo)準(zhǔn)屬性綁定 215
12.3.2 使用字符串插入綁定 216
12.3.3 使用元素屬性綁定 217
12.4 設(shè)置CSS類和樣式 218
12.4.1 使用類綁定 218
12.4.2 使用樣式綁定 223
12.5 更新應(yīng)用程序的數(shù)據(jù) 226
12.6 本章小結(jié) 228
第13章 使用內(nèi)置指令 229
13.1 準(zhǔn)備示例項(xiàng)目 230
13.2 使用內(nèi)置指令 231
13.2.1 使用ngIf指令 232
13.2.2 使用ngSwitch指令 234
13.2.3 使用ngFor指令 236
13.2.4 使用ngTemplateOutlet指令 244
13.3 理解單向數(shù)據(jù)綁定的限制 246
13.3.1 使用冪等表達(dá)式 246
13.3.2 理解表達(dá)式上下文 249
13.4 本章小結(jié) 251
第14章 使用事件和表單 253
14.1 準(zhǔn)備示例項(xiàng)目 254
14.1.1 導(dǎo)入表單模塊 254
14.1.2 準(zhǔn)備組件和模板 254
14.2 使用事件綁定 255
14.2.1 使用事件數(shù)據(jù) 259
14.2.2 使用模板引用變量 260
14.3 使用雙向數(shù)據(jù)綁定 262
14.4 處理表單 265
14.4.1 向示例應(yīng)用程序添加表單 265
14.4.2 添加表單數(shù)據(jù)驗(yàn)證 267
14.4.3 驗(yàn)證整個(gè)表單 275
14.5 使用基于模型的表單 281
14.5.1 啟用基于模型的表單功能 282
14.5.2 定義表單模型類 282
14.5.3 使用模型進(jìn)行驗(yàn)證 285
14.5.4 根據(jù)模型生成元素 288
14.6 創(chuàng)建自定義表單驗(yàn)證器 289
14.7 本章小結(jié) 292
第15章 創(chuàng)建屬性指令 293
15.1 準(zhǔn)備示例項(xiàng)目 294
15.2 創(chuàng)建簡(jiǎn)單的屬性指令 296
15.3 在指令中訪問(wèn)應(yīng)用程序數(shù)據(jù) 298
15.3.1 讀取宿主元素屬性 298
15.3.2 創(chuàng)建數(shù)據(jù)綁定輸入
屬性 300
15.3.3 響應(yīng)輸入屬性的變化 303
15.4 創(chuàng)建自定義事件 305
15.5 創(chuàng)建宿主元素綁定 308
15.6 在宿主元素上創(chuàng)建雙向綁定 309
15.7 導(dǎo)出指令用于模板變量 312
15.8 本章小結(jié) 315
第16章 創(chuàng)建結(jié)構(gòu)型指令 317
16.1 準(zhǔn)備示例項(xiàng)目 318
16.2 創(chuàng)建簡(jiǎn)單的結(jié)構(gòu)型指令 319
16.2.1 實(shí)現(xiàn)結(jié)構(gòu)型指令類 320
16.2.2 啟用結(jié)構(gòu)型指令 322
16.2.3 使用結(jié)構(gòu)型指令的簡(jiǎn)潔語(yǔ)法 323
16.3 創(chuàng)建迭代結(jié)構(gòu)型指令 324
16.3.1 提供額外的上下文數(shù)據(jù) 327
16.3.2 使用簡(jiǎn)潔的結(jié)構(gòu)語(yǔ)法 329
16.3.3 處理屬性級(jí)數(shù)據(jù)變更 330
16.3.4 處理集合級(jí)數(shù)據(jù)變更 331
16.4 查詢宿主元素內(nèi)容 340
16.4.1 查詢多個(gè)子內(nèi)容 344
16.4.2 接收查詢變更通知 346
16.5 本章小結(jié) 347
第17章 理解組件 349
17.1 準(zhǔn)備示例項(xiàng)目 350
17.2 使用組件組織應(yīng)用程序 350
17.2.1 創(chuàng)建新組件 351
17.2.2 定義模板 354
17.2.3 完成組件的重組 363
17.3 使用組件樣式 364
17.3.1 定義外部組件樣式 365
17.3.2 使用高級(jí)樣式特性 366
17.4 查詢模板內(nèi)容 372
17.5 本章小結(jié) 374
第18章 使用和創(chuàng)建管道 375
18.1 準(zhǔn)備示例項(xiàng)目 376
18.2 理解管道 378
18.3 創(chuàng)建一個(gè)自定義管道 380
18.3.1 注冊(cè)自定義管道 381
18.3.2 應(yīng)用自定義管道 382
18.3.3 組合管道 383
18.3.4 創(chuàng)建非純管道 384
18.4 使用內(nèi)置管道 387
18.4.1 格式化數(shù)值 388
18.4.2 格式化貨幣值 390
18.4.3 格式化百分比 393
18.4.4 格式化日期 394
18.4.5 改變字符串大小寫 397
18.4.6 將數(shù)據(jù)序列化為JSON數(shù)據(jù) 399
18.4.7 將數(shù)據(jù)數(shù)組切片 400
18.4.8 格式化鍵/值對(duì) 401
18.4.9 選擇值 402
18.4.10 復(fù)數(shù)化值 404
18.5 本章小結(jié) 405
第19章 使用服務(wù) 407
19.1 準(zhǔn)備示例項(xiàng)目 408
19.2 理解對(duì)象分發(fā)問(wèn)題 409
19.2.1 問(wèn)題的提出 409
19.2.2 利用依賴注入將對(duì)象作為服務(wù)分發(fā) 414
19.2.3 在其他構(gòu)造塊中聲明依賴 419
19.3 理解測(cè)試隔離問(wèn)題 425
19.4 完成服務(wù)的融入 428
19.4.1 更新根組件和模板 429
19.4.2 更新子組件 430
19.5 本章小結(jié) 431
第20章 使用服務(wù)提供程序 433
20.1 準(zhǔn)備示例項(xiàng)目 434
20.2 使用服務(wù)提供程序 435
20.2.1 使用類提供程序 438
20.2.2 使用值提供程序 445
20.2.3 使用工廠提供程序 447
20.2.4 使用已有的服務(wù)提供程序 449
20.3 使用本地提供程序 450
20.3.1 理解單個(gè)服務(wù)對(duì)象的局限性 450
20.3.2 在組件中創(chuàng)建本地提供程序 452
20.3.3 理解服務(wù)提供程序的替代方案 453
20.3.4 控制依賴解析 458
20.4 本章小結(jié) 459
第21章 使用和創(chuàng)建模塊 461
21.1 準(zhǔn)備示例項(xiàng)目 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 創(chuàng)建功能模塊 468
21.3.1 創(chuàng)建模型模塊 469
21.3.2 創(chuàng)建實(shí)用工具功能模塊 473
21.3.3 使用組件創(chuàng)建一個(gè)功能模塊 478
21.4 本章小結(jié) 482
第Ⅲ部分 Angular高級(jí)功能
第22章 創(chuàng)建示例項(xiàng)目 485
22.1 啟動(dòng)示例項(xiàng)目 485
22.1.1 添加和配置Bootstrap
CSS包 485
22.1.2 創(chuàng)建項(xiàng)目結(jié)構(gòu) 486
22.2 創(chuàng)建模型模塊 486
22.2.1 創(chuàng)建產(chǎn)品數(shù)據(jù)類型 486
22.2.2 創(chuàng)建數(shù)據(jù)源和存儲(chǔ)庫(kù) 486
22.2.3 完成模型模塊 488
22.3 創(chuàng)建核心模塊 488
22.3.1 創(chuàng)建共享狀態(tài)服務(wù) 488
22.3.2 創(chuàng)建表格組件 489
22.3.3 創(chuàng)建表單組件 490
22.3.4 完成核心模塊 492
22.4 創(chuàng)建消息模塊 493
22.4.1 創(chuàng)建消息模型和服務(wù) 493
22.4.2 創(chuàng)建組件和模板 493
22.4.3 完成消息模塊 494
22.5 完成項(xiàng)目 495
22.6 本章小結(jié) 496
第23章 使用Reactive Extensions 497
23.1 準(zhǔn)備示例項(xiàng)目 498
23.2 理解問(wèn)題 498
23.3 使用Reactive Extensions解決
問(wèn)題 501
23.3.1 理解Observable 502
23.3.2 理解Observer 503
23.3.3 理解Subject 505
23.4 使用async管道 506
23.5 擴(kuò)展應(yīng)用程序功能模塊 509
23.6 更進(jìn)一步 511
23.6.1 過(guò)濾事件 511
23.6.2 轉(zhuǎn)換事件 513
23.6.3 只接收不同的事件 515
23.6.4 獲取和忽略事件 517
23.7 本章小結(jié) 519
第24章 生成HTTP請(qǐng)求 521
24.1 準(zhǔn)備示例項(xiàng)目 522
24.1.1 配置模型功能模塊 522
24.1.2 創(chuàng)建數(shù)據(jù)文件 523
24.1.3 更新表單組件 523
24.1.4 運(yùn)行示例項(xiàng)目 524
24.2 理解RESTful Web服務(wù) 524
24.3 替換靜態(tài)數(shù)據(jù)源 525
24.3.1 創(chuàng)建新的數(shù)據(jù)源服務(wù) 525
24.3.2 配置數(shù)據(jù)源 527
24.3.3 使用REST數(shù)據(jù)源 527
24.3.4 保存和刪除數(shù)據(jù) 529
24.4 加強(qiáng)HTTP請(qǐng)求 531
24.5 生成跨域請(qǐng)求 533
24.6 配置請(qǐng)求頭 535
24.7 處理錯(cuò)誤 537
24.7.1 生成用戶可使用的消息 538
24.7.2 處理錯(cuò)誤 540
24.8 本章小結(jié) 541
第25章 路由與導(dǎo)航:第1部分 543
25.1 準(zhǔn)備示例項(xiàng)目 544
25.2 開始學(xué)習(xí)路由 546
25.2.1 創(chuàng)建路由配置 546
25.2.2 創(chuàng)建路由組件 548
25.2.3 更新根模塊 548
25.2.4 完成配置 549
25.2.5 添加導(dǎo)航鏈接 550
25.2.6 理解路由的效果 552
25.3 完成路由實(shí)現(xiàn) 554
25.3.1 在組件中處理路由變化 554
25.3.2 使用路由參數(shù) 556
25.3.3 在代碼中導(dǎo)航 562
25.3.4 接收導(dǎo)航事件 564
25.3.5 刪除事件綁定和支持代碼 566
25.4 本章小結(jié) 568
第26章 路由與導(dǎo)航:第2部分 569
26.1 準(zhǔn)備示例項(xiàng)目 569
26.2 使用通配符和重定向 575
26.2.1 在路由中使用通配符 575
26.2.2 在路由中使用重定向 577
26.3 在組件內(nèi)部導(dǎo)航 578
26.3.1 響應(yīng)正在發(fā)生的路由變化 579
26.3.2 為活動(dòng)路由設(shè)置不同樣式的鏈接 581
26.3.3 修復(fù)All按鈕 584
26.4 創(chuàng)建子路由 585
26.4.1 創(chuàng)建子路由出口 586
26.4.2 從子路由訪問(wèn)參數(shù) 588
26.5 本章小結(jié) 592
第27章 路由與導(dǎo)航:第3部分 593
27.1 準(zhǔn)備示例項(xiàng)目 593
27.2 守衛(wèi)路由 595
27.2.1 使用解析器推遲導(dǎo)航 595
27.2.2 避免帶有守衛(wèi)的導(dǎo)航 601
27.3 動(dòng)態(tài)加載功能模塊 613
27.3.1 創(chuàng)建一個(gè)簡(jiǎn)單的功能模塊 613
27.3.2 動(dòng)態(tài)加載模塊 614
27.3.3 守衛(wèi)動(dòng)態(tài)模塊 618
27.4 指定命名出口 620
27.4.1 創(chuàng)建附加的出口元素 621
27.4.2 在使用多個(gè)出口的情況下導(dǎo)航 623
27.5 本章小結(jié) 624
第28章 使用動(dòng)畫 625
28.1 準(zhǔn)備示例項(xiàng)目 626
28.1.1 禁用HTTP延遲 626
28.1.2 簡(jiǎn)化表格模板和路由配置 627
28.2 開始學(xué)習(xí)Angular動(dòng)畫 629
28.2.1 啟用動(dòng)畫模塊 629
28.2.2 創(chuàng)建動(dòng)畫 630
28.2.3 應(yīng)用動(dòng)畫 633
28.2.4 測(cè)試動(dòng)畫效果 635
28.3 理解內(nèi)置的動(dòng)畫狀態(tài) 637
28.4 理解元素過(guò)渡 638
28.4.1 為內(nèi)置狀態(tài)創(chuàng)建過(guò)渡 638
28.4.2 控制動(dòng)畫的過(guò)渡 639
28.5 理解動(dòng)畫樣式組 644
28.5.1 在可重用的分組中定義公共樣式 644
28.5.2 使用元素變形 646
28.5.3 應(yīng)用CSS框架樣式 647
28.6 本章小結(jié) 649
第29章 Angular單元測(cè)試 651
29.1 準(zhǔn)備示例項(xiàng)目 652
29.2 創(chuàng)建一個(gè)簡(jiǎn)單的單元測(cè)試 654
29.3 使用Jasmine完成單元測(cè)試 655
29.4 測(cè)試Angular組件 656
29.4.1 使用TestBed類完成工作 656
29.4.2 測(cè)試數(shù)據(jù)綁定 660
29.4.3 測(cè)試帶有外部模板的組件 662
29.4.4 測(cè)試組件事件 663
29.4.5 測(cè)試輸出屬性 665
29.4.6 測(cè)試輸入屬性 667
29.4.7 測(cè)試異步操作 669
29.5 測(cè)試Angular指令 671
29.6 本章小結(jié) 673