內容簡介
《AngularJS 從入門到項目實戰》以零基礎講解為宗旨，用實例引導讀者深入學習，深入淺出地介紹Angular框架的各項實戰 技能。
《AngularJS 從入門到項目實戰》共16章，主要內容有：流行的開發框架Angular 8、掌握TypeScript基礎、熟悉模板語法、精通核心組件、玩轉核心指令、轉換數據的管道、表單的應用、精通組件跳轉的路由、自定義服務及 DOM操作、模塊和懶加載、借用Bootstrap的組件等。最后講述了5個行業熱點項目實訓，包括攝影 相冊、Web設計與定制網站、仿星巴克網站、仿支付寶“淘票票電影”APP、仿網易云音樂網站。
《AngularJS 從入門到項目實戰》適合任何想學習Angular框架的人員，無論您是否從事計算機相關行業，無論您是否接觸過 Angular框架，通過學習本書內容均可快速掌握Angular框架設計的方法和技巧。
前 言
“從入門到項目實戰”系列圖書是專門為網站開發、移動開發和大數據初學者量身定做的一套學習用書。整套書具有以下特點。
前沿科技
無論是網頁框架、移動開發還是大數據，精選的都是較為前沿或者用戶群最多的領域，可以幫助大家認識和了解最新動態。
權威的作者團隊
組織國家重點實驗室和資深應用專家聯手編著該套圖書，融合了豐富的教學經驗與優秀的管理理念。
學習型案例設計
以技術的實際應用過程為主線，全程采用圖解和多媒體同步結合的教學方式，生動、直觀、全面地剖析使用過程中的各種應用技能，以降低難度，提升學習效率。
為什么要寫這樣一本書
AngularJS是Google公司開發的一款Web前端框架，其源碼目前托管在Github上，從其源碼的關注度就可以看出AngularJS框架的火熱程度。AngularJS提供了一些優秀的特性，例如雙向數據綁定、MVC架構模式、指令等，能夠在很大程度上降低Web前端開發的難度，因此深受廣大Web前端開發人員的喜愛。AngularJS框架的功能雖然強大，但是對于初學者來說入門比較困難，主要是因為AngularJS有別于傳統的Web前端框架，指令、路由、服務等概念都是其他前端框架所不具備的。縱觀AngularJS圖書市場，英文圖書居多，而中文圖書則以翻譯為主，缺少一本真正適合初學者入門的書籍。因此選擇精通掌握AngularJS技術作為本書編寫的思路，本書知識點從易到難，講解詳細且透徹，結構合理，非常適合沒有基礎的讀者學習。
本書特色
零基礎、入門級的講解
無論您是否從事計算機相關行業，無論您是否接觸過Angular框架，都能從本書中找到最佳起點。
實用、專業的范例和項目
本書從Angular框架基本操作開始，帶領讀者逐步學習Angular框架的各種應用技巧，側重實戰技能，使用簡單易懂的實際案例進行分析和操作指導，讓讀者學起來簡明輕松，操作起來有章可循。
隨時隨地學習
本書提供了微課視頻，通過手機掃碼即可觀看，隨時隨地解決學習中的困惑。
細致入微、貼心提示
本書在講解過程中，安排了“注意”“提示”“技巧”等小欄目，使讀者在學習過程中能更清楚地了解相關操作、理解相關概念，并輕松掌握各種操作技巧。
超值資源大放送
全程同步教學錄像
涵蓋本書所有知識點，詳細講解每個實例及項目的過程及技術關鍵點。比看書更輕松地掌握書中所有的網頁制作和設計知識，而且擴展的講解部分使您得到比書中更多的收獲。
超多容量王牌資源
贈送大量王牌資源，包括實例源代碼、教學幻燈片、本書精品教學視頻、88 個實用類網頁模板、12 部網頁開發必備參考手冊、HTML5 標簽速查手冊、精選的JavaScript 實例、CSS3 屬性速查表、JavaScript 函數速查手冊、CSS+DIV布局賞析案例、精彩網站配色方案賞析、網頁樣式與布局案例賞析、Web 前端工程師常見面試題等。
讀者對象
„ 沒有任何AngularJS 框架開發基礎的初學者。
„ 有一定的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
