AngularJS從入門(mén)到項(xiàng)目實(shí)戰(zhàn)

第1章 Angular 的基礎(chǔ)知識(shí)         001
1.1 Angular簡(jiǎn)介     001
1.1.1　AngularJS是什么       001
1.1.2　Angular 和AngularJS的區(qū)別        002
1.1.3　Angular的發(fā)展歷程           002
1.2 環(huán)境搭建          003
1.2.1　安裝Node.js        003
1.2.2　安裝Angular-cli         006
1.2.3　安裝開(kāi)發(fā)工具     007
1.3 創(chuàng)建個(gè)項(xiàng)目       009
1.3.1　創(chuàng)建項(xiàng)目      009
1.3.2　運(yùn)行項(xiàng)目      010
1.3.3　項(xiàng)目結(jié)構(gòu)介紹     011
第2章 TypeScript基礎(chǔ)知識(shí)        014
2.1 基礎(chǔ)類(lèi)型          014
2.2 變量聲明          017
2.2.1　var聲明        017
2.2.2　let聲明          019
2.3 類(lèi)     021
2.3.1　屬性     021
2.3.2　方法     022
2.3.3　構(gòu)造函數(shù)      023
2.3.4　繼承     024
2.3.5　修飾符          025
2.4 函數(shù)           027
2.4.1　函數(shù)類(lèi)型      028
2.4.2　可選參數(shù)和默認(rèn)參數(shù)         029
2.4.3　剩余參數(shù)      030
第3章 熟悉模板語(yǔ)法            031
3.1 模板中的HTML       031
3.2 插值與模板表達(dá)式   032
3.2.1　插值表達(dá)式         032
3.2.2　模板表達(dá)式         033
3.2.3　表達(dá)式上下文     033
3.3 模板語(yǔ)句          034
3.4 綁定語(yǔ)法          035
3.5 屬性綁定([屬性名])         036
3.5.1　單向輸入      037
3.5.2　綁定目標(biāo)      037
3.5.3　選擇屬性綁定還是插值     038
3.6 attribute、class和style綁定         038
3.6.1　attribute綁定       039
3.6.2　CSS類(lèi)綁定         040
3.6.3　樣式綁定      040
3.7 事件綁定(event)     041
3.8 雙向數(shù)據(jù)綁定([(  )])         042
3.9 內(nèi)置模板函數(shù)          046
3.10 生命周期        046
第4章 精通核心組件            049
4.1 了解組件          049
4.1.1　創(chuàng)建組件      049
4.1.2　導(dǎo)入依賴(lài)      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　綁定數(shù)據(jù)      054
4.3.2　綁定屬性      056
4.3.3　綁定HTML         057
4.3.4　引入圖片      058
4.4 父子組件之間的通信         058
4.4.1　父組件給子組件傳值         059
4.4.2　父組件通過(guò)@ViewChild 主動(dòng)獲取子組件的數(shù)據(jù)和方法        062
第5 章 玩轉(zhuǎn)核心指令             064
5.1 內(nèi)置指令          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 案例實(shí)戰(zhàn)：實(shí)現(xiàn)任務(wù)“備忘錄”     073
第6 章 轉(zhuǎn)換數(shù)據(jù)的管道               076
6.1 使用管道          076
6.2 內(nèi)置的管道       077
6.2.1　大小寫(xiě)轉(zhuǎn)換管道        077
6.2.2　日期格式轉(zhuǎn)換管道    078
6.2.3　小數(shù)位數(shù)管道     078
6.2.4　貨幣管道      079
6.2.5　對(duì)象序列化管道        080
6.2.6　slice 管道             080
6.3 管道參數(shù)          081
6.4 鏈?zhǔn)焦艿?         082
6.5 自定義管道       083
6.5.1　實(shí)現(xiàn)自定義管道        083
6.5.2　組合雙向數(shù)據(jù)綁定    085
第7 章 表單的應(yīng)用     087
7.1 Angular 表單簡(jiǎn)介    087
7.2 響應(yīng)式表單      089
7.2.1　添加表單控件     090
7.2.2　管理控件的值     091
7.2.3　把表單控件分組        092
7.2.4　保存表單數(shù)據(jù)     094
7.2.5　嵌套的表單組     095
7.2.6　部分模型更新     097
7.2.7　使用FormBuilder 生成表單控件     098
7.2.8　表單驗(yàn)證      099
7.2.9　使用表單數(shù)組管理動(dòng)態(tài)控件    101
7.2.10　響應(yīng)式表單API       103
7.3 模板驅(qū)動(dòng)表單          104
第8 章 精通組件跳轉(zhuǎn)的路由          112
8.1 路由的意義        112
8.2 路由的定義        113
8.2.1　創(chuàng)建帶路由的項(xiàng)目    113
8.2.2　routerLinkActive 指令         116
8.3 路由嵌套（父子路由）      116
8.4 路由的對(duì)象       120
8.5 輔助路由          123
8.6 路由守衛(wèi)          126
8.6.1　CanActivate 守衛(wèi)        127
8.6.2　CanDeactivate      128
第9 章 自定義服務(wù)及DOM 操作           130
9.1 自定義服務(wù)       130
9.1.1　仿APP 搜索緩存數(shù)據(jù)功能      130
9.1.2　實(shí)現(xiàn)任務(wù)備忘錄功能         132
9.2 DOM 操作        134
9.2.1　原生JS 操作DOM    134
9.2.2　使用ViewChild 操作DOM       136
9.2.3　父子組件中通過(guò)ViewChild 調(diào)用子組件的方法     137
9.2.4　實(shí)現(xiàn)輪播圖效果        139
第10 章 模塊和懶加載           143
10.1 自定義模塊     143
10.1.1　自定義模塊的意義  144
10.1.2　自定義一個(gè)模塊      145
10.1.3　在自定義模塊中創(chuàng)建組件      146
10.1.4　掛載自定義模塊及組件          147
10.1.5　自定義模塊訪(fǎng)問(wèn)自身組件      149
10.2 配置路由模塊懶加載       150
10.2.1　創(chuàng)建懶加載項(xiàng)目      150
10.2.2　實(shí)現(xiàn)模塊懶加載      151
10.2.3　在子模塊中配置路由       153
第11 章 借用Bootstrap 的組件           156
11.1 配置環(huán)境         156
11.2 按鈕組件         157
11.2.1　定義按鈕            158
11.2.2　設(shè)計(jì)按鈕風(fēng)格           158
11.3 按鈕組組件     161
11.3.1　定義按鈕組        161
11.3.2　定義按鈕組工具欄   162
11.3.3　設(shè)計(jì)按鈕組布局和樣式           163
11.4 導(dǎo)航組件         165
11.4.1　定義導(dǎo)航            165
11.4.2　設(shè)計(jì)導(dǎo)航的布局       166
11.4.3　設(shè)計(jì)導(dǎo)航的風(fēng)格       167
11.4.4　設(shè)計(jì)導(dǎo)航選項(xiàng)卡       170
11.5 徽章         172
11.5.1　定義徽章            172
11.5.2　設(shè)置顏色            174
11.5.3　橢圓形徽章        174
11.6 警告框            175
11.6.1　定義警告框        175
11.6.2　添加鏈接            177
11.6.3　關(guān)閉警告框        178
11.7 進(jìn)度條            178
11.7.1　定義進(jìn)度條        179
11.7.2　設(shè)計(jì)進(jìn)度條樣式       179
11.7.3　設(shè)計(jì)進(jìn)度條風(fēng)格       181
11.8 列表組            183
11.8.1　定義列表組        183
11.8.2　設(shè)計(jì)列表組的風(fēng)格樣式           184
11.8.3　定制內(nèi)容            187
11.9 面包屑            188
11.9.1　定義面包屑        188
11.9.2　設(shè)計(jì)分隔符        189
11.10 分頁(yè)       190
11.10.1　定義分頁(yè)          190
11.10.2　使用圖標(biāo)          191
11.10.3　設(shè)計(jì)分頁(yè)風(fēng)格         192
11.11 旋轉(zhuǎn)器特效          195
11.11.1　定義旋轉(zhuǎn)器      195
11.11.2　設(shè)計(jì)旋轉(zhuǎn)器風(fēng)格     196
11.11.3　對(duì)齊旋轉(zhuǎn)器      198
11.11.4　按鈕旋轉(zhuǎn)器      199
11.12 卡片       200
11.12.1　定義卡片          200
11.12.2　卡片風(fēng)格          201
第12 章 攝影相冊(cè)      204
12.1 項(xiàng)目概述        204
12.1.1　設(shè)計(jì)效果           204
12.1.2　設(shè)計(jì)準(zhǔn)備           207
12.2 設(shè)計(jì)導(dǎo)航欄     207
12.3 首頁(yè)         209
12.3.1　設(shè)計(jì)相冊(cè)展示          209
12.3.2　添加Swipebox 燈箱插件        211
12.4 分類(lèi)頁(yè)            214
12.4.1　設(shè)計(jì)相冊(cè)分類(lèi)展示  214
12.4.2　添加Swipebox 燈箱插件        217
12.5 博客         219
12.6 聯(lián)系頁(yè)            220
12.7 項(xiàng)目重要文件        222
12.7.1　根模塊（app.module.ts）        222
12.7.2　路由文件（app-routing.module.ts）        223
第13 章 Web 設(shè)計(jì)與定制網(wǎng)站             224
13.1 網(wǎng)站概述        224
13.1.1　網(wǎng)站布局           224
13.1.2　設(shè)計(jì)準(zhǔn)備           224
13.2 設(shè)計(jì)主頁(yè)面導(dǎo)航     224
13.3 設(shè)計(jì)主頁(yè)面內(nèi)容     227
13.3.1　設(shè)計(jì)首頁(yè)           227
13.3.2　關(guān)于我們           229
13.3.3　我們的團(tuán)隊(duì)       230
13.3.4　我們的服務(wù)       233
13.3.5　我們的博客       234
13.3.6　我們的定制       235
13.4 設(shè)計(jì)腳注        237
第14 章 仿星巴克網(wǎng)站           239
14.1 網(wǎng)站概述        239
14.1.1　設(shè)計(jì)效果           239
14.1.2　設(shè)計(jì)準(zhǔn)備           240
14.2 設(shè)計(jì)首頁(yè)布局        241
14.3 設(shè)計(jì)可切換導(dǎo)航     242
14.4 主體內(nèi)容        247
14.4.1　設(shè)計(jì)輪播廣告區(qū)      248
14.4.2　設(shè)計(jì)產(chǎn)品推薦區(qū)      249
14.4.3　設(shè)計(jì)登錄注冊(cè)和logo       250
14.4.4　設(shè)計(jì)特色展示區(qū)      251
14.4.5　設(shè)計(jì)產(chǎn)品生產(chǎn)流程區(qū)       253
14.5 設(shè)計(jì)底部隱藏導(dǎo)航          255
第15 章 仿支付寶“淘票票電影”APP         257
15.1 準(zhǔn)備工作        257
15.1.1　開(kāi)發(fā)環(huán)境           257
15.1.2　搭建Angular 腳手架        257
15.1.3　創(chuàng)建項(xiàng)目組件          261
15.2 設(shè)計(jì)項(xiàng)目組件        262
15.2.1　設(shè)計(jì)頭部和底部導(dǎo)航組件      262
15.2.2　設(shè)計(jì)電影頁(yè)面組件  265
15.2.3　設(shè)計(jì)影院頁(yè)面組件  276
15.2.4　設(shè)計(jì)我的頁(yè)面組件  279
15.3 設(shè)計(jì)主組件     281
15.3.1　電影頁(yè)面組件          281
15.3.2　影院頁(yè)面組件          284
15.3.3　我的頁(yè)面組件          285
15.4 項(xiàng)目的重要文件     286
15.4.1　主頁(yè)面（index.html）      286
15.4.2　根模塊（app.module.ts）        287
15.4.3　路由文件（app-routing.
module.ts）        287
15.4.4　項(xiàng)目公共樣式（style.css）     288
15.4.5　根組件（app.component）      288
第16 章 仿網(wǎng)易云音樂(lè)網(wǎng)站            290
16.1 準(zhǔn)備工作        290
16.1.1　開(kāi)發(fā)環(huán)境           290
16.1.2　創(chuàng)建項(xiàng)目           290
16.1.3　模塊設(shè)計(jì)           293
16.1.4　數(shù)據(jù)來(lái)源           295
16.1.5　定義數(shù)據(jù)的類(lèi)型      297
16.2 頁(yè)面的頭部和腳注設(shè)計(jì)          299
16.3 輪播組件        301
16.4 推薦歌單        305
16.5 歌手列表        308
16.6 底部播放器      311
16.7 滑塊組件        315
16.8 ngrx 狀態(tài)管理        316
16.9 實(shí)現(xiàn)播放器功能     319
16.10 播放列表和歌詞   325
16.11 歌單列表       331
16.12 歌單詳情頁(yè)          333
16.13 歌曲的詳情頁(yè)面   339
16.14 搜索功能      343