關于我們
書單推薦
新書推薦
|
Angular高級編程 主要內(nèi)容 ● 從架構的角度理解MVC模式 ● 使用Angular創(chuàng)建豐富、動態(tài)的Web應用程序客戶端 ● 使用ng工具構建Angular項目 ● 擴展和自定義Angular ● 如何對Angular項目進行單元測試 本書分為三部分。 第Ⅰ部分講解 Angular 開發(fā)的基礎知識,對 HTML、CSS、JavaScript 和TypeScript 也進行了介紹,確保對前端開發(fā)一無所知的讀者,也能夠快速上手。本部分*后還開發(fā)了一個簡單的 Web 應用程序,幫助讀者鞏固基礎知識。 第Ⅱ部分詳細講解 Angular。
內(nèi)容涵蓋 開發(fā)工具、 數(shù)據(jù)綁定、 各種指令、 事件和表單、 管道、 服務、 服務提供程序、
模塊等。 譯 者 序
Web應用程序的功能越來越豐富、用戶體驗越來越好,隨之而來的,是前端開發(fā)人員變得越來越受歡迎。
Adam Freeman是一位經(jīng)驗豐富的IT專業(yè)人士,在多家公司擔任過高級職位,還曾擔任一家全球銀行的首席技術官和首席運營官。退休之后,他熱衷于寫作和長跑。
第Ⅰ部分 Angular基礎知識
第1章 準備工作 3 1.1 需要了解什么 3 1.2 本書結構 3 1.2.1 第Ⅰ部分:Angular基礎知識 3 1.2.2 第Ⅱ部分:Angular詳解 4 1.2.3 第Ⅲ部分:Angular高級功能 4 1.3 本書不介紹什么 4 1.4 Angular開發(fā)需要什么軟件 4 1.5 如何設置開發(fā)環(huán)境 4 1.6 學習示例時遇到問題怎么辦 4 1.7 如果在書中發(fā)現(xiàn)錯誤怎么辦 5 1.8 大量示例 5 1.9 獲取示例代碼 6 1.10 聯(lián)系作者 6 1.11 如果你真的很喜歡這本書 7 1.12 如果你不喜歡這本書 7 1.13 本章小結 7 第2章 第一個Angular應用程序 9 2.1 準備開發(fā)環(huán)境 9 2.1.1 安裝Node.js 9 2.1.2 安裝angular-cli包 10 2.1.3 安裝編輯器 11 2.1.4 安裝瀏覽器 11 2.2 創(chuàng)建并準備項目 11 2.2.1 創(chuàng)建項目 11 2.2.2 啟動開發(fā)工具 12 2.3 向項目中添加Angular功能 13 2.3.1 創(chuàng)建數(shù)據(jù)模型 14 2.3.2 向用戶顯示數(shù)據(jù) 16 2.3.3 更新組件 17 2.3.4 設置HTML元素的樣式 20 2.3.5 顯示待辦事項列表 21 2.3.6 創(chuàng)建雙向數(shù)據(jù)綁定 24 2.3.7 添加待辦事項 26 2.3.8 顯示完成的待辦事項 29 2.4 本章小結 31 第3章 將Angular放在上下文中 33 3.1 理解Angular的強項 33 3.2 比較Angular、React和Vue.js 34 3.3 理解MVC模式 35 3.3.1 理解模型 36 3.3.2 理解控制器/組件 37 3.3.3 理解視圖/模板 38 3.4 理解RESTful服務 38 3.5 常見的設計缺陷 39 3.5.1 將邏輯放錯地方 40 3.5.2 數(shù)據(jù)存儲采用的數(shù)據(jù)格式 40 3.5.3 足夠的知識足以制造麻煩 40 3.6 本章小結 40 第4章 HTML和CSS入門 43 4.1 準備示例項目 43 4.2 理解HTML 45 4.2.1 理解空元素 45 4.2.2 理解屬性 45 4.2.3 應用無值屬性 46 4.2.4 在屬性中引用字面量 46 4.2.5 理解元素內(nèi)容 46 4.2.6 理解文檔結構 47 4.3 理解Bootstrap 48 4.3.1 應用基本的Bootstrap類 48 4.3.2 使用Bootstrap樣式化表格 51 4.3.3 使用Bootstrap創(chuàng)建表單 52 4.3.4 使用Bootstrap創(chuàng)建網(wǎng)格 53 4.4 本章小結 58 第5章 JavaScript與TypeScript:第1部分 59 5.1 準備示例項目 60 5.2 使用語句 61 5.3 定義和使用函數(shù) 62 5.3.1 定義帶形參的函數(shù) 63 5.3.2 定義返回結果的函數(shù) 64 5.3.3 將函數(shù)用作其他函數(shù)的實參 64 5.4 使用變量和類型 65 5.4.1 使用變量閉包 67 5.4.2 使用基本數(shù)據(jù)類型 67 5.5 使用JavaScript操作符 69 5.5.1 使用條件語句 69 5.5.2 相等操作符和恒等操作符 70 5.5.3 顯式類型轉換 71 5.6 處理數(shù)組 72 5.6.1 使用數(shù)組字面量 73 5.6.2 數(shù)組內(nèi)容的讀取和修改 73 5.6.3 遍歷數(shù)組內(nèi)容 73 5.6.4 spread操作符 74 5.6.5 使用內(nèi)置數(shù)組方法 75 5.7 本章小結 76 第6章 JavaScript與TypeScript:第2部分 77 6.1 準備示例項目 77 6.2 使用對象 78 6.2.1 使用對象字面量 78 6.2.2 將函數(shù)用作方法 79 6.2.3 定義類 79 6.3 處理JavaScript模塊 82 6.4 有用的TypeScript特性 86 6.4.1 使用類型注解 86 6.4.2 使用元組 90 6.4.3 使用可索引類型 91 6.4.4 使用訪問修飾符 91 6.5 本章小結 92 第7章 SportsStore:一個真實的應用程序 93 7.1 準備項目 93 7.1.1 安裝額外的NPM軟件包 94 7.1.2 準備RESTful Web服務 95 7.1.3 準備HTML文件 97 7.1.4 創(chuàng)建文件夾結構 97 7.1.5 運行示例應用程序 98 7.1.6 啟動RESTful Web服務 98 7.2 準備Angular項目功能 98 7.2.1 更新根組件 98 7.2.2 更新根模塊 99 7.2.3 檢查引導文件 100 7.3 啟動數(shù)據(jù)模型 100 7.3.1 創(chuàng)建模型類 100 7.3.2 創(chuàng)建虛擬數(shù)據(jù)源 101 7.3.3 創(chuàng)建模型存儲庫 102 7.3.4 創(chuàng)建功能模塊 103 7.4 啟動商店 103 7.4.1 創(chuàng)建Store組件和模板 104 7.4.2 創(chuàng)建商店功能模塊 105 7.4.3 更新根組件和根模塊 106 7.5 添加商店功能:產(chǎn)品詳情 107 7.5.1 顯示產(chǎn)品詳情 107 7.5.2 添加類別選擇 108 7.5.3 添加產(chǎn)品分頁功能 110 7.5.4 創(chuàng)建自定義指令 112 7.6 本章小結 116 第8章 SportsStore:訂單和結賬 117 8.1 準備示例應用程序 117 8.2 創(chuàng)建購物車 117 8.2.1 創(chuàng)建購物車模型 117 8.2.2 創(chuàng)建購物車概覽組件 119 8.2.3 將購物車集成到商店中 120 8.3 添加URL路由 123 8.3.1 創(chuàng)建購物車詳情和結賬組件 124 8.3.2 創(chuàng)建和應用路由配置 124 8.3.3 應用程序導航 126 8.3.4 路由守衛(wèi) 128 8.4 完成購物車詳情功能 130 8.5 處理訂單 133 8.5.1 擴展模型 133 8.5.2 收集訂單詳情 135 8.6 使用RESTful Web服務 138 8.7 本章小結 140 第9章 SportsStore:管理 141 9.1 準備示例應用程序 141 9.1.1 創(chuàng)建模塊 141 9.1.2 配置URL路由系統(tǒng) 144 9.1.3 導航到管理URL 145 9.2 實現(xiàn)身份驗證 146 9.2.1 理解身份驗證系統(tǒng) 146 9.2.2 擴展數(shù)據(jù)源 147 9.2.3 創(chuàng)建身份驗證服務 148 9.2.4 啟用身份驗證 149 9.3 擴展數(shù)據(jù)源和存儲庫 151 9.4 創(chuàng)建管理功能結構 155 9.4.1 創(chuàng)建占位符組件 155 9.4.2 準備常用內(nèi)容和功能模塊 156 9.4.3 實現(xiàn)產(chǎn)品功能 158 9.4.4 實現(xiàn)訂單功能 162 9.5 本章小結 164 第10章 SportsStore:漸進式特性和部署 165 10.1 準備示例應用程序 165 10.2 添加漸進式特性 165 10.2.1 安裝PWA包 165 10.2.2 緩存數(shù)據(jù)URL 166 10.2.3 響應對連接的更改 167 10.3 為部署準備應用程序 169 10.3.1 創(chuàng)建數(shù)據(jù)文件 169 10.3.2 創(chuàng)建服務器 169 10.3.3 更改存儲庫類中的Web服務URL 171 10.4 構建和測試應用程序 172 10.5 將SportsStore應用程序容器化 174 10.5.1 安裝Docker 174 10.5.2 準備應用程序 174 10.5.3 創(chuàng)建Docker容器 174 10.5.4 運行應用程序 175 10.6 本章小結 177 第Ⅱ部分 Angular詳解 第11章 理解Angular項目和工具 181 11.1 創(chuàng)建新的Angular項目 181 11.2 了解項目結構 182 11.2.1 了解src文件夾 183 11.2.2 了解包文件夾 184 11.3 使用開發(fā)工具 187 11.3.1 了解開發(fā)HTTP服務器 187 11.3.2 了解構建過程 188 11.3.3 使用linter 192 11.4 理解Angular應用程序是如何工作的 194 11.4.1 理解HTML文檔 194 11.4.2 理解應用程序引導 195 11.4.3 理解Angular根模塊 196 11.4.4 理解Angular組件 197 11.4.5 理解內(nèi)容顯示 197 11.5 了解生產(chǎn)構建過程 199 11.5.1 了解預編譯 199 11.5.2 了解差異加載 199 11.5.3 運行生產(chǎn)構建 201 11.6 在Angular項目中開始開發(fā) 201 11.6.1 創(chuàng)建數(shù)據(jù)模型 201 11.6.2 創(chuàng)建組件和模板 205 11.6.3 配置根Angular模塊 206 11.7 本章小結 207 第12章 使用數(shù)據(jù)綁定 209 12.1 準備示例項目 210 12.2 理解單向數(shù)據(jù)綁定 210 12.2.1 理解綁定目標 212 12.2.2 理解表達式 213 12.2.3 理解括號 214 12.2.4 理解宿主元素 214 12.3 使用標準屬性和屬性綁定 215 12.3.1 使用標準屬性綁定 215 12.3.2 使用字符串插入綁定 216 12.3.3 使用元素屬性綁定 217 12.4 設置CSS類和樣式 218 12.4.1 使用類綁定 218 12.4.2 使用樣式綁定 223 12.5 更新應用程序的數(shù)據(jù) 226 12.6 本章小結 228 第13章 使用內(nèi)置指令 229 13.1 準備示例項目 230 13.2 使用內(nèi)置指令 231 13.2.1 使用ngIf指令 232 13.2.2 使用ngSwitch指令 234 13.2.3 使用ngFor指令 236 13.2.4 使用ngTemplateOutlet指令 244 13.3 理解單向數(shù)據(jù)綁定的限制 246 13.3.1 使用冪等表達式 246 13.3.2 理解表達式上下文 249 13.4 本章小結 251 第14章 使用事件和表單 253 14.1 準備示例項目 254 14.1.1 導入表單模塊 254 14.1.2 準備組件和模板 254 14.2 使用事件綁定 255 14.2.1 使用事件數(shù)據(jù) 259 14.2.2 使用模板引用變量 260 14.3 使用雙向數(shù)據(jù)綁定 262 14.4 處理表單 265 14.4.1 向示例應用程序添加表單 265 14.4.2 添加表單數(shù)據(jù)驗證 267 14.4.3 驗證整個表單 275 14.5 使用基于模型的表單 281 14.5.1 啟用基于模型的表單功能 282 14.5.2 定義表單模型類 282 14.5.3 使用模型進行驗證 285 14.5.4 根據(jù)模型生成元素 288 14.6 創(chuàng)建自定義表單驗證器 289 14.7 本章小結 292 第15章 創(chuàng)建屬性指令 293 15.1 準備示例項目 294 15.2 創(chuàng)建簡單的屬性指令 296 15.3 在指令中訪問應用程序數(shù)據(jù) 298 15.3.1 讀取宿主元素屬性 298 15.3.2 創(chuàng)建數(shù)據(jù)綁定輸入 屬性 300 15.3.3 響應輸入屬性的變化 303 15.4 創(chuàng)建自定義事件 305 15.5 創(chuàng)建宿主元素綁定 308 15.6 在宿主元素上創(chuàng)建雙向綁定 309 15.7 導出指令用于模板變量 312 15.8 本章小結 315 第16章 創(chuàng)建結構型指令 317 16.1 準備示例項目 318 16.2 創(chuàng)建簡單的結構型指令 319 16.2.1 實現(xiàn)結構型指令類 320 16.2.2 啟用結構型指令 322 16.2.3 使用結構型指令的簡潔語法 323 16.3 創(chuàng)建迭代結構型指令 324 16.3.1 提供額外的上下文數(shù)據(jù) 327 16.3.2 使用簡潔的結構語法 329 16.3.3 處理屬性級數(shù)據(jù)變更 330 16.3.4 處理集合級數(shù)據(jù)變更 331 16.4 查詢宿主元素內(nèi)容 340 16.4.1 查詢多個子內(nèi)容 344 16.4.2 接收查詢變更通知 346 16.5 本章小結 347 第17章 理解組件 349 17.1 準備示例項目 350 17.2 使用組件組織應用程序 350 17.2.1 創(chuàng)建新組件 351 17.2.2 定義模板 354 17.2.3 完成組件的重組 363 17.3 使用組件樣式 364 17.3.1 定義外部組件樣式 365 17.3.2 使用高級樣式特性 366 17.4 查詢模板內(nèi)容 372 17.5 本章小結 374 第18章 使用和創(chuàng)建管道 375 18.1 準備示例項目 376 18.2 理解管道 378 18.3 創(chuàng)建一個自定義管道 380 18.3.1 注冊自定義管道 381 18.3.2 應用自定義管道 382 18.3.3 組合管道 383 18.3.4 創(chuàng)建非純管道 384 18.4 使用內(nèi)置管道 387 18.4.1 格式化數(shù)值 388 18.4.2 格式化貨幣值 390 18.4.3 格式化百分比 393 18.4.4 格式化日期 394 18.4.5 改變字符串大小寫 397 18.4.6 將數(shù)據(jù)序列化為JSON數(shù)據(jù) 399 18.4.7 將數(shù)據(jù)數(shù)組切片 400 18.4.8 格式化鍵/值對 401 18.4.9 選擇值 402 18.4.10 復數(shù)化值 404 18.5 本章小結 405 第19章 使用服務 407 19.1 準備示例項目 408 19.2 理解對象分發(fā)問題 409 19.2.1 問題的提出 409 19.2.2 利用依賴注入將對象作為服務分發(fā) 414 19.2.3 在其他構造塊中聲明依賴 419 19.3 理解測試隔離問題 425 19.4 完成服務的融入 428 19.4.1 更新根組件和模板 429 19.4.2 更新子組件 430 19.5 本章小結 431 第20章 使用服務提供程序 433 20.1 準備示例項目 434 20.2 使用服務提供程序 435 20.2.1 使用類提供程序 438 20.2.2 使用值提供程序 445 20.2.3 使用工廠提供程序 447 20.2.4 使用已有的服務提供程序 449 20.3 使用本地提供程序 450 20.3.1 理解單個服務對象的局限性 450 20.3.2 在組件中創(chuàng)建本地提供程序 452 20.3.3 理解服務提供程序的替代方案 453 20.3.4 控制依賴解析 458 20.4 本章小結 459 第21章 使用和創(chuàng)建模塊 461 21.1 準備示例項目 461 21.2 理解根模塊 463 21.2.1 理解imports屬性 465 21.2.2 理解declarations屬性 465 21.2.3 理解providers屬性 466 21.2.4 理解bootstrap屬性 466 21.3 創(chuàng)建功能模塊 468 21.3.1 創(chuàng)建模型模塊 469 21.3.2 創(chuàng)建實用工具功能模塊 473 21.3.3 使用組件創(chuàng)建一個功能模塊 478 21.4 本章小結 482 第Ⅲ部分 Angular高級功能 第22章 創(chuàng)建示例項目 485 22.1 啟動示例項目 485 22.1.1 添加和配置Bootstrap CSS包 485 22.1.2 創(chuàng)建項目結構 486 22.2 創(chuàng)建模型模塊 486 22.2.1 創(chuàng)建產(chǎn)品數(shù)據(jù)類型 486 22.2.2 創(chuàng)建數(shù)據(jù)源和存儲庫 486 22.2.3 完成模型模塊 488 22.3 創(chuàng)建核心模塊 488 22.3.1 創(chuàng)建共享狀態(tài)服務 488 22.3.2 創(chuàng)建表格組件 489 22.3.3 創(chuàng)建表單組件 490 22.3.4 完成核心模塊 492 22.4 創(chuàng)建消息模塊 493 22.4.1 創(chuàng)建消息模型和服務 493 22.4.2 創(chuàng)建組件和模板 493 22.4.3 完成消息模塊 494 22.5 完成項目 495 22.6 本章小結 496 第23章 使用Reactive Extensions 497 23.1 準備示例項目 498 23.2 理解問題 498 23.3 使用Reactive Extensions解決 問題 501 23.3.1 理解Observable 502 23.3.2 理解Observer 503 23.3.3 理解Subject 505 23.4 使用async管道 506 23.5 擴展應用程序功能模塊 509 23.6 更進一步 511 23.6.1 過濾事件 511 23.6.2 轉換事件 513 23.6.3 只接收不同的事件 515 23.6.4 獲取和忽略事件 517 23.7 本章小結 519 第24章 生成HTTP請求 521 24.1 準備示例項目 522 24.1.1 配置模型功能模塊 522 24.1.2 創(chuàng)建數(shù)據(jù)文件 523 24.1.3 更新表單組件 523 24.1.4 運行示例項目 524 24.2 理解RESTful Web服務 524 24.3 替換靜態(tài)數(shù)據(jù)源 525 24.3.1 創(chuàng)建新的數(shù)據(jù)源服務 525 24.3.2 配置數(shù)據(jù)源 527 24.3.3 使用REST數(shù)據(jù)源 527 24.3.4 保存和刪除數(shù)據(jù) 529 24.4 加強HTTP請求 531 24.5 生成跨域請求 533 24.6 配置請求頭 535 24.7 處理錯誤 537 24.7.1 生成用戶可使用的消息 538 24.7.2 處理錯誤 540 24.8 本章小結 541 第25章 路由與導航:第1部分 543 25.1 準備示例項目 544 25.2 開始學習路由 546 25.2.1 創(chuàng)建路由配置 546 25.2.2 創(chuàng)建路由組件 548 25.2.3 更新根模塊 548 25.2.4 完成配置 549 25.2.5 添加導航鏈接 550 25.2.6 理解路由的效果 552 25.3 完成路由實現(xiàn) 554 25.3.1 在組件中處理路由變化 554 25.3.2 使用路由參數(shù) 556 25.3.3 在代碼中導航 562 25.3.4 接收導航事件 564 25.3.5 刪除事件綁定和支持代碼 566 25.4 本章小結 568 第26章 路由與導航:第2部分 569 26.1 準備示例項目 569 26.2 使用通配符和重定向 575 26.2.1 在路由中使用通配符 575 26.2.2 在路由中使用重定向 577 26.3 在組件內(nèi)部導航 578 26.3.1 響應正在發(fā)生的路由變化 579 26.3.2 為活動路由設置不同樣式的鏈接 581 26.3.3 修復All按鈕 584 26.4 創(chuàng)建子路由 585 26.4.1 創(chuàng)建子路由出口 586 26.4.2 從子路由訪問參數(shù) 588 26.5 本章小結 592 第27章 路由與導航:第3部分 593 27.1 準備示例項目 593 27.2 守衛(wèi)路由 595 27.2.1 使用解析器推遲導航 595 27.2.2 避免帶有守衛(wèi)的導航 601 27.3 動態(tài)加載功能模塊 613 27.3.1 創(chuàng)建一個簡單的功能模塊 613 27.3.2 動態(tài)加載模塊 614 27.3.3 守衛(wèi)動態(tài)模塊 618 27.4 指定命名出口 620 27.4.1 創(chuàng)建附加的出口元素 621 27.4.2 在使用多個出口的情況下導航 623 27.5 本章小結 624 第28章 使用動畫 625 28.1 準備示例項目 626 28.1.1 禁用HTTP延遲 626 28.1.2 簡化表格模板和路由配置 627 28.2 開始學習Angular動畫 629 28.2.1 啟用動畫模塊 629 28.2.2 創(chuàng)建動畫 630 28.2.3 應用動畫 633 28.2.4 測試動畫效果 635 28.3 理解內(nèi)置的動畫狀態(tài) 637 28.4 理解元素過渡 638 28.4.1 為內(nèi)置狀態(tài)創(chuàng)建過渡 638 28.4.2 控制動畫的過渡 639 28.5 理解動畫樣式組 644 28.5.1 在可重用的分組中定義公共樣式 644 28.5.2 使用元素變形 646 28.5.3 應用CSS框架樣式 647 28.6 本章小結 649 第29章 Angular單元測試 651 29.1 準備示例項目 652 29.2 創(chuàng)建一個簡單的單元測試 654 29.3 使用Jasmine完成單元測試 655 29.4 測試Angular組件 656 29.4.1 使用TestBed類完成工作 656 29.4.2 測試數(shù)據(jù)綁定 660 29.4.3 測試帶有外部模板的組件 662 29.4.4 測試組件事件 663 29.4.5 測試輸出屬性 665 29.4.6 測試輸入屬性 667 29.4.7 測試異步操作 669 29.5 測試Angular指令 671 29.6 本章小結 673
你還可能感興趣
我要評論
|