Angular開發(fā)入門與實(shí)戰(zhàn)
定 價(jià)：79 元
- 作者：蘭澤軍
- 出版時(shí)間：2021/5/1
- ISBN：9787115561084
- 出 版 社：人民郵電出版社
- 中圖法分類：TP312
- 頁碼：260
- 紙張：
- 版次：01
- 開本：16開
本書結(jié)構(gòu)完整、深入淺出，循序漸進(jìn)地將帶領(lǐng)用戶學(xué)習(xí)如何使用Angular9構(gòu)建Web應(yīng)用程序，同時(shí)書中的大量示例代碼能快速的將入門者提升到實(shí)踐者。
本書28章，將Angular9的方方面面進(jìn)行了透徹的介紹：從基礎(chǔ)知識(shí)與核心概念入手，幫助讀者豎立正確的開發(fā)理念，接下來講解了Angular9的各方面功能。除了對(duì)知識(shí)點(diǎn)的細(xì)致剖析，更提供了實(shí)例代碼以便讀者可以快速理解和掌握。本書的最大特色便是面向?qū)崙?zhàn)，幫助讀者舉一反三，從而能在真實(shí)的生產(chǎn)環(huán)境中學(xué)以致用。
1.讀者無需有前端開發(fā)基礎(chǔ)
本書假設(shè)用戶之前不了解Angular框架，或者假設(shè)用戶一直是從事Java開發(fā)的，從來沒有接觸過前端框架。本書就是專門為這樣的讀者準(zhǔn)備的，它從一開始外圍知識(shí)著手，每一章節(jié)，每一個(gè)案例以及每一段代碼都經(jīng)過精心的設(shè)計(jì)和挑選，方便用戶能快速的掌握 Angular 的實(shí)踐技能。
2.知識(shí)點(diǎn)全面
本書所有的案例基于Angular開發(fā)，也是目前Angular的最新版本。無論書中的講解和示例代碼的安排，都是基于依賴服務(wù)的最高版本進(jìn)行，大量的應(yīng)用案例甚至填補(bǔ)了官方文檔的空白。
3.章節(jié)安排合理
本書一開始是基于培訓(xùn) Reskill 的人士設(shè)計(jì)，結(jié)合筆者多年的學(xué)習(xí)新技術(shù)的經(jīng)驗(yàn)，采用由淺入深、層層遞進(jìn)的結(jié)構(gòu)，同時(shí)，本書的原稿經(jīng)過身邊同事的多次迭代反饋，里面的講解及示例始終站在初學(xué)者的立場(chǎng)闡述，讀者在學(xué)完本書后，可以直接進(jìn)入Angular項(xiàng)目組擔(dān)任開發(fā)角色。
4.示例設(shè)計(jì)專注解惑
本書主要是圍繞實(shí)踐展開，每個(gè)示例都是經(jīng)過身邊一線同事反饋迭代形成的，為了減少讀者的學(xué)習(xí)時(shí)間，書中的每個(gè)示例都是獨(dú)立的，讀者可以專注某一個(gè)示例來學(xué)習(xí)。當(dāng)讀者在工作或?qū)W習(xí)中遇到了問題，可以直接到書中找到對(duì)應(yīng)的解決方案。
·內(nèi)容全面：覆蓋基礎(chǔ)、架構(gòu)、模塊以及實(shí)戰(zhàn)示例。
·循序漸進(jìn)：由點(diǎn)及面、由淺入深，逐步擊破技術(shù)難點(diǎn)。
·注重實(shí)操：通過豐富的實(shí)例，深刻理解每個(gè)知識(shí)點(diǎn)。
在IBM擔(dān)任Java全棧工程師，擁有多年的研發(fā)和架構(gòu)經(jīng)驗(yàn)，先后參與國(guó)內(nèi)外大型項(xiàng)目的研發(fā)及架構(gòu)，如蘇寧易購(gòu)會(huì)員中心、中國(guó)移動(dòng)供應(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 跨平臺(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
書單推薦
