Angular 開發入門與實戰

本書結構完整、深入淺出，循序漸進地將帶領用戶學習如何使用Angular9構建Web應用程序，同時書中的大量示例代碼能快速的將入門者提升到實踐者。

本書28章，將Angular9的方方面面進行了透徹的介紹：從基礎知識與核心概念入手，幫助讀者豎立正確的開發理念，接下來講解了Angular9的各方面功能。除了對知識點的細致剖析，更提供了實例代碼以便讀者可以快速理解和掌握。本書的最大特色便是面向實戰，幫助讀者舉一反三，從而能在真實的生產環境中學以致用。

在IBM擔任Java全棧工程師，擁有多年的研發和架構經驗，先後參與國內外大型項目的研發及架構，如蘇寧易購會員中心、中國移動供應鏈，IBM Program Work Center (IPWC)等，還在IBM內部負責全棧開發的培訓。

目錄

第1篇準備篇

第1章Angular概述2
1．1為什麼要用Angular 2
1．1．1速度和性能2
1．1．2跨平台運行2
1．1．3可伸縮性的設計2
1 ．1．4穩定性3
1．1．5谷歌和微軟公司的支持3
1．1．6強大的生態系統3
1．2 Angular的版本3
1．3 Angular的核心概念4
1．3．1組件4
1．3．2模板和數據綁定4
1．3．3服務4
1．3．4依賴注入4
1．3．5指令5
1．3．6管道5
1．3．7模塊5
1． 4 Angular的運行5
1．5小結5

第2章Angular開發基礎6
2．1了解Web開發基礎6
2．1．1客戶端和服務器通信6
2．1．2什麼是HTML 7
2．1．3什麼是DOM 8
2．1．4 HTML特性與DOM屬性8
2．1．5 CSS基礎知識9
2．1．6 CSS佈局實戰11
2．2掌握Node．js和npm基礎14
2．3 TypeScript基礎知識15
2．4 Web組件知識15
2．4．1什麼是MVVM模式15
2．4．2 MVVM模式的優點15
2．5選擇適合的開發工具15
2．6如何學習Angular 16
2．7小結16

第3章Node．js和npm基礎17
3．1配置Node．js運行環境17
3．2如何使用node命令18
3．3 Node．js模塊知識18
3．3．1 exports對象18
3．3．2 require()函數19
3．3．3 module對象19
3．4 npm基礎20
3．4．1使用npm命令安裝模塊20
3．4 ．2更新模塊21
3．4．3卸載模塊21
3．5開啟一個Node．js項目21
3．5．1初始化Node．js項目21
3．5．2安裝Express框架22
3．5．3啟動Node．js項目23
3．6搭建Node．js項目開發環境23
3．6．1安裝IDE 23
3．6．2 Node．js項目結構24
3．6．3 node_modules文件夾的作用24
3．6．4 package．json文件25
3．6．5識別模塊的版本號25
3．6．6 package-lock．json文件的作用26
3．6．7調試Node．js項目26
3．7小結27

第4章TypeScript基礎知識28
4．1什麼是TypeScript 28
4．2快速上手TypeScript 29
4．2．1安裝TypeScript 29
4．2．2轉譯TypeScript 29
4．2．3 [示例tsc-ex100]開啟第一個TypeScript項目30
4．3 TypeScript數據類型31
4．3．1 TypeScript類型註解31
4．3．2 TypeScript基礎數據類型32
4．3．3 TypeScript中的類型轉換35
4．3．4 TypeScript類型斷言36
4．3．5 TypeScript類型保護37
4．3．6 TypeScript的聯合類型38
4．3．7 TypeScript的類型別名38
4．3．8 TypeScript的交叉類型38
4． 4 TypeScript的函數與參數39
4．4．1箭頭函數39
4．4．2 TypeScript函數類型39
4．4．3函數中的可選參數40
4．4．4函數中的默認參數40
4．5 TypeScript數組41
4．5．1 TypeScript數組類型41
4．5．2使用TypeScript數組的查找和檢索方法41
4．6 TypeScript接口42
4．7 TypeScript類43
4．7．1類的構造函數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非嚴格相等比較48
4．9．2嚴格相等比較48
4．10 TypeScript析構表達式48
4．10．1對象的析構表達式49
4．10．2數組的析構表達式49
4．11 TypeScript模塊50
4．11．1導出聲明50
4．11．2導出語句50
4．11．3默認導出51
4．11．4導入內容51
4．12小結52

