AngularJS 從入門到項目實戰

作者長期從事網站開發工作，數年來承接了大量的項目，具有豐富的實踐經驗。

目 錄

第1章 Angular 的基礎知識         001
1.1 Angular簡介     001
1.1.1　AngularJS是什麽       001
1.1.2　Angular+和AngularJS的區別        002
1.1.3　Angular的發展歷程           002
1.2 環境搭建          003
1.2.1　安裝Node.js        003
1.2.2　安裝Angular-cli         006
1.2.3　安裝開發工具     007
1.3 創建第一個項目       009
1.3.1　創建項目      009
1.3.2　運行項目      010
1.3.3　項目結構介紹     011

第2章 TypeScript基礎知識        014
2.1 基礎類型          014
2.2 變量聲明          017
2.2.1　var聲明        017
2.2.2　let聲明          019
2.3 類     021
2.3.1　屬性     021
2.3.2　方法     022
2.3.3　構造函數      023
2.3.4　繼承     024
2.3.5　修飾符          025
2.4 函數           027
2.4.1　函數類型      028
2.4.2　可選參數和默認參數         029
2.4.3　剩餘參數      030

第3章 熟悉模板語法            031
3.1 模板中的HTML       031
3.2 插值與模板表達式   032
3.2.1　插值表達式         032
3.2.2　模板表達式         033
3.2.3　表達式上下文     033
3.3 模板語句          034
3.4 綁定語法          035
3.5 屬性綁定([屬性名])         036
3.5.1　單向輸入      037
3.5.2　綁定目標      037
3.5.3　選擇屬性綁定還是插值     038
3.6 attribute、class和style綁定         038
3.6.1　attribute綁定       039
3.6.2　CSS類綁定         040
3.6.3　樣式綁定      040
3.7 事件綁定(event)     041
3.8 雙向數據綁定([(  )])         042
3.9 內置模板函數          046
3.10 生命周期        046

第4章 精通核心組件            049
4.1 瞭解組件          049
4.1.1　創建組件      049
4.1.2　導入依賴      051
4.1.3　Component 註解         051
4.1.4　添加template       052
4.1.5　用styleUrls 添加CSS 樣式       052
4.2 掛載組件          053
4.3 組件中的模板          054
4.3.1　綁定數據      054
4.3.2　綁定屬性      056
4.3.3　綁定HTML         057
4.3.4　引入圖片      058
4.4 父子組件之間的通信         058
4.4.1　父組件給子組件傳值         059
4.4.2　父組件通過@ViewChild 主動獲取子組件的數據和方法        062

第5 章 玩轉核心指令             064
5.1 內置指令          064
5.1.1　ngIf       064
5.1.2　ngSwitch       065
5.1.3　ngStyle          066
5.1.4　ngClass          067
5.1.5　ngFor             068
5.1.6　ngNonBindable           071
5.2 自定義指令      072
5.3 案例實戰：實現任務“備忘錄”     073

第6 章 轉換數據的管道               076
6.1 使用管道          076
6.2 內置的管道       077
6.2.1　大小寫轉換管道        077
6.2.2　日期格式轉換管道    078
6.2.3　小數位數管道     078
6.2.4　貨幣管道      079
6.2.5　對象序列化管道        080
6.2.6　slice 管道             080
6.3 管道參數          081
6.4 鏈式管道          082
6.5 自定義管道       083
6.5.1　實現自定義管道        083
6.5.2　組合雙向數據綁定    085

第7 章 表單的應用     087
7.1 Angular 表單簡介    087
7.2 響應式表單      089
7.2.1　添加表單控件     090
7.2.2　管理控件的值     091
7.2.3　把表單控件分組        092
7.2.4　保存表單數據     094
7.2.5　嵌套的表單組     095
7.2.6　部分模型更新     097
7.2.7　使用FormBuilder 生成表單控件     098
7.2.8　表單驗證      099
7.2.9　使用表單數組管理動態控件    101
7.2.10　響應式表單API       103
7.3 模板驅動表單          104

第8 章 精通組件跳轉的路由          112
8.1 路由的意義        112
8.2 路由的定義        113
8.2.1　創建帶路由的項目    113
8.2.2　routerLinkActive 指令         116
8.3 路由嵌套（父子路由）      116
8.4 路由的對象       120
8.5 輔助路由          123
8.6 路由守衛          126
8.6.1　CanActivate 守衛        127
8.6.2　CanDeactivate      128

第9 章 自定義服務及DOM 操作           130
9.1 自定義服務       130
9.1.1　仿京東APP 搜索緩存數據功能      130
9.1.2　實現任務備忘錄功能         132
9.2 DOM 操作        134
9.2.1　原生JS 操作DOM    134
9.2.2　使用ViewChild 操作DOM       136
9.2.3　父子組件中通過ViewChild 調用子組件的方法     137
9.2.4　實現輪播圖效果        139

