AngularJS深度剖析與最佳實踐

《AngularJS深度剖析與最佳實踐》是2016年機械工業出版社出版的圖書，作者是雪狼、破狼、彭洪偉。

基本介紹

• 中文名：AngularJS深度剖析與最佳實踐
• 作者：雪狼、破狼、彭洪偉
• 出版社：機械工業出版社
• 出版時間：2016年1月1日
• ISBN：9787111520962

內容簡介

在前端開發中，如何彌補語言的先天不足？如何乾淨漂亮地解耦？如何設計“小而美”的類/代碼塊？對於一個“極客”來說，總是要用一些漂亮的技術來解決這些問題，而Angular當之無愧是這類技術之一。本書深入講解AngularJS的基本概念及其背後的原理，包括完整的開發框架與實踐，從最初的框架搭建開始，快速疊代，逐步豐富項目的骨肉，並在這個過程中展現AngularJS的諸多特性與技巧，內容由淺入深、講解細膩、實戰性強，是從AngularJS的小工走向專家的必備參考。

主要內容：

從實戰開始，通過實戰演練逐步帶領讀者體驗Angular的開發過程，並隨著進度的推進，引入所需的技術和概念。

介紹一些基本概念是什麼，為什麼，怎么用，什麼時候用，什麼時候不用等。

AngularJS中的MVVM模式、啟動過程、髒檢查機制、指令生命周期等。

AngularJS實踐，如前後端分離部署、如何設計友好的REST API、移除不必要的$watch、用打包代替動態載入等。

AngularJS開發技巧與實戰中的“坑”，如表單驗證錯誤信息顯示、Angular中的AOP機制、在代碼中注入Filter、動態綁定HTML等。

圖書目錄

序

前　言

第1章　從實戰開始1

1.1　環境準備1

1.2　需求分析與疊代計畫3

1.3　創建項目11

1.3.1　Yeoman11

1.3.2　FrontJet13

1.4　實現第一個頁面：註冊18

1.4.1　約定優於配置18

1.4.2　定義路由19

1.4.3　把後端程式跑起來24

1.4.4　連線後端程式26

1.4.5　添加驗證器28

1.4.6　“錯誤信息提示”指令31

1.4.7　用過濾器生成用戶友好的提示

信息33

1.4.8　實現自定義驗證規則34

1.4.9　實現圖形驗證碼36

1.5　實現更多功能：主題38

1.5.1　實現主題列表38

1.5.2　實現過濾功能40

1.5.3　實現分頁功能42

1.5.4　實現主題樹44

1.5.5　實現遞歸主題樹56

1.5.6　實現“查看詳情”功能58

1.6　實現AOP功能59

1.6.1　實現登錄功能60

1.6.2　實現對話框65

1.6.3　實現錯誤處理功能67

1.7　實戰小結68

第2章　概念介紹70

2.1　什麼是UI70

2.2　模組71

2.3　作用域72

2.4　控制器73

2.5　視圖74

2.6　指令75

2.6.1　組件型指令76

2.6.2　裝飾器型指令79

2.7　過濾器81

2.8　路由82

2.9　服務83

2.9.1　服務85

2.9.2　工廠86

2.10　承諾88

2.11　訊息92

2.12　單元測試93

2.12.1　MOCK的使用方式94

2.12.2　測試工具與斷言庫95

2.13　端到端測試96

第3章　背後的原理98

3.1　Angular中的MVVM模式98

3.2　Angular啟動過程102

3.3　依賴注入106

3.3.1　什麼是依賴注入106

3.3.2　如何在JavaScript中實現DI107

3.3.3　Angular中的DI108

3.3.4　DI與minify109

3.4　髒檢查機制110

3.4.1　瀏覽器事件循環和Angular的MVW110

3.4.2　Angular中的$watch函式111

3.4.3　Angular中的$digest函式113

3.4.4　Angular中的$apply116

