AngularJS開發秘籍

1.1  使用Node.js創建JavaScript開發環境 1

1.1.1  創建Node.js 2

1.1.2  使用Node.js運行JavaScript 3

1.1.3  使用Node.js創建Express Web服務器 3

1.2  定義變量 6

1.3  了解JavaScript數據類型 6

1.4  使用運算符 7

1.4.1  算術運算符 7

1.4.2  賦值運算符 8

1.4.3  應用比較和條件運算符 8

1.5  實現循環 11

1.5.1  while循環 11

1.5.2  do/while循環 11

1.5.3  for循環 12

1.5.4  for/in循環 12

1.5.5  中斷循環 13

1.6  創建函數 13

1.6.1  定義函數 14

1.6.2  向函數傳遞變量 14

1.6.3  從函數返回值 14

1.6.4  使用匿名函數 15

1.7  理解變量作用域 15

1.8  使用JavaScript對象 16

1.8.1  使用對象語法 16

1.8.2  創建自定義對象 17

1.8.3  使用原型對象模式 18

1.9  操作字符串 18

1.9.1  合并字符串 20

1.9.2  在字符串中搜索子字符串 20

1.9.3  替換字符串中的單詞 20

1.9.4  將字符串拆分為數組 20

1.10  使用數組 21

1.10.1  合并數組 22

1.10.2  迭代數組 22

1.10.3  將數組轉換為字符串 23

1.10.4  檢查數組中是否包含特定的數據項 23

1.10.5  向數組中添加和從數組中移除數據項 23

1.11  添加錯誤處理 24

1.11.1  try/catch塊 24

1.11.2  拋出自定義錯誤 24

1.11.3  使用Finally 25

1.12  小結 25

第2章  開始使用AngularJS 27

2.1  選擇AngularJS的原因 27

2.2  了解AngularJS 28

2.2.1  模塊 28

2.2.2  作用域和數據模型 28

2.2.3  模板視圖和指令 29

2.2.4  表達式 29

2.2.5  控制器 29

2.2.6  數據綁定 29

2.2.7  服務 30

2.2.8  依賴注入 30

2.2.9  編譯器 30

2.3  AngularJS生命周期概覽 30

2.3.1  啟動階段 30

2.3.2  編譯階段 31

2.3.3  運行時數據綁定階段 31

2.4  責任分離 31

2.5  在現有JavaScript和jQuery 代碼中集成AngularJS 31

2.6  在環境中添加AngularJS 32

2.7  在HTML文檔中啟動AngularJS 33

2.8  使用全局API 33

2.9  創建基本的AngularJS應用 34

2.9.1  加載AngularJS庫和主模塊 35

2.9.2  定義AngularJS應用根元素 35

2.9.3  在模板中添加控制器 36

2.9.4  實現作用域模型 36

2.10  在AngularJS應用中使用jQuery或者jQuery Lite 37

2.10.1  jQuery Lite 38

2.10.2  訪問jQuery或者jQuery Lite庫 39

2.10.3  直接訪問jQuery或者jQuery Lite 40

2.11  小結 40

第3章  了解AngularJS應用動態 41

3.1  了解模塊和依賴注入 41

3.1.1  了解模塊 41

3.1.2  依賴注入 42

3.2  定義AngularJS Module對象 42

3.3  在AngularJS模塊中創建提供者 43

3.3.1  專用的AngularJS對象提供者 43

3.3.2  服務提供者 44

3.4  實現提供者和依賴注入 44

3.4.1  在控制器中注入內置提供者 45

3.4.2  實現自定義提供者并將它注入控制器中 46

3.5  為模塊應用配置塊和運行塊 47

3.5.1  添加配置塊 48

3.5.2  添加運行塊 48

3.5.3  實現配置塊和運行塊 48

3.6  小結 50

第4章  實現作用域作為數據模型 51

4.1  了解作用域 51

4.1.1  根作用域和應用之間的關系 51