第10 章 模塊和懶加載           143
10.1 自定義模塊     143
10.1.1　自定義模塊的意義  144
10.1.2　自定義一個模塊      145
10.1.3　在自定義模塊中創建組件      146
10.1.4　掛載自定義模塊及組件          147
10.1.5　自定義模塊訪問自身組件      149
10.2 配置路由模塊懶加載       150
10.2.1　創建懶加載項目      150
10.2.2　實現模塊懶加載      151
10.2.3　在子模塊中配置路由       153

第11 章 借用Bootstrap 的組件           156
11.1 配置環境         156
11.2 按鈕組件         157
11.2.1　定義按鈕            158
11.2.2　設計按鈕風格           158
11.3 按鈕組組件     161
11.3.1　定義按鈕組        161
11.3.2　定義按鈕組工具欄   162
11.3.3　設計按鈕組佈局和樣式           163
11.4 導航組件         165
11.4.1　定義導航            165
11.4.2　設計導航的佈局       166
11.4.3　設計導航的風格       167
11.4.4　設計導航選項卡       170
11.5 徽章         172
11.5.1　定義徽章            172
11.5.2　設置顏色            174
11.5.3　橢圓形徽章        174
11.6 警告框            175
11.6.1　定義警告框        175
11.6.2　添加鏈接            177
11.6.3　關閉警告框        178
11.7 進度條            178
11.7.1　定義進度條        179
11.7.2　設計進度條樣式       179
11.7.3　設計進度條風格       181
11.8 列表組            183
11.8.1　定義列表組        183
11.8.2　設計列表組的風格樣式           184
11.8.3　定製內容            187
11.9 麵包屑            188
11.9.1　定義麵包屑        188
11.9.2　設計分隔符        189
11.10 分頁       190
11.10.1　定義分頁          190
11.10.2　使用圖標          191
11.10.3　設計分頁風格         192
11.11 旋轉器特效          195
11.11.1　定義旋轉器      195
11.11.2　設計旋轉器風格     196
11.11.3　對齊旋轉器      198
11.11.4　按鈕旋轉器      199
11.12 卡片       200
11.12.1　定義卡片          200
11.12.2　卡片風格          201

第12 章 攝影相冊      204
12.1 項目概述        204
12.1.1　設計效果           204
12.1.2　設計準備           207
12.2 設計導航欄     207
12.3 首頁         209
12.3.1　設計相冊展示          209
12.3.2　添加Swipebox 燈箱插件        211
12.4 分類頁            214
12.4.1　設計相冊分類展示  214
12.4.2　添加Swipebox 燈箱插件        217
12.5 博客         219
12.6 聯系頁            220
12.7 項目重要文件        222
12.7.1　根模塊（app.module.ts）        222
12.7.2　路由文件（app-routing.module.ts）        223

第13 章 Web 設計與定製網站             224
13.1 網站概述        224
13.1.1　網站佈局           224
13.1.2　設計準備           224
13.2 設計主頁面導航     224
13.3 設計主頁面內容     227
13.3.1　設計首頁           227
13.3.2　關於我們           229
13.3.3　我們的團隊       230
13.3.4　我們的服務       233
13.3.5　我們的博客       234
13.3.6　我們的定製       235
13.4 設計腳註        237

第14 章 仿星巴克網站           239
14.1 網站概述        239
14.1.1　設計效果           239
14.1.2　設計準備           240
14.2 設計首頁佈局        241
14.3 設計可切換導航     242
14.4 主體內容        247
14.4.1　設計輪播廣告區      248
14.4.2　設計產品推薦區      249
14.4.3　設計登錄註冊和logo       250
14.4.4　設計特色展示區      251
14.4.5　設計產品生產流程區       253
14.5 設計底部隱藏導航          255

第15 章 仿支付寶“淘票票電影”APP         257
15.1 準備工作        257
15.1.1　開發環境           257
15.1.2　搭建Angular 腳手架        257
15.1.3　創建項目組件          261
15.2 設計項目組件        262
15.2.1　設計頭部和底部導航組件      262
15.2.2　設計電影頁面組件  265
15.2.3　設計影院頁面組件  276
15.2.4　設計我的頁面組件  279
15.3 設計主組件     281
15.3.1　電影頁面組件          281
15.3.2　影院頁面組件          284
15.3.3　我的頁面組件          285
15.4 項目的重要文件     286
15.4.1　主頁面（index.html）      286
15.4.2　根模塊（app.module.ts）        287
15.4.3　路由文件（app-routing.
module.ts）        287
15.4.4　項目公共樣式（style.css）     288
15.4.5　根組件（app.component）      288

第16 章 仿網易雲音樂網站            290
16.1 準備工作        290
16.1.1　開發環境           290
16.1.2　創建項目           290
16.1.3　模塊設計           293
16.1.4　數據來源           295
16.1.5　定義數據的類型      297
16.2 頁面的頭部和腳註設計          299
16.3 輪播組件        301
16.4 推薦歌單        305
16.5 歌手列表        308
16.6 底部播放器      311
16.7 滑塊組件        315
16.8 ngrx 狀態管理        316
16.9 實現播放器功能     319
16.10 播放列表和歌詞   325
16.11 歌單列表       331
16.12 歌單詳情頁          333
16.13 歌曲的詳情頁面   339
16.14 搜索功能      343