Angular 開發實戰

李一鳴，

前端和Angular開發，6年前端開發經驗，
能帶領前端混合開發團隊利用z新技術解決業務快速發展過程中的各種業務場景問題。
熟悉客戶端開發，有多個上架APP，有服務端開發經驗。
目前在公司擔任項目經理，管理前端團隊。

目 錄
第1章 初識Angular 1
1.1 ANGULAR簡介 1
1.1.1 AngularJS 1.x 的誕生 2
1.1.2 快速發展的 Angular 2
1.1.3 三分天下的前端框架 3
1.1.4 未來的選擇 4
1.2 搭建開發環境 4
1.2.1 安裝Node.js和NPM 4
1.2.2 安裝Git 6
1.2.3 安裝Angular CLI 7
1.2.4 開發工具的選擇 7
1.2.5 安裝Angular輔助編碼插件 9
1.3 實戰練習：第一個ANGULAR程序 10
1.3.1 Hello Angular 10
1.3.2 Angular目錄結構 10
1.3.3 Angular CLI詳解 12
1.3.4 如何學習Angular 14
1.4 ANGULAR UI庫 14
1.4.1 NG-ZORRO 14
1.4.2 Angular Material 15
1.4.3 ng-bootstrap 16
1.4.4 Ionic 16
1.5 小結 17
第2章 初識TypeScript 18
2.1 TYPESCRIPT簡介 18
2.1.1 動態類型語言與靜態類型語言 18
2.1.2 開發環境的搭建 19
2.2 數據類型 20
2.2.1 布爾類型 20
2.2.2 數字類型 20
2.2.3 字符串類型 21
2.2.4 數組類型與元組類型 21
2.2.5 枚舉類型 21
2.2.6 any類型 22
2.2.7 void類型 22
2.2.8 null與undefined類型 22
2.3 函數 23
2.3.1 函數的使用 23
2.3.2 構造函數 23
2.3.3 可選參數 24
2.3.4 默認參數 24
2.3.5 箭頭函數 25
2.4 類 26
2.4.1 屬性與方法 26
2.4.2 類的繼承 26
2.4.3 訪問權限修飾符 27
2.5 小結 28
第3章 指令 29
3.1 指令的分類 29
3.1.1 組件 29
3.1.2 結構型指令 30
3.1.3 屬性型指令 30
3.2 內置指令 30
3.2.1 ngFor 30
3.2.2 ngIf 30
3.2.3 ngSwitch 31
3.2.4 ngStyle 31
3.2.5 ngClass 32
3.2.6 ngNonBindable 32
3.3 實戰練習：自定義結構型指令 32
3.3.1 星號前綴 33
3.3.2 創建一個結構型指令 33
3.3.3 響應用戶操作 34
3.4 小結 36
第4章 使用組件打造你的項目 37
4.1 組件 37
4.1.1 組件的組成 37
4.1.2 組件化思想 38
4.2 註解 38
4.3 生命週期 39
4.4 數據傳遞 39
4.4.1 數據的輸入 40
4.4.2 數據的輸出 42
4.5 實戰練習：城市組件 44
4.6 小結 47
第5章 依賴注入 48
5.1 控制反轉與依賴注入 48
5.1.1 控制反轉 48
5.1.2 依賴注入 49
5.2 ANGULAR中的依賴注入 50
5.2.1 Injector（注入器） 50
5.2.2 Provider（提供者） 51
5.2.3 Dependence（依賴） 52
5.2.4 依賴注入的流程 52
5.3 實戰練習：用戶信息頁 52
5.4 小結 56
第6章 HTTP 57
6.1 HTTPCLIENT——發送第一條網絡請求 57
6.2 HTTP協議基礎知識 59
6.2.1 請求方法 59
6.2.2 HTTP狀態碼 60
6.2.3 請求報文 61
6.3 HTTP與HTTPS 63
6.3.1 為什麼需要HTTPS 63
6.3.2 什麼是 HTTPS 63
6.3.3 HTTPS工作過程 63
6.3.4 申請HTTPS 64
6.3.5 為什麼不一直使用HTTPS 65
6.4 實戰練習：製作一個HTTP攔截器 65
6.5 小結 68
第7章 表單 69
7.1 ANGULAR中的表單 69
7.1.1 響應式表單與模板驅動型表單 69
7.1.2 FormBuilder 70
7.2 實戰練習：模板驅動型表單 70
7.2.1 創建模板驅動型表單項目 70
7.2.2 在登錄組件實現模板驅動型表單 71
7.3 實戰練習：響應式表單 74
7.3.1 創建響應式表單項目 74
7.3.2 使用響應式表單構建個人資料頁 75
7.4 小結 78
第8章 路由 79
8.1 路由的基本用法 79
8.1.1 路由的配置 79
8.1.2 讓路由與組件對應 80
8.1.3 設置默認路徑 82
8.2 路由的位置策略 83
8.2.1 HashLocationStrategy 83
8.2.2 如何使用位置策略 83
8.2.3 如何選擇兩種位置策略 84
8.3 路由的跳轉與傳參 85
8.3.1 路由的跳轉 85
8.3.2 路由的傳參 86
8.4 子路由 91
8.5 實戰練習：路由框架的搭建 93
8.6 小結 96
第9章 Angular中的測試 97
9.1 測試的意義 97
9.2 第一個測試例子 98
9.3 ANGULAR測試工具 100
9.3.1 Jasmine 100
9.3.2 Karma 102
9.3.3 實戰練習：單元測試常用API 103
9.4 端對端測試 108
9.4.1 Protractor 108
9.4.2 實戰練習：端對端測試常用API 108
9.5 小結 113
第10章 後台模擬環境的搭建 114
10.1 前後端分離 114
10.2 POSTMAN的安裝與使用 115
10.2.1 Postman的安裝 115
10.2.2 Postman的使用 116
10.3 JSON-SERVER的安裝與使用 117
10.3.1 json-server的安裝與配置 118
10.3.2 第一個json-server程序 120
10.4 實戰練習：使用JSON-SERVER實現增刪改查 121
10.4.1 項目的創建與配置 121
10.4.2 數據的查詢與刪除 122
10.4.3 數據的新增與編輯 125
10.5 小結 130
第11章 項目實戰：待辦列表 131
11.1 待辦列表設計 131
11.2 待辦列表的創建 133
11.2.1 CLI版本與UI樣式庫 133
11.2.2 項目的創建 133
11.3 待辦列表開發 135
11.3.1 主面板組件的開發 135
11.3.2 待辦項組件的開發 138
11.3.3 彈出式窗口組件的開發 142
11.4 修改為網絡請求應用 150
11.4.1 後台環境的配置 150
11.4.2 使用json-server實現網絡請求版 151
11.5 小結 156
第12章 項目實戰：商城後台管理系統 157
12.1 項目設計 157
12.2 項目起步 160
12.2.1 框架選型 160
12.2.2 項目的創建 161
12.3 路由構建 163
12.3.1 組件的創建 163
12.3.2 路由的配置 163
12.4 資產盤點模塊的開發 170
12.4.1 資產概況的開發 170
12.4.2 交易數據分析的開發 174
12.5 商品管理模塊的開發 177
12.5.1 商品查詢的開發 177
12.5.2 商品新增/編輯的開發 180
12.6 個人中心模塊的開發 184
12.6.1 個人資料查看的開發 184
12.6.2 個人資料設置的開發 186
12.7 消息管理模塊的開發 189
12.8 小結 192