關(guān)于我們
書單推薦
新書推薦
|
Angular開發(fā)入門與實戰(zhàn)
本書結(jié)構(gòu)完整、深入淺出,循序漸進地將帶領(lǐng)用戶學(xué)習(xí)如何使用Angular9構(gòu)建Web應(yīng)用程序,同時書中的大量示例代碼能快速的將入門者提升到實踐者。
本書28章,將Angular9的方方面面進行了透徹的介紹:從基礎(chǔ)知識與核心概念入手,幫助讀者豎立正確的開發(fā)理念,接下來講解了Angular9的各方面功能。除了對知識點的細(xì)致剖析,更提供了實例代碼以便讀者可以快速理解和掌握。本書的最大特色便是面向?qū)崙?zhàn),幫助讀者舉一反三,從而能在真實的生產(chǎn)環(huán)境中學(xué)以致用。
1.讀者無需有前端開發(fā)基礎(chǔ)
本書假設(shè)用戶之前不了解Angular框架,或者假設(shè)用戶一直是從事Java開發(fā)的,從來沒有接觸過前端框架。本書就是專門為這樣的讀者準(zhǔn)備的,它從一開始外圍知識著手,每一章節(jié),每一個案例以及每一段代碼都經(jīng)過精心的設(shè)計和挑選,方便用戶能快速的掌握 Angular 的實踐技能。
2.知識點全面
本書所有的案例基于Angular開發(fā),也是目前Angular的最新版本。無論書中的講解和示例代碼的安排,都是基于依賴服務(wù)的最高版本進行,大量的應(yīng)用案例甚至填補了官方文檔的空白。
3.章節(jié)安排合理
本書一開始是基于培訓(xùn) Reskill 的人士設(shè)計,結(jié)合筆者多年的學(xué)習(xí)新技術(shù)的經(jīng)驗,采用由淺入深、層層遞進的結(jié)構(gòu),同時,本書的原稿經(jīng)過身邊同事的多次迭代反饋,里面的講解及示例始終站在初學(xué)者的立場闡述,讀者在學(xué)完本書后,可以直接進入Angular項目組擔(dān)任開發(fā)角色。
4.示例設(shè)計專注解惑
本書主要是圍繞實踐展開,每個示例都是經(jīng)過身邊一線同事反饋迭代形成的,為了減少讀者的學(xué)習(xí)時間,書中的每個示例都是獨立的,讀者可以專注某一個示例來學(xué)習(xí)。當(dāng)讀者在工作或?qū)W習(xí)中遇到了問題,可以直接到書中找到對應(yīng)的解決方案。
·內(nèi)容全面:覆蓋基礎(chǔ)、架構(gòu)、模塊以及實戰(zhàn)示例。
·循序漸進:由點及面、由淺入深,逐步擊破技術(shù)難點。
·注重實操:通過豐富的實例,深刻理解每個知識點。
在IBM擔(dān)任Java全棧工程師,擁有多年的研發(fā)和架構(gòu)經(jīng)驗,先后參與國內(nèi)外大型項目的研發(fā)及架構(gòu),如蘇寧易購會員中心、中國移動供應(yīng)鏈,IBM Program Work Center (IPWC)等,還在IBM內(nèi)部負(fù)責(zé)全棧開發(fā)的培訓(xùn)。
目錄
第 1篇 準(zhǔn)備篇
第 1章 Angular概述 2
1.1 為什么要用Angular 2
1.1.1 速度和性能 2
1.1.2 跨平臺運行 2
1.1.3 可伸縮性的設(shè)計 2
1.1.4 穩(wěn)定性 3
1.1.5 谷歌和微軟公司的支持 3
1.1.6 強大的生態(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的運行 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ǔ)知識 9
2.1.6 CSS布局實戰(zhàn) 11
2.2 掌握Node. js和npm基礎(chǔ) 14
2.3 TypeScript基礎(chǔ)知識 15
2.4 Web組件知識 15
2.4.1 什么是MVVM模式 15
2.4.2 MVVM模式的優(yōu)點 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運行環(huán)境 17
3.2 如何使用node命令 18
3.3 Node.js模塊知識 18
3.3.1 exports對象 18
3.3.2 require()函數(shù) 19
3.3.3 module對象 19
3.4 npm基礎(chǔ) 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項目開發(fā)環(huán)境 23
3.6.1 安裝IDE 23
3.6.2 Node.js項目結(jié)構(gòu) 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 調(diào)試Node.js項目 26
3.7 小結(jié) 27
第4章 TypeScript基礎(chǔ)知識 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] 開啟第 一個TypeScript項目 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類型保護 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 對象的析構(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項目 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開發(fā)環(huán)境 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 創(chuàng)建命令和選項 62
5.4 Angular項目結(jié)構(gòu)概述 63
5.5 如何啟動Angular項目 64
5.6 Angular項目的啟動過程 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á)式中的運算符 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數(shù)據(jù)綁定知識總結(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)聽單擊事件并實現(xiàn)當(dāng)點擊時增加計數(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路由簡介 132
10.1.1 創(chuàng)建Web應(yīng)用程序的路由模塊 132
10.1.2 理解路由服務(wù) 133
10.2 簡單的路由配置 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對象及其快照對象 141
10.3.3 [示例 route-ex200] ActivatedRoute對象及其快照對象應(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 實施延遲加載 157
10.7.3 [示例 route-ex400] 實現(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 注入依賴類實例 167
11.6.2 注入可選的依賴類實例 168
11.6.3 使用@Inject()裝飾器指定注入實例 168
11.6.4 注入Injector類對象實例 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 可觀察對象 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 隨機數(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可觀察對象的冷熱模式 193
12.7.1 冷模式的可觀察對象 193
12.7.2 熱模式的可觀察對象 194
12.8 小結(jié) 194
第 13章 Angular表單 195
13.1 什么是Angular表單 195
13.1.1 模板驅(qū)動表單 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ū)動表單相關(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 表單驗證 211
13.8.1 內(nèi)置驗證器的用法 211
13.8.2 組合使用內(nèi)置驗證器 211
13.8.3 自定義驗證器 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ū)動表單和數(shù)據(jù)綁定 214
13.10.2 [示例 form-ex200] 創(chuàng)建響應(yīng)式表單和數(shù)據(jù)綁定 217
13.11 模板驅(qū)動表單和響應(yīng)式表單可以混合使用嗎 220
13.12 小結(jié) 220
第 14章 HttpClient模塊 221
14.1 HTTP簡介 221
14.1.1 HTTP請求 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 請求帶類型的響應(yīng) 228
14.4.2 [示例 httpclient-ex100] 使用HttpClient模塊的GET請求從服務(wù)器獲取數(shù)據(jù) 228
14.5 HttpClient模塊的請求頭配置 231
14.5.1 添加請求頭 231
14.5.2 讀取完整的響應(yīng)信息 232
14.5.3 配置請求參數(shù) 232
14.5.4 修改請求頭 233
14.5.5 發(fā)出 JSONP 請求 233
14.5.6 請求非 JSON 數(shù)據(jù) 234
14.6 HttpClient模塊與RxJS配合 234
14.6.1 錯誤處理 234
14.6.2 重試 235
14.7 把數(shù)據(jù)發(fā)送到服務(wù)器 235
14.7.1 發(fā)起 POST 請求 236
14.7.2 發(fā)起 DELETE 請求 236
14.7.3 發(fā)起 PUT 請求 237
14.7.4 [示例 httpclient-ex300] 使用HttpClient模塊把數(shù)據(jù)發(fā)送到服務(wù)器 237
14.8 HTTP請求和響應(yīng)的不變性 243
14.8.1 HTTP的請求體和克隆體 243
14.8.2 清空請求體 243
14.9 Angular攔截器 243
14.9.1 創(chuàng)建攔截器 244
14.9.2 配置攔截器提供商 245
14.9.3 [示例 httpclient-ex400] 配置日志和錯誤信息的攔截器 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
你還可能感興趣
我要評論
|