《Angular企業級套用開發實戰》是2019年6月電子工業出版社出版的圖書，作者是柳偉衛。
基本介紹
- 中文名：Angular企業級套用開發實戰
- 作者：柳偉衛
- 出版時間：2019年6月
- 出版社：電子工業出版社
- 頁數：460 頁
- ISBN：9787121367571
- 定價：99 元
- 開本：16 開
內容簡介,目錄,
內容簡介
本書分為5篇。第1篇介紹了 Angular 的基礎概念，使讀者對 Angular 有一個初步的印象。第2篇介紹了 TypeScript 基礎，並帶領讀者快速實現了一個“用戶管理”套用，讓讀者了解到 Angular 常用的知識點。第3篇介紹了Angular 的常用知識點，包括組件、模板、指令、管道、動畫和表單。第4篇介紹了 Angular的高級知識點，包括使用Observable與RxJS實現回響式編程、Angular模組、依賴注入、通過HTTP來訪問網路資源、路由與導航、測試、實現國際化、編譯與部署Angular套用、頁面靜態化和啟用快取。第5篇帶領讀者從零開始實現了一個完整的企業級新聞頭條客戶端套用，使讀者具備 Angular 企業級套用開發的完整能力。
本書案例豐富，共有75個基於知識點的案例和6個綜合性案例，將理論講解最終落實到代碼實現上來。而且，這些案例會伴隨著圖書內容的推進，不斷趨近於工程化的項目風格，具有很高的套用價值和參考性。本書由淺及深、層層推進、結構清晰、案例豐富、通俗易懂、實用性強，特別適合Angular的初學者和進階讀者作為自學教程。另外，本書也適合社會培訓學校作為培訓教材使用，還適合大、中專院校的相關專業作為教學參考書。
目錄
第1篇 準備
第1章 Angular概述 2
1.1 Angular產生的背景 2
1.1.1 Angular與jQuery的不同 2
1.1.2 Angular與React、Vue.js
優勢對比 3
1.1.3 Angular、React、Vue.js三者
怎么選 5
1.2 學習Angular需要什麼基礎 5
1.2.1 具備面向對象思維 5
1.2.2 熟悉常用的前端開發工具 5
1.2.3 具有一定的前端開發經驗 6
1.3 如何使用本書 6
1.3.1 零基礎的讀者 6
1.3.2 有後端開發經驗的讀者 7
1.3.3 有前端開發經驗的讀者 7
1.3.4 有Angular開發經驗的
讀者 7
第2章 實例1：快速開啟第一個Angular
套用 8
2.1 開發環境準備 8
2.1.1 安裝Node.js和npm 8
2.1.2 設定npm鏡像 9
2.1.3 選擇合適的IDE 10
2.1.4 安裝Angular CLI 10
2.2 創建一個套用——hello-world 11
2.2.1 使用Angular CLI初始化
套用 11
2.2.2 運行Angular套用 12
2.3 探索Angular 13
2.3.1 src資料夾 13
2.3.2 根 14
2.3.3 npm包 16
2.4 配置TypeScript庫 18
第2篇 入門
第3章 TypeScript基礎 21
3.1 了解TypeScript 21
3.1.1 TypeScript與JavaScript、ECMAScript的關係 21
3.1.2 TypeScript與Angular的
關係 22
3.1.3 使用TypeScript的優勢 22
3.1.4 TypeScript的編譯及運行 22
3.2 變數與常量 23
3.2.1 三者的作用域 23
3.2.2 變數與常量的區別 23
3.2.3 什麼是變數提升 24
3.3 TypeScript的數據類型 25
3.3.1 基本類型 25
3.3.2 對象類型 30
3.3.3 任意類型 30
3.3.4 實例2：演示任意類型的
使用 31
3.3.5 聯合類型 32
3.3.6 交集類型 32
3.4 強大的面向對象體系 33
3.4.1 類 33
3.4.2 接口 37
3.4.3 實例3：演示接口的使用 37
3.4.4 泛型 38
3.4.5 實例4：演示泛型的使用 38
3.4.6 枚舉 39
3.5 TypeScript的命名空間 40
3.5.1 聲明命名空間 40
3.5.2 實例5：聲明命名空間的
例子 41
3.5.3 命名空間體 41
3.5.4 導入別名聲明 42
3.5.5 實例6：導入別名聲明的
例子 42
3.5.6 導出聲明 43
3.5.7 合併聲明 43
3.5.8 實例7：合併聲明的例子 43
3.6 TypeScript模組 44
3.6.1 了解模組 44
3.6.2 實例8：導入聲明 45
3.6.3 實例9：導入Require
聲明 45
3.6.4 實例10：導出聲明 46
3.6.5 實例11：導出分配 46
3.6.6 了解CommonJS模組 46
3.6.7 了解AMD模式 47
3.7 裝飾器 48
3.7.1 定義裝飾器 49
3.7.2 了解裝飾器的執行時機 49
3.7.3 認識4類裝飾器 51
第4章 實例12：創建一個“用戶管理”
套用 55
4.1 創建套用 55
4.1.1 新建“用戶管理”套用 56
4.1.2 了解Angular組件 56
4.2 修改AppComponent組件 56
4.2.1 修改app.component.ts
檔案 57
4.2.2 修改app.component.html
檔案 57
4.2.3 添加套用樣式 57
4.3 實現用戶編輯器 58
4.3.1 創建用戶列表組件 58
4.3.2 添加user屬性 60
4.3.3 顯示用戶 60
4.3.4 顯示UsersComponent
視圖 60
4.3.5 創建User類 61
4.3.6 編輯用戶信息 62
4.3.7 添加FormsModule模組 63
4.3.8 聲明組件 65
4.4 展示用戶列表 65
4.4.1 模擬用戶列表數據 65
4.4.2 展示用戶列表 66
4.4.3 使用*ngFor列出用戶 66
4.4.4 添加樣式 67
4.4.5 添加事件 68
4.4.6 設定選中的樣式 70
4.5 多組件化開發 71
4.5.1 創建UserDetailComponent
組件 72
4.5.2 編輯user-detail.component.
html檔案 72
4.5.3 編輯user-detail.component.ts檔案 73
4.5.4 編輯users.component.html
檔案 73
4.6 使用服務 74
4.6.1 服務的用處 74
4.6.2 創建UserService服務 75
4.6.3 提供UserService服務 76
4.6.4 修改UsersComponent
組件 77
4.6.5 使用Observable數據 78
4.6.6 顯示訊息 79
4.7 使用路由 83
4.7.1 路由的用處 83
4.7.2 創建AppRoutingModule 84
4.7.3 添加路由出口 86
4.7.4 添加路由連結 87
4.7.5 添加儀錶盤視圖 89
4.7.6 導航用戶詳情 93
4.7.7 支持路由的UserDetail
Component組件 97
4.8 使用HTTP 100
4.8.1 啟用HTTP服務 101
4.8.2 模擬數據伺服器 102
4.8.3 通過HTTP獲取用戶
數據 105
4.8.4 修改、添加、刪除、搜尋
用戶 108
4.9 “用戶管理”套用技術點總結 119
4.9.1 Angular架構概覽 119
4.9.2 模組 120
4.9.3 組件 121
4.9.4 模板、指令和數據綁定 121
4.9.5 服務與依賴注入 121
4.9.6 路由 122
第3篇 進階
第5章 組件 124
5.1 數據展示 124
5.1.1 實例13：數據展示的
例子 124
5.1.2 使用插值表達式顯示組件
屬性 126
5.1.3 兩種模板的使用方式 126
5.1.4 在模板中使用指令 127
5.2 生命周期 127
5.2.1 生命周期鉤子 127
5.2.2 實例14：生命周期鉤子的
例子 127
5.2.3 鉤子生命周期的順序 129
5.2.4 了解OnInit鉤子 130
5.2.5 了解OnDestroy鉤子 131
5.2.6 了解OnChanges鉤子 132
5.2.7 了解DoCheck鉤子 132
5.2.8 了解AfterView鉤子 133
5.2.9 了解AfterContent鉤子 133
5.3 組件互動方式 133
5.3.1 實例15：通過@Input把數據從父組件傳到子組件 133
5.3.2 實例16：通過setter監聽輸入屬性值的變化 135
5.3.3 實例17：通過ngOnChanges( )方法監聽輸入屬性值的
變化 136
5.3.4 實例18：父組件監聽子組件的事件 138
5.3.5 實例19：父組件與子組件通過本地變數互動 140
5.3.6 實例20：父組件調用@ViewChild( )方法獲取子組件的值 141
5.3.7 實例21：父組件和子組件通過服務來通信 143
5.4 樣式 146
5.4.1 實例22：使用組件樣式的
例子 146
5.4.2 樣式的作用域 147
5.4.3 特殊的樣式選擇器 148
5.4.4 把樣式載入進組件中的
幾種方式 149
5.4.5 控制視圖的封裝模式 150
5.4.6 了解Emulated封裝模式 151
5.5 動態載入組件 152
5.5.1 實例23：動態載入組件的
例子 152
5.5.2 使用指令 157
5.5.3 載入及解析組件 158
5.5.4 運行效果 159
5.6 自定義元素 160
5.6.1 使用自定義元素 160
5.6.2 自定義元素的工作原理 162
5.6.3 把組件轉換成自定義
元素 162
5.6.4 實例24：使用自定義元素的
例子 163
第6章 模板 168
6.1 模板概述 168
6.1.1 模板的語法 168
6.1.2 模板中的HTML 168
6.2 模板表達式 169
6.2.1 模板表達式上下文 169
6.2.2 編寫模板表達式的最佳
實踐 170
6.2.3 管道操作符 170
6.2.4 安全導航操作符和空屬性
路徑 171
6.2.5 非空斷言操作符 171
6.3 模板語句 171
6.3.1 模板語句的上下文 172
6.3.2 編寫模板語句的最佳
實踐 172
6.4 數據綁定 173
6.4.1 從數據源到視圖 173
6.4.2 從視圖到數據源 173
6.4.3 雙向綁定 173
6.5 屬性綁定 174
6.5.1 單向輸入 174
6.5.2 綁定目標 174
6.5.3 一次性字元串初始化 174
6.5.4 選擇“插值表達式”還是“屬性綁定” 174
6.6 attribute、class和style綁定 175
6.6.1 attribute綁定 175
6.6.2 class綁定 175
6.6.3 style綁定 176
6.7 事件綁定 176
6.7.1 目標事件 176
6.7.2 $event和事件處理語句 177
6.7.3 使用EventEmitter類自定義
事件 177
6.8 模板引用變數 178
6.9 輸入和輸出屬性 179
第7章 指令 180
7.1 指令類型 180
7.2 屬性型指令 180
7.2.1 了解NgClass、NgStyle、NgModel指令 180
7.2.2 實例25：創建並使用屬性型
指令 181
7.2.3 實例26：回響用戶引發的
事件 183
7.2.4 實例27：使用@Input數據綁定向指令傳遞值 184
7.2.5 實例28：綁定多個屬性 186
7.3 結構型指令 187
7.3.1 了解NgIf指令 187
7.3.2 了解NgSwitch指令 187
7.3.3 了解NgFor指令 188
7.3.4 了解標籤 189
7.3.5 了解標籤 189
7.3.6 實例29：自定義結構型
指令 190
第8章 管道 193
8.1 使用管道 193
8.1.1 實例30：使用DatePipe
管道 193
8.1.2 實例31：使用UpperCasePipe管道 194
8.1.3 實例32：使用LowerCasePipe管道 194
8.1.4 實例33：使用CurrencyPipe管道 194
8.1.5 實例34：使用PercentPipe
管道 195
8.2 對管道進行參數化 195
8.3 鏈式管道 196
8.4 自定義管道 196
第9章 動畫 198
9.1 實例35：一個動畫的例子 198
9.1.1 初始化應用程式 198
9.1.2 準備工作 199
9.1.3 創建組件 199
9.1.4 運行效果 200
9.2 狀態與轉場 200
9.2.1 *狀態 201
9.2.2 void狀態 202
9.3 進場與離場 202
9.4 Animatable屬性與單位 203
9.5 自動屬性值計算 204
9.6 動畫時間線 205
9.6.1 持續時間 205
9.6.2 延遲 205
9.6.3 緩動函式 205
9.6.4 實例36：動畫時間線的
例子 205
9.7 基於關鍵幀的多階段動畫 207
9.7.1 什麼是關鍵幀和偏移量 207
9.7.2 實例37：基於關鍵幀的多階段動畫 207
9.8 並行動畫組 209
9.9 動畫回調 210
第10章 表單 212
10.1 模板驅動 212
10.1.1 實例38：創建表單 213
10.1.2 實例39：綁定數據 217
10.1.3 實例40：提交表單 219
10.2 用戶輸入 222
10.2.1 實例41：綁定用戶
輸入 223
10.2.2 實例42：通過$event對象取得用戶輸入 224
10.2.3 實例43：從一個模板引用變數中獲得用戶
輸入 225
10.2.4 實例44：Enter鍵事件 225
10.2.5 實例45：失去焦點
事件 226
10.3 表單驗證 227
10.3.1 模板驅動驗證 227
10.3.2 回響式表單驗證 228
10.3.3 自定義驗證器 231
10.3.4 自定義樣式 233
10.3.5 跨欄位交叉驗證 234
10.4 回響式表單 236
10.4.1 實例46：回響式表單的
例子 236
10.4.2 管理控制項的值 239
10.4.3 實例47：表單控制項分組的例子 240
10.4.4 實例48：嵌套的表單組的例子 243
10.4.5 使用patchValue( )方法更新部分模型 246
10.4.6 使用FormBuilder 246
10.4.7 使用FormBuilder時的表單驗證 248
10.4.8 實例49：使用FormArray管理動態控制項的
例子 249
10.5 動態表單 251
10.5.1 動態表單的優勢 252
10.5.2 實例50：動態表單的
例子 252
第4篇 高階
第11章 使用Observable與RxJS實現回響式編程 260
11.1 了解Observable機制 260
11.1.1 了解基本概念 260
11.1.2 定義觀察者 261
11.1.3 執行訂閱 262
11.1.4 創建Observable
對象 263
11.1.5 實現多播 264
11.1.6 處理錯誤 267
11.2 了解RxJS技術 268
11.2.1 創建Observable
函式 268
11.2.2 了解操作符 269
11.2.3 處理錯誤 271
11.3 了解Angular中的
Observable 272
11.3.1 EventEmitter 273
11.3.2 HTTP 273
11.3.3 AsyncPipe 274
11.3.4 Router 274
11.3.5 回響式表單 275
11.4 對比Observable和Promise 276
11.4.1 創建與訂閱 276
11.4.2 串聯 277
11.4.3 可取消 277
11.4.4 錯誤處理 277
11.4.5 總結對比結果 277
11.5 對比Observable和事件API 278
11.6 對比Observable和數組 279
第12章 Angular模組 281
12.1 模組概述 281
12.1.1 什麼是模組化 281
12.1.2 認識基本模組 282
12.1.3 認識特性模組 283
12.2 引導啟動 283
12.2.1 了解declarations
數組 284
12.2.2 了解imports數組 285
12.2.3 了解providers數組 285
12.2.4 了解bootstrap數組 285
12.3 常用模組 285
12.3.1 常用模組概述 285
12.3.2 BrowserModule和Common
Module 286
12.4 特性模組分類 286
12.4.1 領域特性模組 286
12.4.2 帶路由的特性模組 287
12.4.3 路由模組 287
12.4.4 服務特性模組 288
12.4.5 可視部件特性模組 288
12.5 入口組件 288
12.5.1 引導用的入口組件 288
12.5.2 路由用的入口組件 289
12.5.3 entryComponents 289
12.5.4 entryComponents和編
譯器 290
12.6 服務提供商 290
12.6.1 提供服務 290
12.6.2 服務提供商的
作用域 291
12.6.3 providedIn與
NgModule 291
12.6.4 使用惰性載入模組限制服務提供商的作用域 291
12.6.5 使用組件限定服務提供商的作用域 292
12.6.6 選擇模組中的服務還是組件中的服務 292
12.7 單例服務 293
12.7.1 提供單例服務 293
12.7.2 了解forRoot( ) 293
12.7.3 如何防止重複導入CoreModule 294
12.8 共享模組 295
12.8.1 實例51：共享模組的
例子 295
12.8.2 使用來自其他模組的組件和服務 296
12.9 惰性載入的特性模組 296
12.9.1 實例52：惰性載入特性
模組 296
12.9.2 了解forRoot( )與
forChild( ) 300
第13章 依賴注入 301
13.1 初識依賴注入 301
13.2 實例53：在Angular中實現依賴
注入 302
13.2.1 初始套用 303
13.2.2 創建服務 305
13.2.3 理解注入器 305
13.2.4 理解服務提供商 308
13.2.5 注入服務 312
13.2.6 單例服務 313
13.2.7 組件的子注入器 313
13.2.8 測試組件 314
13.2.9 服務依賴服務 314
13.2.10 依賴注入令牌 315
13.2.11 可選依賴 315
13.3 多級依賴注入器 315
13.3.1 注入器樹 316
13.3.2 注入器冒泡 316
13.3.3 在不同層級再次提供同一個服務 316
13.3.4 組件注入器 316
第14章 通過HTTP來訪問網路資源 318
14.1 初識HttpClient 318
14.2 認識空氣品質數據資源 318
14.3 實例54：使用HttpClient 320
14.3.1 導入HttpClient 320
14.3.2 編寫空氣品質組件 321
14.3.3 編寫空氣品質服務 321
14.3.4 注入服務到組件中 322
14.3.5 返回帶類型檢查的
回響 324
14.3.6 讀取完整的回響體 325
14.4 實例55：錯誤處理 327
14.4.1 獲取錯誤詳情 327
14.4.2 重試 328
14.5 實例56：請求非JSON格式的
數據 329
14.6 實例57：傳送數據到
伺服器 330
14.6.1 添加請求頭 330
14.6.2 發起POST請求 330
14.6.3 發起DELETE請求 331
14.6.4 發起PUT請求 331
14.7 高級用法 331
14.7.1 實例58：配置請求 331
14.7.2 實例59：請求去抖 332
14.7.3 實例60：攔截請求和
回響 333
14.7.4 實例61：監聽進度 334
14.8 XSRF防護 335
14.8.1 了解XSRF防護 335
14.8.2 實例62：如何實現XSRF防護 335
14.9 實例63：測試HTTP請求 336
14.9.1 採用Mock方式 336
14.9.2 設定環境 336
14.9.3 期望並回復請求 337
14.9.4 測試對錯誤的預期 337
第15章 路由與導航 339
15.1 路由器有什麼用 339
15.2 基礎知識 339
15.2.1 設定標籤關聯套用 339
15.2.2 從路由庫中導入
路由器 340
15.3 實例64：配置路由器 340
15.3.1 配置路由器 340
15.3.2 輸出導航生命周期中的
事件 342
15.4 實例65：設定路由出口 342
15.5 理解路由器連結 343
15.5.1 路由器狀態 343
15.5.2 激活的路由 343
15.6 路由事件 344
15.7 重定向URL 345
15.8 實戰66：一個路由器的
例子 346
15.8.1 創建套用及組件 346
15.8.2 修建組件的模板 346
15.8.3 導入並設定路由器 346
15.8.4 添加路由出口 347
15.8.5 美化界面 348
15.8.6 定義通配符路由 350
第16章 測試 352
16.1 測試準備 352
16.2 認識測試工具 353
16.2.1 認識Jasmine和
Karma 354
16.2.2 配置Jasmine和
Karma 355
16.2.3 啟用代碼覆蓋率
報告 355
16.2.4 了解測試工具 API 356
16.3 理解組件測試 357
16.3.1 實例67：單獨測試
組件類 357
16.3.2 測試組件DOM 360
16.4 實例68：測試服務 361
16.4.1 測試普通服務 362
16.4.2 測試帶有依賴的
服務 362
16.4.3 測試 HTTP 服務 363
16.5 實例69：測試屬性型指令 364
16.6 實例70：測試管道 366
16.7 調試測試程式 367
第17章 實現國際化 369
17.1 國際化概述 369
17.2 實例71：通過i18n工具來實現國際化 369
17.2.1 使用i18n屬性 370
17.2.2 在i18n屬性中添加
描述 370
17.2.3 在i18n屬性中添加
意圖 370
17.2.4 創建翻譯源檔案 371
17.2.5 了解翻譯源檔案 372
17.2.6 創建翻譯檔案 372
17.2.7 增加套用配置 373
17.2.8 運行套用 374
17.3 實例72：通過ngx-translate外掛程式來實現國際化 375
17.3.1 添加ngx-translate
外掛程式 375
17.3.2 導入並配置ngx-translate模組 375
17.3.3 注入TranslateService
服務 376
17.3.4 編寫翻譯檔案 377
17.3.5 使用ngx-translate 378
17.3.6 運行套用 379
第18章 編譯與部署Angular套用 380
18.1 編譯Angular套用 380
18.1.1 編譯概述 380
18.1.2 編譯分類 380
18.1.3 為什麼需要AOT
編譯 381
18.2 了解Angular模板編譯器
選項 381
18.3 理解Angular元數據
與AOT 385
18.3.1 理解元數據的限制 385
18.3.2 理解AOT的工作
原理 385
18.4 部署Angular套用 386
18.4.1 最簡化的部署方式 386
18.4.2 為生產環境準備的部署
方式 387
第19章 頁面靜態化 389
19.1 Universal概述 389
19.1.1 了解Universal 389
19.1.2 使用Universal的
好處 389
19.2 初始化Universal示例 390
19.3 實例74：Universal的使用 390
19.3.1 安裝工具 390
19.3.2 修改根模組
AppModule 391
19.3.3 創建AppServerModule
模組 391
19.3.4 創建main檔案 392
19.3.5 創建AppServerModule 配置檔案 392
19.3.6 創建新的構建目標，並
打包 393
19.3.7 設定伺服器環境 393
19.3.8 打包並運行套用 395
第20章 啟用快取 397
20.1 了解Service Worker 397
20.2 實例75：使用Service Worker的
例子 398
20.2.1 添加service-worker
包 398
20.2.2 用http-server啟動
伺服器 399
20.2.3 模擬網路故障 400
20.2.4 查看快取內容 400
20.2.5 修改套用 402
20.2.6 在瀏覽器中更新
套用 402
20.3 了解Service Worker的通信
機制 403
20.3.1 有可用更新和已激活
更新 404
20.3.2 檢查更新 404
20.3.3 強制激活更新 405
20.4 配置Service Worker 405
第5篇 商業實戰
第21章 新聞頭條客戶端總體設計 409
21.1 套用概述 409
21.2 需求分析 409
21.2.1 首頁需求分析 409
21.2.2 新聞詳情頁面需求
分析 410
21.3 架構設計 411
21.3.1 獲取訪問API的
密鑰 411
21.3.2 了解新聞API 412
21.4 實例76：初始化新聞頭條客戶端套用 414
21.4.1 修改app.component.
html 414
21.4.2 修改app.component.
ts 414
21.4.4 啟動套用 415
第22章 實現新聞頭條客戶端首頁 416
22.1 首頁需求分析 416
22.2 架構設計 416
22.3 實例77：實現新聞頭條客戶端
首頁 416
22.3.1 添加Angular
Material 417
22.3.2 配置動畫 417
22.3.3 導入組件模組 417
22.3.4 包含一個主題 417
22.3.5 創建組件 418
22.3.6 實現界面原型 418
