發表於2024-11-25
AngularJS是Google公司開發的一款Web前端框架,功能強大,提供瞭一些優秀的特性,例如雙嚮數據綁定、MVC架構模式、指令等,能夠在很大程度上降低Web前端開發的難度,因此深受廣大Web前端開發人員的喜愛。
《AngularJS入門與進階》分為兩個部分,第一部分為入門篇,從第1~14章,主要介紹AngularJS開發環境搭建、數據綁定、指令及路由等基本知識點,每個知識點都會有一個完整的案例與之對應;第15~19章為本書的第二部分,即進階篇,主要介紹一些常用的AngularJS第三方精華擴展,以及目前主流的Web前端工具,包括包管理工具Npm和Bower、前端流式自動化工具Gulp及前端單元測試工具Jasmine&Karma;。在最後兩章中,我們綜閤運用前麵所學的知識,實現瞭一個AngularJS版本的掃雷遊戲和一個客戶管理係統。
本書既適閤Web前端開發初學者、Web前端開發工程師閱讀,也適閤作為高等院校和培訓學校相關專業的教材。
江榮波,畢業於江蘇科技大學,目前就職於北京科藍軟件係統股份有限公司,擔任Java高級工程師,參與過網上銀行、直銷銀行、短信平颱、渠道整閤平颱開發,對開源前端框架jQuery、AngularJS等有較深入研究,曾作為CSDN特邀編輯參與AngularJS知識庫構建。
第一部分 入門篇
第1章 走進AngularJS世界 3
1.1 AngularJS簡介 3
1.2 搭建AngularJS開發環境 3
1.2.1 選擇集成開發工具 3
1.2.2 下載與安裝AngularJS 6
1.2.3 代碼調試工具 7
1.3 第一個AngularJS應用 8
1.4 AngularJS應用剖析 9
1.4.1 第一個AngularJS應用解惑 9
1.4.2 AngularJS應用構成元素 10
1.4.3 AngularJS錶達式 10
1.5 本章小結 12
第2章 雙嚮數據綁定 13
2.1 AngularJS雙嚮數據綁定 13
2.2 ng-model指令 14
2.3 ng-bind指令 16
2.4 數據綁定實例:價格計算器 17
2.5 本章小結 18
第3章 AngularJS與MVC 19
3.1 MVC模式簡介 19
3.2 AngularJS中的MVC 20
3.2.1 AngularJS控製器的定義 20
3.2.2 控製器對象的實例化 21
3.3 使用MVC思想重構價格計算器程序 22
3.4 控製器的作用域範圍 23
3.5 控製器中處理DOM事件 25
3.6 本章小結 27
第4章 應用模塊化 28
4.1 應用模塊劃分的重要性 28
4.2 AngularJS中的模塊 28
4.2.1 AngularJS模塊的定義 29
4.2.2 使用模塊解決命名衝突問題 29
4.3 模塊化最佳實踐 32
4.4 本章小結 33
第5章 作用域與事件 34
5.1 AngularJS作用域詳解 34
5.2 AngularJS作用域繼承 36
5.2.1 JavaScript對象繼承機製 36
5.2.2 AngularJS作用域對象原型繼承 39
5.3 作用域高級特性 42
5.3.1 $watch方法監視作用域 42
5.3.2 作用域監視解除 45
5.3.3 $apply方法與$digest循環 46
5.3.4 $apply與$digest應用實戰 47
5.3.5 $timeout與$interval服務介紹 49
5.4 作用域事件路由與廣播 50
5.4.1 $emit方法實現事件路由 50
5.4.2 $broadcast方法實現事件廣播 52
5.4.3 作用域對象$on方法詳解 55
5.5 本章小結 55
第6章 路由與多視圖 56
6.1 創建多視圖應用 56
6.1.1 使用$routeProvider創建映射 56
6.1.2 創建多視圖 58
6.1.3 通過路由切換視圖 58
6.2 通過URL嚮控製器傳遞參數 60
6.3 ng-template指令的使用 62
6.4 $location服務 64
6.5 $location實現多視圖切換 66
6.6 路由事件 67
6.7 ng-include指令 68
6.8 UI Router框架使用 69
6.8.1 UI Router下載與安裝 69
6.8.2 UI Router使用案例 70
6.9 本章小結 73
第7章 AngularJS錶單校驗 74
7.1 Web前端錶單校驗的必要性 74
7.2 AngularJS錶單校驗模式 74
7.3 ngMessages模塊 79
7.4 本章小結 82
第8章 AngularJS指令 83
8.1 內置指令詳解 83
8.2 AngularJS自定義指令 86
8.3 指令定義對象詳解 88
8.3.1 link方法 88
8.3.2 compile方法 92
8.3.3 scope屬性與指令作用域 94
8.3.4 孤立作用域與父作用域模型數據綁定 95
8.3.5 Transclusion 100
8.3.6 controller方法與require屬性 104
8.4 自定義錶單驗證模式 107
8.5 本章小結 109
第9章 Service、Factory與Provider 110
9.1 Service 110
9.2 Factory 112
9.3 Provider 113
9.4 Value&Constant; 114
9.5 本章小結 115
第10章 AngularJS過濾器 116
10.1 過濾器使用方法 116
10.2 AngularJS內置過濾器 118
10.3 自定義過濾器 126
10.3.1 案例一:自定義金額轉換人民幣大寫過濾器 127
10.3.2 案例二:自定義帶參數的過濾器 129
10.4 第三方過濾器庫的使用 131
10.4.1 angular-filter 131
10.4.2 angular-emoji-filter 133
10.5 本章小結 134
第11章 AngularJS中的依賴注入 135
11.1 JavaScript依賴注入實現 138
11.2 AngularJS中的依賴注入 142
11.3 $provide服務介紹 143
11.4 $injector服務介紹 145
11.5 本章小結 146
第12章 AngularJS與動畫 147
12.1 Web動畫實現原理 147
12.2 使用CSS3實現動畫 150
12.2.1 CSS3中的Transform屬性 150
12.2.2 CSS3中的Transition屬性 153
12.2.3 CSS3中的Animation屬性 157
12.2.4 常用的CSS3動畫庫 160
12.3 AngularJS動畫 162
12.3.1 基於事件驅動的CSS3動畫 162
12.3.2 AngularJS中的JavaScript動畫 166
12.3.3 ngView視圖切換動畫案例 168
12.3.4 ngAnimate與CSS3動畫庫整閤 172
12.3.5 ngFx動畫擴展庫 175
12.4 本章小結 177
第13章 Cookie讀寫 178
13.1 Cookie簡介 178
13.2 在JavaScript中操作Cookie 179
13.3 在AngularJS中操作Cookie 183
13.4 本章小結 186
第14章 Promise 187
14.1 AngularJS中的Promise機製 188
14.2 AngularJS請求Web服務 190
14.2.1 $http服務 191
14.2.2 使用Express構建RESTful服務 194
14.2.3 $resource服務 197
14.3 AngularJS文件上傳 200
14.4 Angular File Upload模塊介紹 204
14.5 本章小結 207
第二部分 進階篇
第15章 AngularUI 211
15.1 UI Bootstrap 211
15.1.1 警告框案例 212
15.1.2 復選框案例 213
15.1.3 日曆控件案例 215
15.1.4 模態對話框案例 216
15.1.5 下拉菜單案例 220
15.2 UI Ace 222
15.3 UI Grid 227
15.4 UI Date 229
15.5 UI Select 232
15.6 本章小結 234
第16章 AngularJS精華擴展 235
16.1 利用Angular Chart生成圖錶 235
16.1.1 柱狀圖案例 236
16.1.2 麯綫圖案例 237
16.1.3 餅狀圖案例 239
16.2 利用Videogular實現播放器 241
16.3 利用Angular Masonry實現照片牆 246
16.4 利用ngDialog實現對話框 250
16.5 本章小結 253
第17章 常用Web前端工具集 254
17.1 Node.js安裝與使用 254
17.2 Npm包管理工具 257
17.2.1 Npm安裝 257
17.2.2 初始化項目 258
17.2.3 安裝Node模塊 259
17.2.4 卸載Node模塊 260
17.3 Bower管理工具 260
17.3.1 安裝Bower 261
17.3.2 初始化Bower 261
17.3.3 使用Bower安裝包 263
17.3.4 查看包的信息 263
17.3.5 更新包的版本 264
17.3.6 查找包 264
17.3.7 卸載包 264
17.4 Gulp項目管理工具 265
17.4.1 Gulp的安裝與使用 265
17.4.2 利用JSHint驗證JavaScript代碼 266
17.4.3 壓縮JavaScript代碼 268
17.4.4 使用Gulp Changed插件更新文件 270
17.4.5 使用Gulp Plumber插件處理異常 271
17.4.6 使用Gulp壓縮圖片 271
17.4.7 使用Gulp編譯Less 272
17.4.8 使用Gulp Browsersync插件進行調試 275
17.5 Jasmine&Karma;單元測試工具 277
17.5.1 安裝Jasmine 278
17.5.2 使用Jasmine進行單元測試 278
17.5.3 在瀏覽器環境下使用Jasmine 282
17.5.4 安裝並使用karma 284
17.5.5 整閤Jasmine&Karma; 286
17.5.6 AngularJS單元測試 288
17.6 本章小結 294
第18章 綜閤案例:掃雷遊戲 295
18.1 搭建開發環境 295
18.2 遊戲元素介紹 296
18.3 實現布雷區 297
18.4 隨機生成地雷 300
18.5 生成方格中的數字 303
18.6 響應右擊事件 308
18.7 遊戲勝利與失敗條件檢測 311
18.8 實現重新開始遊戲功能 313
18.9 自動翻開相鄰方格 314
18.10 本章小結 317
第19章 綜閤案例:客戶管理係統 318
19.1 項目整體介紹 318
19.2 實現用戶模塊 321
19.3 實現主麵闆模塊 326
19.4 實現報錶模塊 328
19.5 實現客戶信息管理模塊 331
19.6 本章小結 335
第2章 雙嚮數據綁定
數據綁定是AngularJS框架最優秀的特性之一,能夠幫助Web前端開發人員在很大程度上減少對DOM的操作,本章我們就來深入學習這種機製。
AngularJS雙嚮數據綁定
數據綁定是AngularJS框架在視圖(DOM元素)與作用域之間建立的數據同步機製。所謂“雙嚮”,是指界麵的操作能夠實時同步到作用域中,作用域中的數據修改也能夠實時迴顯到界麵中。
作用域可以被視為一個容器,裏麵有一些基於key-value的數據。假如在視圖中有兩個輸入框,輸入框的name屬性分彆為uname和pword,如圖2.1所示。為瞭和錶單元素建立數據綁定,AngularJS會在作用域中添加兩個對應的屬性,假如名稱也為uname和pword。當用戶輸入內容發生變化時,AngularJS框架就把錶單內容同步到作用域中對應的變量中,而當我們改變作用域中的變量值時,AngularJS又會把修改後的變量值同步到錶單中,這就是AngularJS的雙嚮數據綁定。
圖2.1 AngularJS雙嚮數據綁定圖解
ng-model指令
為瞭建立數據綁定,我們需要用到AngularJS另外一個內置指令ng-model,該指令隻能用在錶單元素上,使用方法如下:
在input輸入框上添加ng-model指令後,AngularJS框架就會在對應的作用域中創建一個uname屬性和該輸入框進行綁定。
數據綁定是AngularJS最優秀的特性之一,下麵以一個案例來說明AngularJS數據綁定機製的好處。假如我們要完成這樣一個功能,即把用戶在錶單中輸入的信息動態迴顯到頁麵中。
如果使用原生的JavaScript,可以通過document對象的getElementById()方法獲取輸入框對象,響應輸入框的keyup事件,在輸入框的keyup事件響應方法中獲取輸入框內容,然後同樣以操作DOM的方式把輸入框內容顯示到頁麵中,具體代碼如下:
代碼清單:ch02ch02_01.html
用戶名:前 言
AngularJS是Google公司開發的一款Web前端框架,其源碼目前托管在Github上,從其源碼的關注度就可以看齣Angula AngularJS入門與進階 下載 mobi epub pdf txt 電子書 格式
AngularJS入門與進階 下載 mobi pdf epub txt 電子書 格式 2024
AngularJS入門與進階 下載 mobi epub pdf 電子書可以,還沒看一次買瞭兩本書
評分6467767676755736
評分受益匪淺的一本書,值得買
評分好好學習天天嚮上,啊啊啊
評分不錯的書,打摺買的,便宜,質量好,一次非常開心的購物
評分正在學習中,知識還算可以吧。
評分版本1的,居然現在纔剛齣版,這個要寫好幾年啊
評分書不錯,優惠買的,就是物流延誤瞭
評分。
AngularJS入門與進階 mobi epub pdf txt 電子書 格式下載 2024