3.5　指令的生命周期117

3.5.1　Injecting118

3.5.2　compile和link過程120

3.6　Angular中的$parse、$eval和$observe、$watch122

3.6.1　$parse和$eval122

3.6.2　$observe和$watch124

3.6.3　使用場景125

3.7　REST127

3.7.1　REST的六大要點128

3.7.2　REST的四個級別130

3.8　跨域131

3.8.1　同源策略與跨域131

3.8.2　如何解決跨域問題132

3.9　前端安全技術133

3.9.1　前端攻擊的基本原理和類型133

3.9.2　前端安全與前後端分工136

3.9.3　移動時代的特殊挑戰137

3.9.4　安全無止境138

第4章　最佳實踐140

4.1　調整開發協作流程140

4.2　前後端分離部署143

4.3　樣式中心頁144

4.4　CSS的擴展語言與架構145

4.5　HTML的表意性146

4.6　table，天使還是魔鬼148

4.7　測試什麼？怎么測？150

4.7.1　準備工作150

4.7.2　如何測試Controller151

4.7.3　如何測試Service151

4.7.4　如何測試Filter152

4.7.5　如何測試組件型指令152

4.7.6　如何測試裝飾器型指令153

4.7.7　如何測試網路請求153

4.7.8　如何測試setTimeout類功能153

4.7.9　如何Mock Service154

4.8　如何設計友好的REST API155

4.8.1　URI155

4.8.2　資源拆分155

4.8.3　資源命名155

4.8.4　方法156

4.8.5　返回值157

4.8.6　綜合案例：分頁API159

4.9　使用controller as vm方式160

4.9.1　源碼分析161

4.9.2　推薦用法和優勢161

4.9.3　路由中的controller as語法162

4.9.4　指令中的controller as語法163

4.10　移除不必要的$watch163

4.10.1　雙向綁定和watchers函式164

4.10.2　其他指令中的watchers函式166

4.10.3　慎用$watch和及時銷毀167

4.10.4　one-time綁定168

4.10.5　滾屏載入170

4.10.6　其他171

4.11　總是用ng-model作為輸出172

4.12　用打包代替動態載入173

4.13　引入Angular-hint173

4.13.1　通過batarang外掛程式使用angular-hint174

4.13.2　手動集成angular-hint174

4.13.3　Module hints175

4.13.4　Controller hints176

4.13.5　Directive hints176

第5章　Angular開發技巧178

5.1　$timeout的妙用178

5.2　ngTemplate寄宿方式182

5.3　在非獨立作用域指令中實現scope綁定185

5.4　表單驗證錯誤信息顯示186

5.5　Angular中的AOP機制187

5.5.1　攔截器案例188

5.5.2　攔截器源碼分析192

5.5.3　Angular中的裝飾器195

5.5.4　Angular裝飾器源碼分析197

5.6　Ajax請求和回響數據的轉換198

5.6.1　兼容老式API198

5.6.2　Ajax請求配置的源碼分析201

5.7　在代碼中注入Filter205

5.7.1　復用指定Filter205

5.7.2　重用多個Filter案例206

5.7.3　Filter源碼分析207

5.8　防止Angular表達式閃爍208

5.8.1　表達式閃爍解決方案208

5.8.2　ngCloak源碼分析208

5.8.3　最佳實踐209

5.9　實現前端許可權控制209

5.9.1　事件方案210

5.9.2　resolve方案211

5.10　依賴注入—$injector214

5.10.1　$injector的創建214

5.10.2　$injector注入方式215

5.10.3　$injector的妙用217

5.11　在指令中讓使用者自定義模板219

5.12　跨多個節點的ng-if或ng-repeat223

5.13　阻止事件冒泡和瀏覽器默認行為224

5.14　動態綁定HTML226

第6章　Angular常見的“坑”229

6.1　module函式的聲明和獲取重載229

6.2　ngModel綁定值不更改232

