●篇 準備 章 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 了解＜ng-template＞標簽 189 7.3.5 了解＜ng-container＞標簽 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 0章 表單 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篇 高階 1章 使用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 2章 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 3章 依賴注入 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 4章 通過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 5章 路由與導航 339 15.1 路由器有什麼用 339 15.2 基礎知識 339 15.2.1 設置＜base＞標簽關聯應用目錄 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 6章 測試 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 7章 實現國際化 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 8章 編譯與部署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 理解Angu數據 與AOT 385 18.3.1數據的限制 385 18.3.2 理解AOT的工作 原理 385 18.4 部署Angular應用 386 18.4.1 最簡化的部署方式 386 18.4.2 為生產環境準備的部署 方式 387 9章 頁面靜態化 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 22.3.7 查看完整的首頁原型 效果 422 第23章 實現新聞頭條客戶端導航欄 424 23.1 導航欄概述 424 23.2 導航欄需求分析 424 23.3 導航欄架構設計 424 23.4 實例78：實現新聞頭條客戶端新聞分類 425 23.4.1 新建新聞分類服務 425 23.4.2 解析新聞分類API 數據 425 23.4.3 展示新聞分類 426 23.5 實例79：實現新聞頭條客戶端新聞列表 427 23.5.1 新建新聞列表服務 427 23.5.2 解析新聞列表API 數據 428 23.5.3 展示新聞列表 430 23.6 實例80：實現新聞分類與新聞列表組件通信 433 23.6.1 監聽導航欄單擊 事件 433 23.6.2 自定義導航切換 事件 433 23.6.3 監聽導航切換事件 434 23.6.4 運行應用 435 第24章 實現新聞頭條客戶端新聞 詳情頁面 436 24.1 新聞詳情頁面概述 436 24.2 新聞詳情頁面需求分析 436 24.3 新聞詳情頁面架構設計 437 24.4 實例81：實現新聞頭條客戶端新聞詳情頁面 437 24.4.1 新建新聞詳情組件及 服務 437 24.4.2 獲取新聞詳情數據 437 24.4.3 展示新聞詳情 438 24.4.4 創建首頁組件 439 24.4.5 創建路由器 439 24.4.6 修改新聞列表組件 440 24.4.7 接收路由參數 441 24.4.8 增加返回按鈕 442 24.4.9 運行應用 442 參考文獻 444