Angular開發(fā)入門與實(shí)戰(zhàn)

目錄
第 1篇　準(zhǔn)備篇
第 1章 Angular概述　2
1.1　為什么要用Angular　2
1.1.1　速度和性能　2
1.1.2　跨平臺(tái)運(yùn)行　2
1.1.3　可伸縮性的設(shè)計(jì)　2
1.1.4　穩(wěn)定性　3
1.1.5　谷歌和微軟公司的支持　3
1.1.6　強(qiáng)大的生態(tài)系統(tǒng)　3
1.2　Angular的版本　3
1.3　Angular的核心概念　4
1.3.1　組件　4
1.3.2　模板和數(shù)據(jù)綁定　4
1.3.3　服務(wù)　4
1.3.4　依賴注入　4
1.3.5　指令　5
1.3.6　管道　5
1.3.7　模塊　5
1.4　Angular的運(yùn)行　5
1.5　小結(jié)　5
第 2章 Angular開發(fā)基礎(chǔ)　6
2.1　了解Web開發(fā)基礎(chǔ)　6
2.1.1　客戶端和服務(wù)器通信　6
2.1.2　什么是HTML　7
2.1.3　什么是DOM　8
2.1.4　HTML特性與DOM屬性　8
2.1.5　CSS基礎(chǔ)知識(shí)　9
2.1.6　CSS布局實(shí)戰(zhàn)　11
2.2　掌握Node. js和npm基礎(chǔ)　14
2.3　TypeScript基礎(chǔ)知識(shí)　15
2.4　Web組件知識(shí)　15
2.4.1　什么是MVVM模式　15
2.4.2　MVVM模式的優(yōu)點(diǎn)　15
2.5　選擇適合的開發(fā)工具　15
2.6　如何學(xué)習(xí)Angular　16
2.7　小結(jié)　16
第3章　Node.js和npm基礎(chǔ)　17
3.1　配置Node.js運(yùn)行環(huán)境　17
3.2　如何使用node命令　18
3.3　Node.js模塊知識(shí)　18
3.3.1　exports對(duì)象　18
3.3.2　require()函數(shù)　19
3.3.3　module對(duì)象　19
3.4　npm基礎(chǔ)　20
3.4.1　使用npm命令安裝模塊　20
3.4.2　更新模塊　21
3.4.3　卸載模塊　21
3.5　開啟一個(gè)Node.js項(xiàng)目　21
3.5.1　初始化Node.js項(xiàng)目　21
3.5.2　安裝Express框架　22
3.5.3　啟動(dòng)Node.js項(xiàng)目　23
3.6　搭建Node.js項(xiàng)目開發(fā)環(huán)境　23
3.6.1　安裝IDE　23
3.6.2　Node.js項(xiàng)目結(jié)構(gòu)　24
3.6.3　node_modules文件夾的作用　24
3.6.4　package.json文件　25
3.6.5　識(shí)別模塊的版本號(hào)　25
3.6.6　package-lock.json文件的作用　26
3.6.7　調(diào)試Node.js項(xiàng)目　26
3.7　小結(jié)　27
第4章　TypeScript基礎(chǔ)知識(shí)　28
4.1　什么是TypeScript　28
4.2　快速上手TypeScript　29
4.2.1　安裝TypeScript　29
4.2.2 轉(zhuǎn)譯TypeScript　29
4.2.3　[示例 tsc-ex100] 開啟第 一個(gè)TypeScript項(xiàng)目　30
4.3　TypeScript數(shù)據(jù)類型　31
4.3.1　TypeScript類型注解　31
4.3.2　TypeScript基礎(chǔ)數(shù)據(jù)類型　32
4.3.3　TypeScript中的類型轉(zhuǎn)換　35
4.3.4　TypeScript類型斷言　36
4.3.5　TypeScript類型保護(hù)　37
4.3.6　TypeScript的聯(lián)合類型　38
4.3.7　TypeScript的類型別名　38
4.3.8　TypeScript的交叉類型　38
4.4　TypeScript的函數(shù)與參數(shù)　39
4.4.1　箭頭函數(shù)　39
4.4.2　TypeScript函數(shù)類型　39
4.4.3　函數(shù)中的可選參數(shù)　40
4.4.4　函數(shù)中的默認(rèn)參數(shù)　40
4.5　TypeScript數(shù)組　41
4.5.1　TypeScript數(shù)組類型　41
4.5.2　使用TypeScript數(shù)組的查找和檢索方法　41
4.6　TypeScript接口　42
4.7　TypeScript類　43
4.7.1　類的構(gòu)造函數(shù)　43
4.7.2　類的方法和屬性　44
4.7.3　類的繼承　45
4.7.4　類的存取器方法　46
4.8　TypeScript映射類型　46
4.8.1　Partial 映射類型　46
4.8.2　Readonly 映射類型　47
4.8.3　Exclude映射類型　47
4.9　TypeScript的相等性判斷　48
4.9.1　非嚴(yán)格相等比較　48
4.9.2　嚴(yán)格相等比較 　48
4.10　TypeScript析構(gòu)表達(dá)式　48
4.10.1　對(duì)象的析構(gòu)表達(dá)式　49
4.10.2　數(shù)組的析構(gòu)表達(dá)式　49
4.11　TypeScript模塊　50
4.11.1　導(dǎo)出聲明　50
4.11.2　導(dǎo)出語句　50
4.11.3　默認(rèn)導(dǎo)出　51
4.11.4　導(dǎo)入內(nèi)容　51
4.12　小結(jié)　52
第 2篇　入門篇
第5章 快速開啟Angular項(xiàng)目　54
5.1　初識(shí)Angular CLI　54
5.1.1　安裝Angular CLI　54
5.1.2　運(yùn)行Angular CLI　55
5.1.3　卸載和更新Angular CLI　56
5.1.4　[示例 cli-ex100] 快速開啟一個(gè)Angular項(xiàng)目　56
5.2 搭建Angular開發(fā)環(huán)境　58
5.2.1 擴(kuò)展IDE的功能　58
5.2.2 [示例 cli-ex200] 在運(yùn)行時(shí)編輯項(xiàng)目　59
5.2.3 編譯時(shí)的錯(cuò)誤提醒　60
5.2.4 運(yùn)行時(shí)的錯(cuò)誤提醒　61
5.3 Angular CLI常用命令和選項(xiàng)　61
5.3.1　初始化命令和選項(xiàng)　61
5.3.2　創(chuàng)建命令和選項(xiàng)　62
5.4　Angular項(xiàng)目結(jié)構(gòu)概述　63
5.5　如何啟動(dòng)Angular項(xiàng)目　64
5.6　Angular項(xiàng)目的啟動(dòng)過程　65
5.7　小結(jié)　65
第6章 Angular組件詳解　66
6.1　什么是Angular組件　66
6.2　組件模板的種類　67
6.2.1　內(nèi)聯(lián)模板　67
6.2.2　外部模板　68
6.2.3　矢量圖模板　68
6.3　組件樣式　68
6.4　組件類的構(gòu)成　69
6.4.1　組件類裝飾器　69
6.4.2　組件類基礎(chǔ)　70
6.5　組件類與模板的數(shù)據(jù)綁定方式　70
6.5.1　什么是單向數(shù)據(jù)綁定　70
6.5.2　使用插值顯示屬性的值　71
6.5.3　[示例 components-ex100] 使用插值顯示屬性的值　71
6.5.4　屬性綁定方式　72
6.5.5　事件綁定　80
6.5.6　[示例 components-ex600] 事件綁定　81
6.5.7　雙向數(shù)據(jù)綁定　82
6.5.8　[示例 components-ex700] 雙向數(shù)據(jù)綁定　82
6.6　組件的生命周期　84
6.7　組件的交互　85
6.7.1　從創(chuàng)建子組件開始　85
6.7.2　[示例 components-ex800] 父組件拆分為子組件　85
6.7.3　父子組件的交互　87
6.8　小結(jié)　90
第7章 Angular模板　91
7.1　Angular模板語言基礎(chǔ)　91
7.2　模板表達(dá)式和模板語句的基本用法　91
7.2.1　模板表達(dá)式的基本用法　92
7.2.2　模板表達(dá)式中的運(yùn)算符　93
7.2.3　模板語句的基本用法　94
7.3　模板引用　94
7.3.1　模板引用變量　94
7.3.2　@ViewChild()裝飾器　95
7.3.3　[示例 template-ex100] 使用@ViewChild()裝飾器引用模板元素　95
7.3.4　@ViewChildren()裝飾器　97
7.3.5　[示例 template-ex200] 使用@ViewChildren()裝飾器引用多個(gè)模板元素　98
7.4　Angular數(shù)據(jù)綁定知識(shí)總結(jié)　98
7.4.1　單向?qū)傩越壎ā?8
7.4.2　單向事件綁定　99
7.4.3　雙向數(shù)據(jù)綁定　100
7.4.4　[示例 template-ex300] 雙向數(shù)據(jù)綁定　100
7.5　小結(jié)　102
第8章 Angular指令應(yīng)用　103
8.1　Angular結(jié)構(gòu)型指令　103
8.1.1　NgIf指令　103
8.1.2　[示例 directive-ex100] 使用NgIf指令顯示和隱藏元素　103
8.1.3　NgFor指令　105
8.1.4　[示例 directive-ex200] 使用NgFor指令顯示列表　105
8.1.5　NgSwitch指令　106
8.1.6　[示例 directive-ex300] 使用NgSwitch指令顯示星期幾　107
8.1.7　ng-container分組元素　108
8.2　Angular屬性型指令　109
8.2.1　NgClass指令　109
8.2.2　NgStyle指令　109
8.2.3　NgContent指令　110
8.2.4　[示例 directive-ex400] 使用NgContent指令創(chuàng)建可重用添加按鈕組件　112
8.2.5　在@ContentChildren()裝飾器中使用NgContent指令　113
8.2.6　[示例 directive-ex500] 使用@ContentChildren()裝飾器查詢子組件列表　114
8.3　創(chuàng)建指令　116
8.3.1　在指令中訪問DOM屬性　117
8.3.2　[示例 directive-ex600] 使用自定義指令更改按鈕大小　117
8.3.3　在指令中監(jiān)聽事件　119
8.3.4　[示例 directive-ex700] 在指令中監(jiān)聽事件　119
8.3.5　在指令中使用@HostBinding()裝飾器綁定DOM屬性　121
8.3.6　[示例 directive-ex800] 在指令中使用@HostBinding()裝飾器綁定DOM屬性　121
8.3.7　在指令中使用@HostListener()裝飾器監(jiān)聽DOM事件　122
8.3.8　[示例 directive-ex900] 監(jiān)聽單擊事件并實(shí)現(xiàn)當(dāng)點(diǎn)擊時(shí)增加計(jì)數(shù)　122
8.4　小結(jié)　124
第9章　Angular模塊　125
9.1　什么是Angular模塊　125
9.1.1　Angular根模塊　125
9.1.2　Angular特性模塊　127
9.2　常用內(nèi)置模塊　127
9.3　Angular模塊業(yè)務(wù)分類　128
9.3.1　理解核心模塊　128
9.3.2　防止重復(fù)導(dǎo)入核心模塊　129
9.3.3　理解共享模塊　129
9.4　如何正確地分割模塊　130
9.5　小結(jié)　130
第3篇　應(yīng)用篇
第 10章　Angular路由功能　132
10.1　Angular路由簡(jiǎn)介　132
10.1.1　創(chuàng)建Web應(yīng)用程序的路由模塊　132
10.1.2　理解路由服務(wù)　133
10.2　簡(jiǎn)單的路由配置　133
10.2.1　基本路由配置　134
10.2.2　路由器出口　134
10.2.3　使用路由器鏈接　136
10.2.4　路由鏈接的激活狀態(tài)　137
10.2.5　[示例 route-ex100] 使用路由器鏈接和路由鏈接的激活狀態(tài)　137
10.3　路由器狀態(tài)　139
10.3.1　路由器狀態(tài)和激活路由狀態(tài)　139
10.3.2　ActivatedRoute對(duì)象及其快照對(duì)象　141
10.3.3　[示例 route-ex200] ActivatedRoute對(duì)象及其快照對(duì)象應(yīng)用示例　142
10.4　路由器觸發(fā)的事件　143
10.5　在路由中傳遞參數(shù)　144
10.5.1　傳遞配置參數(shù)　144
10.5.2　傳遞路徑參數(shù)　145
10.5.3　傳遞查詢參數(shù)　146
10.5.4　[示例 route-ex300] 使用路由傳遞參數(shù)　148
10.6　路由守衛(wèi)　152
10.6.1　路由守衛(wèi)的基本概念　152
10.6.2　配置路由守衛(wèi)　153
10.6.3　CanActivate守衛(wèi)應(yīng)用　154
10.6.4　CanActivateChild守衛(wèi)應(yīng)用　155
10.6.5　CanDeactivate守衛(wèi)應(yīng)用　155
10.6.6　Resolve守衛(wèi)應(yīng)用　156
10.6.7　CanLoad守衛(wèi)應(yīng)用　156
10.7　路由器的延遲加載　157
10.7.1　延遲加載　157
10.7.2　實(shí)施延遲加載　157
10.7.3　[示例 route-ex400] 實(shí)現(xiàn)路由器的延遲加載功能　159
10.8　小結(jié)　160
第 11章 Angular服務(wù)和依賴注入　161
11.1　為什么需要服務(wù)　161
11.2　什么是依賴注入　162
11.3　創(chuàng)建可注入的服務(wù)類　162
11.4　選擇注入器　163
11.5　配置提供商　164
11.5.1　提供商的類型 　164
11.5.2　配置方法　164
11.6　在類中注入服務(wù)　167
11.6.1　注入依賴類實(shí)例　167
11.6.2　注入可選的依賴類實(shí)例　168
11.6.3　使用@Inject()裝飾器指定注入實(shí)例　168
11.6.4　注入Injector類對(duì)象實(shí)例　168
11.6.5　[示例 injection-ex100] Angular配置和使用依賴注入　169
11.7　創(chuàng)建依賴　174
11.8　小結(jié)　174
第 12章 RxJS響應(yīng)式編程基礎(chǔ)　175
12.1　響應(yīng)式編程的基本概念　175
12.1.1　異步數(shù)據(jù)流　175
12.1.2　可觀察對(duì)象　176
12.2　RxJS的概念　177
12.3　RxJS創(chuàng)建器　179
12.3.1　of 創(chuàng)建器　179
12.3.2　from 創(chuàng)建器　179
12.3.3　range 創(chuàng)建器　180
12.3.4　fromEvent 創(chuàng)建器　180
12.3.5　timer 創(chuàng)建器　181
12.3.6　interval 創(chuàng)建器　181
12.3.7　defer 創(chuàng)建器　182
12.3.8　隨機(jī)數(shù)創(chuàng)建器　182
12.4　RxJS基本操作符　183
12.4.1　map 操作符　183
12.4.2　tap 操作符　184
12.4.3　filter 操作符　184
12.4.4　mapTo 操作符　185
12.4.5　retry 操作符　185
12.5　RxJS合并操作符　186
12.5.1　concat 操作符　186
12.5.2　merge 操作符　186
12.5.3　zip操作符　187
12.6　RxJS高階映射操作符　187
12.6.1　concatMap 操作符　188
12.6.2　mergeMap 操作符　189
12.6.3　switchMap 操作符　190
12.6.4　exhaustMap 操作符　191
12.7　RxJS可觀察對(duì)象的冷熱模式　193
12.7.1　冷模式的可觀察對(duì)象　193
12.7.2　熱模式的可觀察對(duì)象　194
12.8　小結(jié)　194
第 13章 Angular表單　195
13.1　什么是Angular表單　195
13.1.1　模板驅(qū)動(dòng)表單　195
13.1.2　響應(yīng)式表單　196
13.2　表單模型　196
13.2.1　表單模型的容器　196
13.2.2　FormControl類　197
13.2.3　FormArray類　198
13.2.4　FormGroup類　198
13.3　表單指令　199
13.4　表單數(shù)據(jù)訪問器　200
13.5　模板驅(qū)動(dòng)表單相關(guān)指令　202
13.5.1　NgForm指令　202
13.5.2　NgModel指令　203
13.5.3　NgModelGroup指令　205
13.6　響應(yīng)式表單相關(guān)指令　206
13.6.1　FormControlDirective指令　207
13.6.2　FormGroupDirective指令　207
13.6.3　FormControlName指令　208
13.6.4　FormGroupName指令　208
13.6.5　FormArrayName指令　209
13.7　表單構(gòu)建器生成表單控件　210
13.8　表單驗(yàn)證　211
13.8.1　內(nèi)置驗(yàn)證器的用法　211
13.8.2　組合使用內(nèi)置驗(yàn)證器　211
13.8.3　自定義驗(yàn)證器　211
13.8.4　表單控件狀態(tài)的CSS樣式類　212
13.9　使用 ngSubmit 事件提交表單　213
13.10　創(chuàng)建兩種類型的表單　214
13.10.1　[示例 form-ex100] 創(chuàng)建模板驅(qū)動(dòng)表單和數(shù)據(jù)綁定　214
13.10.2　[示例 form-ex200] 創(chuàng)建響應(yīng)式表單和數(shù)據(jù)綁定　217
13.11　模板驅(qū)動(dòng)表單和響應(yīng)式表單可以混合使用嗎　220
13.12　小結(jié)　220
第 14章　HttpClient模塊　221
14.1 HTTP簡(jiǎn)介　221
14.1.1 HTTP請(qǐng)求　222
14.1.2 HTTP響應(yīng)　222
14.2 應(yīng)用HttpClient模塊　223
14.3 創(chuàng)建RESTful API服務(wù)　224
14.3.1 使用json-server創(chuàng)建RESTful API服務(wù)　224
14.3.2 使用Angular內(nèi)存數(shù)據(jù)庫模擬服務(wù)器　225
14.4 從服務(wù)器獲取數(shù)據(jù)　227
14.4.1 請(qǐng)求帶類型的響應(yīng)　228
14.4.2 [示例 httpclient-ex100] 使用HttpClient模塊的GET請(qǐng)求從服務(wù)器獲取數(shù)據(jù)　228
14.5 HttpClient模塊的請(qǐng)求頭配置　231
14.5.1 添加請(qǐng)求頭　231
14.5.2 讀取完整的響應(yīng)信息　232
14.5.3 配置請(qǐng)求參數(shù)　232
14.5.4 修改請(qǐng)求頭　233
14.5.5 發(fā)出 JSONP 請(qǐng)求　233
14.5.6 請(qǐng)求非 JSON 數(shù)據(jù)　234
14.6 HttpClient模塊與RxJS配合　234
14.6.1 錯(cuò)誤處理　234
14.6.2 重試　235
14.7 把數(shù)據(jù)發(fā)送到服務(wù)器　235
14.7.1 發(fā)起 POST 請(qǐng)求　236
14.7.2 發(fā)起 DELETE 請(qǐng)求　236
14.7.3 發(fā)起 PUT 請(qǐng)求　237
14.7.4 [示例 httpclient-ex300] 使用HttpClient模塊把數(shù)據(jù)發(fā)送到服務(wù)器　237
14.8 HTTP請(qǐng)求和響應(yīng)的不變性　243
14.8.1 HTTP的請(qǐng)求體和克隆體　243
14.8.2 清空請(qǐng)求體　243
14.9 Angular攔截器　243
14.9.1 創(chuàng)建攔截器　244
14.9.2 配置攔截器提供商　245
14.9.3 [示例 httpclient-ex400] 配置日志和錯(cuò)誤信息的攔截器　245
14.10 小結(jié)　250
第 15章　Angular管道　251
15.1 Angular管道的用法　251
15.2 Angular內(nèi)置管道　252
15.2.1 async管道　252
15.2.2 currency管道　252
15.2.3 date管道　254
15.2.4 i18nSelect管道　258
15.3 自定義管道　258
15.3.1 自定義管道的步驟　259
15.3.2 [示例 pipe-ex100] 創(chuàng)建排序自定義管道　259
15.4 小結(jié)　260