6.2.1　驗證引起的model值不顯示233

6.2.2　原型鏈繼承問題235

6.3　指令不生效239

6.4　Angular中錨點的使用240

6.5　ngRepeat驗證失效241

6.5.1　簡單的驗證顯示242

6.5.2　複雜的驗證顯示242

6.6　有些指令需要唯一的根節點243

6.7　指令優先權-Priority243

6.8　ngRepeat報重複內容錯誤244

6.9　單元測試中promise不觸發245

第7章　編碼規範247

7.1　目錄結構248

7.1.1　按照類型優先、業務功能其次的組織方式248

7.1.2　按照業務功能優先、類型其次的組織方式249

7.2　模組組織250

7.2.1　命名250

7.2.2　Module聲明250

7.2.3　依賴聲明251

7.2.4　Module組件聲明251

7.3　控制器252

7.3.1　命名252

7.3.2　ControllerAs vm聲明252

7.3.3　初始化數據253

7.3.4　DOM操作253

7.3.5　依賴的聲明253

7.3.6　精簡控制器邏輯254

7.3.7　禁止用$rootScope傳遞數據255

7.3.8　格式化顯示邏輯255

7.3.9　Resolve255

7.4　服務256

7.4.1　命名256

7.4.2　代碼復用256

7.4.3　使用場景256

7.4.4　Service返回值257

7.4.5　快取不變數據257

7.4.6　RESTful257

7.5　過濾器258

7.5.1　命名258

7.5.2　重用已有Filter258

7.5.3　禁止複雜的Filter258

7.6　指令259

7.6.1　命名259

7.6.2　Template聲明259

7.6.3　link函式的scope參數命名259

7.6.4　pre-link和post-link260

7.6.5　DOM操作260

7.6.6　Directive分類260

7.6.7　Directive不是封裝jQuery代碼“天堂”260

7.6.8　自動回收261

7.7　模板261

7.7.1　表達式綁定261

7.7.2　Src、Href問題261

7.7.3　Class優於Style262

7.8　工具262

7.9　其他264

7.9.1　內置$服務替代原生服務264

7.9.2　Promise解決回調地獄264

7.9.3　減少$watch265

7.9.4　TDD265

第8章　工具267

8.1　WebStorm與IntelliJ267

8.2　Chrome269

8.3　Gulp273

8.4　Swagger274

8.4.1　前後端分離274

8.4.2　Swagger275

8.4.3　契約測試277

8.5　TSD277

8.6　Postman280

8.6.1　安裝280

8.6.2　功能介紹280

第9章　雜項知識282

9.1　Angular 2.0282

9.2　SEO284

9.3　IE兼容性287

9.3.1　問題概述287

9.3.2　問題分類288

9.4　訪問統計292

9.5　回響式布局293

9.6　國際化294

9.7　動畫296

9.7.1　CSS動畫296

9.7.2　JavaScript動畫297

9.8　手機版開發298

9.8.1　Hybrid套用298

9.8.2　Ionic300

附錄A　相關資源301

後記　提問的智慧318

作者簡介

雪狼，資深前端架構師，熱愛技術，熱衷編程，16年來從未中斷。涉足的軟體開發領域從桌面軟體到Web套用，涵蓋翻譯軟體、通訊軟體、安全軟體、企業級系統等。他還是AngularJS中文社區管理員，在社區分享了大量技術文章，受到讀者的好評與稱讚。

　　破狼，ThoughtWorks一線碼農，高級架構師、諮詢師國內Angular早布道者之一，ngnice、ngShowCase創建人之一。Angular中文社區“狼主”，全棧攻城獅，同時也運維了一個前端微信公眾號“shuang_lang_shuo”。

　　彭洪偉，ThoughWorks一線碼農，Angular早期使用者，ngnice的早期貢獻者之一。除了前端技術，對Java、Scala、Ruby等也均有涉獵，並且翻譯了構建工具SBT的文檔。