4.1.2  作用域和控制器之間的關系 52

4.1.3  作用域和模板之間的關系 54

4.1.4  作用域和后端服務器數據之間的關系 56

4.1.5  作用域生命周期 56

4.2  實現作用域層次結構 57

4.3  小結 60

第5章  使用AngularJS模板創建視圖 61

5.1  了解模板 61

5.2  使用表達式 62

5.2.1  使用基本表達式 63

5.2.2  在表達式中與作用域交互 64

5.2.3  在AngularJS表達式中使用JavaScript 67

5.3  使用篩選器 68

5.3.1  使用內置篩選器 69

5.3.2  使用篩選器實現排序和篩選 72

5.4  創建自定義篩選器 74

5.5  小結 76

第6章  在AngularJS視圖中實現指令 77

6.1  了解指令 77

6.2  使用內置指令 77

6.2.1  支持AngularJS功能的指令 78

6.2.2  擴展表單元素的指令 81

6.2.3  綁定模型到頁面元素的指令 85

6.2.4  綁定頁面事件到控制器的指令 89

6.3  小結 96

第7章  創建自定義指令用于擴展HTML 97

7.1  了解自定義指令定義 97

7.1.1  定義指令視圖模板 99

7.1.2  限制指令行為 99

7.1.3  在指令中添加控制器 100

7.1.4  配置指令作用域 101

7.1.5  嵌入元素 103

7.1.6  使用鏈接函數操作DOM 103

7.1.7  使用編譯函數操作DOM 105

7.2  實現自定義指令 105

7.2.1  在自定義指令中操作DOM 106

7.2.2  在自定義視圖中實現事件處理程序 108

7.2.3  實現嵌套指令 111

7.3  小結 113

第8章  使用事件與模型中的數據進行交互 115

8.1  瀏覽器事件 115

8.2  用戶交互事件 115

8.3  添加$watches追蹤作用域變化事件 116

8.3.1  使用$watch追蹤作用域變量 116

8.3.2  使用$watchGroup追蹤多個作用域變量 116

8.3.3  使用$watchCollection追蹤作用域中對象的屬性變化 117

8.3.4  在控制器中實現監視 117

8.4  發出和廣播自定義事件 119

8.4.1  向父作用域層次結構發出自定義事件 119

8.4.2  向子作用域層次結構廣播自定義事件 119

8.4.3  使用偵聽器處理自定義事件 120

8.4.4  在嵌套控制器中實現自定義事件 120

8.5  小結 123

第9章  在Web應用中實現AngularJS服務 125

9.1  了解AngularJS服務 125

9.2  使用內置服務 125

9.2.1  使用$http服務發送HTTP GET和PUT請求 126

9.2.2  使用$cacheFactory服務 131

9.2.3  使用$window服務實現瀏覽器警告 132

9.2.4  使用$cookieStore服務與瀏覽器cookie交互 132

9.2.5  使用$interval和$timeout 服務實現定時器 134

9.2.6  使用$animate服務 135

9.2.7  使用$location服務 139

9.3  使用$q服務提供延遲響應 142

9.4  小結 143

第10章  創建自定義AngularJS服務 145

10.1  了解自定義AngularJS服務 145

10.1.1  定義value服務 145

10.1.2  定義constant服務 146

10.1.3  使用工廠提供者構建factory服務 146

10.1.4  使用對象定義service服務 146

10.2  在AngularJS應用中集成自定義服務 147

10.2.1  實現使用所有4種類型服務的簡單應用 147

10.2.2  實現簡單的時間服務 149

10.2.3  實現數據庫訪問服務 152

10.3  小結 157

第11章  以AngularJS方式創建富Web應用組件 159

11.1  構建標簽視圖 159 

11.2  實現可拖放元素 162

11.3  為圖片添加縮放視圖區域 166

11.4  實現可展開和可折疊的元素 169

11.5  在元素中添加星級 174

11.6  小結 176

附錄A  測試AngularJS應用 177