第2篇入門篇

第5章快速開啟Angular項目54
5．1初識Angular CLI 54
5．1．1安裝Angular CLI 54
5．1．2運行Angular CLI 55
5．1．3卸載和更新Angular CLI 56
5．1．4 [示例cli-ex100]快速開啟一個Angular項目56
5．2搭建Angular開發環境58
5．2．1擴展IDE的功能58
5．2．2 [示例cli-ex200 ]在運行時編輯項目59
5．2．3編譯時的錯誤提醒60
5．2．4運行時的錯誤提醒61
5．3 Angular CLI常用命令和選項61
5．3．1初始化命令和選項61
5 ．3．2創建命令和選項62
5．4 Angular項目結構概述63
5．5如何啟動Angular項目64
5．6 Angular項目的啟動過程65
5．7小結65

第6章Angular組件詳解66
6．1什麼是Angular組件66
6．2組件模板的種類67
6．2．1內聯模板67
6．2．2外部模板68
6．2．3矢量圖模板68
6．3組件樣式68
6．4組件類的構成69
6．4．1組件類裝飾器69
6．4．2組件類基礎70
6．5組件類與模板的數據綁定方式70
6．5． 1什麼是單向數據綁定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雙向數據綁定82
6．5．8 [示例components-ex700]雙向數據綁定82
6 ．6組件的生命週期84
6．7組件的交互85
6．7．1從創建子組件開始85
6．7．2 [示例components-ex800]父組件拆分為子組件85
6．7．3父子組件的交互87
6．8小結90

第7章Angular模板91
7．1 Angular模板語言基礎91
7．2模板表達式和模板語句的基本用法91
7．2．1模板表達式的基本用法92
7． 2．2模板表達式中的運算符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()裝飾器引用多個模板元素98
7．4 Angular數據綁定知識總結98
7．4．1單向屬性綁定98
7．4．2單向事件綁定99
7．4．3雙向數據綁定100
7．4．4 [示例template-ex300]雙向數據綁定100
7．5小結102

第8章Angular指令應用103
8．1 Angular結構型指令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指令創建可重用添加按鈕組件112
8．2．5在@ContentChildren()裝飾器中使用NgContent指令113
8．2．6 [示例directive-ex500]使用@ContentChildren()裝飾器查詢子組件列表114
8．3創建指令116
8 ．3．1在指令中訪問DOM屬性117
8．3．2 [示例directive-ex600]使用自定義指令更改按鈕大小117
8．3．3在指令中監聽事件119
8．3．4 [示例directive- ex700]在指令中監聽事件119
8．3．5在指令中使用@HostBinding()裝飾器綁定DOM屬性121
8．3．6 [示例directive-ex800]在指令中使用@HostBinding()裝飾器綁定DOM屬性121
8．3．7在指令中使用@HostListener()裝飾器監聽DOM事件122
8．3．8 [示例directive-ex900]監聽單擊事件並實現當點擊時增加計數122
8．4小結124

第9章Angular模塊125
9．1什麼是Angular模塊125
9．1．1 Angular根模塊125
9．1．2 Angular特性模塊127
9．2常用內置模塊127
9．3 Angular模塊業務分類128
9．3．1理解核心模塊128
9．3．2防止重複導入核心模塊129
9．3．3理解共享模塊129
9．4如何正確地分割模塊130
9．5小結130

第3篇應用篇

第10章Angular路由功能132
10．1 Angular路由簡介132
10．1．1創建Web應用程序的路由模塊132
10．1．2理解路由服務133
10．2簡單的路由配置133
10．2．1基本路由配置134
10．2．2路由器出口134
10．2．3使用路由器鏈接136
10．2．4路由鏈接的激活狀態137
10．2．5 [示例route-ex100]使用路由器鏈接和路由鏈接的激活狀態137
10．3路由器狀態139
10．3 ．1路由器狀態和激活路由狀態139
10．3．2 ActivatedRoute對象及其快照對象141
10．3．3 [示例route-ex200] ActivatedRoute對象及其快照對象應用示例142
10．4路由器觸發的事件143
10．5在路由中傳遞參數144
10．5．1傳遞配置參數144
10．5． 2傳遞路徑參數145
10．5．3傳遞查詢參數146
10．5．4 [示例route-ex300]使用路由傳遞參數148
10．6路由守衛152
10．6．1路由守衛的基本概念152
10．6 ．2配置路由守衛153
10．6．3 CanActivate守衛應用154
10．6．4 CanActivateChild守衛應用155
10．6．5 CanDeactivate守衛應用155
10．6．6 Resolve守衛應用156
10．6．7 CanLoad守衛應用156
10．7路由器的延遲加載157
10．7．1延遲加載157
10．7．2實施延遲加載157
10．7．3 [示例route-ex400]實現路由器的延遲加載功能159
10．8小結160

