Angular開發(fā)實戰(zhàn)

目   錄
第1章  初識Angular 1
1.1  ANGULAR簡介 1
1.1.1  AngularJS 1.x 的誕生 2
1.1.2  快速發(fā)展的 Angular 2
1.1.3  三分天下的前端框架 3
1.1.4  未來的選擇 4
1.2  搭建開發(fā)環(huán)境 4
1.2.1  安裝Node.js和NPM 4
1.2.2  安裝Git 6
1.2.3  安裝Angular CLI 7
1.2.4  開發(fā)工具的選擇 7
1.2.5  安裝Angular輔助編碼插件 9
1.3  實戰(zhàn)練習：個ANGULAR程序 10
1.3.1  Hello Angular 10
1.3.2  Angular目錄結(jié)構(gòu) 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  小結(jié) 17
第2章  初識TypeScript 18
2.1  TYPESCRIPT簡介 18
2.1.1  動態(tài)類型語言與靜態(tài)類型語言 18
2.1.2  開發(fā)環(huán)境的搭建 19
2.2  數(shù)據(jù)類型 20
2.2.1  布爾類型 20
2.2.2  數(shù)字類型 20
2.2.3  字符串類型 21
2.2.4  數(shù)組類型與元組類型 21
2.2.5  枚舉類型 21
2.2.6  any類型 22
2.2.7  void類型 22
2.2.8  null與undefined類型 22
2.3  函數(shù) 23
2.3.1  函數(shù)的使用 23
2.3.2  構(gòu)造函數(shù) 23
2.3.3  可選參數(shù) 24
2.3.4  默認參數(shù) 24
2.3.5  箭頭函數(shù) 25
2.4  類 26
2.4.1  屬性與方法 26
2.4.2  類的繼承 26
2.4.3  訪問權(quán)限修飾符 27
2.5  小結(jié) 28
第3章  指令 29
3.1  指令的分類 29
3.1.1  組件 29
3.1.2  結(jié)構(gòu)型指令 30
3.1.3  屬性型指令 30
3.2  內(nèi)置指令 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  實戰(zhàn)練習：自定義結(jié)構(gòu)型指令 32
3.3.1  星號前綴 33
3.3.2  創(chuàng)建一個結(jié)構(gòu)型指令 33
3.3.3  響應(yīng)用戶操作 34
3.4  小結(jié) 36
第4章  使用組件打造你的項目 37
4.1  組件 37
4.1.1  組件的組成 37
4.1.2  組件化思想 38
4.2  注解 38
4.3  生命周期 39
4.4  數(shù)據(jù)傳遞 39
4.4.1  數(shù)據(jù)的輸入 40
4.4.2  數(shù)據(jù)的輸出 42
4.5  實戰(zhàn)練習：城市組件 44
4.6  小結(jié) 47
第5章  依賴注入 48
5.1  控制反轉(zhuǎn)與依賴注入 48
5.1.1  控制反轉(zhuǎn) 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  實戰(zhàn)練習：用戶信息頁 52
5.4  小結(jié) 56
第6章  HTTP 57
6.1  HTTPCLIENT——發(fā)送條網(wǎng)絡(luò)請求 57
6.2  HTTP協(xié)議基礎(chǔ)知識 59
6.2.1  請求方法 59
6.2.2  HTTP狀態(tài)碼 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  實戰(zhàn)練習：制作一個HTTP攔截器 65
6.5  小結(jié) 68
第7章  表單 69
7.1  ANGULAR中的表單 69
7.1.1  響應(yīng)式表單與模板驅(qū)動型表單 69
7.1.2  FormBuilder 70
7.2  實戰(zhàn)練習：模板驅(qū)動型表單 70
7.2.1  創(chuàng)建模板驅(qū)動型表單項目 70
7.2.2  在登錄組件實現(xiàn)模板驅(qū)動型表單 71
7.3  實戰(zhàn)練習：響應(yīng)式表單 74
7.3.1  創(chuàng)建響應(yīng)式表單項目 74
7.3.2  使用響應(yīng)式表單構(gòu)建個人資料頁 75
7.4  小結(jié) 78
第8章  路由 79
8.1  路由的基本用法 79
8.1.1  路由的配置 79
8.1.2  讓路由與組件對應(yīng) 80
8.1.3  設(shè)置默認路徑 82
8.2  路由的位置策略 83
8.2.1  HashLocationStrategy 83
8.2.2  如何使用位置策略 83
8.2.3  如何選擇兩種位置策略 84
8.3  路由的跳轉(zhuǎn)與傳參 85
8.3.1  路由的跳轉(zhuǎn) 85
8.3.2  路由的傳參 86
8.4  子路由 91
8.5  實戰(zhàn)練習：路由框架的搭建 93
8.6  小結(jié) 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  實戰(zhàn)練習：單元測試常用API 103
9.4  端對端測試 108
9.4.1  Protractor 108
9.4.2  實戰(zhàn)練習：端對端測試常用API 108
9.5  小結(jié) 113
第10章  后臺模擬環(huán)境的搭建 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  實戰(zhàn)練習：使用JSON-SERVER實現(xiàn)增刪改查 121
10.4.1  項目的創(chuàng)建與配置 121
10.4.2  數(shù)據(jù)的查詢與刪除 122
10.4.3  數(shù)據(jù)的新增與編輯 125
10.5  小結(jié) 130
第11章  項目實戰(zhàn)：待辦列表 131
11.1  待辦列表設(shè)計 131
11.2  待辦列表的創(chuàng)建 133
11.2.1  CLI版本與UI樣式庫 133
11.2.2  項目的創(chuàng)建 133
11.3  待辦列表開發(fā) 135
11.3.1  主面板組件的開發(fā) 135
11.3.2  待辦項組件的開發(fā) 138
11.3.3  彈出式窗口組件的開發(fā) 142
11.4  修改為網(wǎng)絡(luò)請求應(yīng)用 150
11.4.1  后臺環(huán)境的配置 150
11.4.2  使用json-server實現(xiàn)網(wǎng)絡(luò)請求版 151
11.5  小結(jié) 156
第12章  項目實戰(zhàn)：商城后臺管理系統(tǒng) 157
12.1  項目設(shè)計 157
12.2  項目起步 160
12.2.1  框架選型 160
12.2.2  項目的創(chuàng)建 161
12.3  路由構(gòu)建 163
12.3.1  組件的創(chuàng)建 163
12.3.2  路由的配置 163
12.4  資產(chǎn)盤點模塊的開發(fā) 170
12.4.1  資產(chǎn)概況的開發(fā) 170
12.4.2  交易數(shù)據(jù)分析的開發(fā) 174
12.5  商品管理模塊的開發(fā) 177
12.5.1  商品查詢的開發(fā) 177
12.5.2  商品新增/編輯的開發(fā) 180
12.6  個人中心模塊的開發(fā) 184
12.6.1  個人資料查看的開發(fā) 184
12.6.2  個人資料設(shè)置的開發(fā) 186
12.7  消息管理模塊的開發(fā) 189
12.8  小結(jié) 192