第11章Angular服務和依賴注入161
11．1為什麼需要服務161
11．2什麼是依賴注入162
11．3創建可注入的服務類162
11．4選擇注入器163
11．5配置提供商164
11．5．1提供商的類型164
11．5．2配置方法164
11．6在類中註入服務167
11．6．1注入依賴類實例167
11．6．2注入可選的依賴類實例168
11．6．3使用@Inject()裝飾器指定注入實例168
11．6．4注入Injector類對象實例168
11．6．5 [示例injection-ex100] Angular配置和使用依賴注入169
11．7創建依賴174
11．8小結174

第12章RxJS響應式編程基礎175
12．1響應式編程的基本概念175
12 ．1．1異步數據流175
12．1．2可觀察對象176
12．2 RxJS的概念177
12．3 RxJS創建器179
12．3．1 of創建器179
12．3．2 from創建器179
12 ．3．3 range創建器180
12．3．4 fromEvent創建器180
12．3．5 timer創建器181
12．3．6 interval創建器181
12．3．7 defer創建器182
12．3．8隨機數創建器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可觀察對象的冷熱模式193
12．7．1冷模式的可觀察對象193
12．7．2熱模式的可觀察對象194
12．8小結194

第13章Angular表單195
13．1什麼是Angular表單195
13．1．1模板驅動表單195
13．1．2響應式表單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表單數據訪問器200
13．5模板驅動表單相關指令202
13．5．1 NgForm指令202
13．5．2 NgModel指令203
13．5．3 NgModelGroup指令205
13．6響應式表單相關指令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表單構建器生成表單控件210
13．8表單驗證211
13．8．1內置驗證器的用法211
13．8．2組合使用內置驗證器211
13．8．3自定義驗證器211
13．8．4表單控件狀態的CSS樣式類212
13．9使用ngSubmit事件提交表單213
13．10創建兩種類型的表單214
13．10．1 [示例form-ex100]創建模板驅動表單和數據綁定214
13．10．2 [示例form-ex200]創建響應式表單和數據綁定217
13．11模板驅動表單和響應式表單可以混合使用嗎220
13．12小結220

第14章HttpClient模塊221
14．1 HTTP簡介221
14．1．1 HTTP請求222
14．1．2 HTTP響應222
14． 2應用HttpClient模塊223
14．3創建RESTful API服務224
14．3．1使用json-server創建RESTful API服務224
14．3．2使用Angular內存數據庫模擬服務器225
14．4從服務器獲取數據227
14．4 ．1請求帶類型的響應228
14．4．2 [示例httpclient-ex100]使用HttpClient模塊的GET請求從服務器獲取數據228
14．5 HttpClient模塊的請求頭配置231
14．5．1添加請求頭231
14 ．5．2讀取完整的響應信息232
14．5．3配置請求參數232
14．5．4修改請求頭233
14．5．5發出JSONP請求233
14．5．6請求非JSON數據234
14．6 HttpClient模塊與RxJS配合234
14．6．1錯誤處理234
14．6．2重試235
14．7把數據發送到服務器235
14．7．1發起POST請求236
14．7．2發起DELETE請求236
14．7．3發起PUT請求237
14．7．4 [示例httpclient-ex300]使用HttpClient模塊把數據發送到服務器237
14．8 HTTP請求和響應的不變性243
14．8．1 HTTP的請求體和克隆體243
14．8．2清空請求體243
14．9 Angular攔截器243
14．9．1創建攔截器244
14．9．2配置攔截器提供商245
14．9．3 [示例httpclient-ex400]配置日誌和錯誤信息的攔截器245
14．10小結250

第15章Angular管道251
15．1 Angular管道的用法251
15．2 Angular內置管道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]創建排序自定義管道259
15．4小結260