內容簡介
在前端開發中,如何彌補語言的先天不足?如何乾淨漂亮地解耦?如何設計“小而美”的類/代碼塊?對於一個“極客”來說,總是要用一些漂亮的技術來解決這些問題,而Angular當之無愧是這類技術之一。本書深入講解AngularJS的基本概念及其背後的原理,包括完整的開發框架與實踐,從最初的框架搭建開始,快速迭代,逐步豐富項目的骨肉,並在這個過程中展現AngularJS的諸多特性與技巧,內容由淺入深、講解細膩、實戰性強,是從AngularJS的小工走嚮專傢的必備參考。
主要內容:
從實戰開始,通過實戰演練逐步帶領讀者體驗Angular的開發過程,並隨著進度的推進,引入所需的技術和概念。
介紹一些基本概念是什麼,為什麼,怎麼用,什麼時候用,什麼時候不用等。
AngularJS中的MVVM模式、啓動過程、髒檢查機製、指令生命周期等。
AngularJS實踐,如前後端分離部署、如何設計友好的REST API、移除不必要的$watch、用打包代替動態加載等。
AngularJS開發技巧與實戰中的“坑”,如錶單驗證錯誤信息顯示、Angular中的AOP機製、在代碼中注入Filter、動態綁定HTML等。
作者簡介
雪狼,資深前端架構師,熱愛技術,熱衷編程,16年來從未中斷。涉足的軟件開發領域從桌麵軟件到Web應用,涵蓋翻譯軟件、通訊軟件、安全軟件、企業級係統等。他還是AngularJS中文社區管理員,在社區分享瞭大量技術文章,受到讀者的好評與稱贊。
破狼,ThoughtWorks一綫碼農,高級架構師、谘詢師國內Angular早布道者之一,ngnice、ngShowCase創建人之一。Angular中文社區“狼主”,全棧攻城獅,同時也運維瞭一個前端微信公眾號“shuang_lang_shuo”。
彭洪偉,ThoughWorks一綫碼農,Angular早期使用者,ngnice的早期貢獻者之一。除瞭前端技術,對Java、Scala、Ruby等也均有涉獵,並且翻譯瞭構建工具SBT的文檔
目錄
序
前 言
第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
前言/序言
新時代
新挑戰
時代已經不同瞭!
17年前,當我的第一個作品推入市場的時候,互聯網纔剛剛傳入中國。
那時候的軟件不需要聯網,每個用戶也不需要知道其他用戶的存在。
那時候隻需要考慮PC運行環境,而需要考慮的屏幕分辨率也隻有區區三種。
那時候的軟件項目組多則十幾人,少則一人,而發布周期常常會達到半年之久。
現在,一切都不同瞭。
現在,連一個手機電筒軟件都在偷偷聯網,不能聯網的遊戲也已經是老古董的代名詞。
現在,軟件不但運行在PC上,還要運行在智能手機上,運行在各種Pad上,屏幕分辨率更是多到讓研發和測試工程師發怵的地步。
現在,外界看到的産品其實隻是冰山一角,它背後還有很多子係統緊密協作來提供支持,需求和架構的復雜度也暴增。
但最大的挑戰恐怕還是來自發布周期—一期版本在一個月內上綫已是常態,而修復bug的時間限製則往往以小時計,甚至以分鍾計。
沒錯,這些都是新的挑戰!好在,我們也有瞭新技術!
新技術
這17年間,軟件業最大的技術革命,當然首推互聯網。
互聯網不但拓展瞭軟件業的業務範圍,更改變瞭程序員獲取知識和解決問題的方式。
如今,一個不會Google(以及翻牆),沒上過GitHub,不知道Stackoverflow的程序員很難想象會有什麼發展空間。
排在第二位的技術革命,當推移動互聯網以及智能終端。這場革命不但把曾經的王者諾基亞打落凡塵,而且讓蘋果重新登上王位。
這兩場技術革命讓開源運動遍地開花,更催生瞭無數的新技術。
且不提HTTP/HTML/JavaScript/CSS這些耳熟能詳的互聯網基石,就連在互聯網革命爆發之前已經就已經相當成熟的OO領域也有瞭很大的進展。
以MVC為例,它不但衍生齣MVP、MVVM等很多變種,而且從後端領域擴展到瞭前端領域。而現在日益火爆的Angular,正是MVC在前端領域的代錶作之一。
一個“極客”總是癡迷於各種“漂亮”的技術,而Angular當之無愧地是其中之一,它可供藉鑒的地方很多:
如何彌補語言的先天不足。
如何乾淨漂亮地解耦。
如何設計“小而美”的類/代碼塊。
所以,即使你還沒有下決心把Angular應用到項目中,也可以在學習Angular的過程中獲得一些啓迪,幫助你重構現有項目。
麵對技術的快速進步,有人會感到恐慌,有人會盲目地追蹤一切新技術,而真正的極客會看到“新”技術中那些“不變”的元素,會在“新挑戰”中看到“新機遇”,並且把握。
新機遇
一方麵齣現瞭前所未有的挑戰,另一方麵齣現瞭前所未有的技術,這樣的機遇並不多,“極客”們歡呼雀躍。
對於公司,它將影響産品形態、開發速度和産品品質,也會對團隊的組織架構帶來改變。比如,伴隨著設備的多樣化,網絡服務的訪問入口變得多樣化:不但需要有供電腦訪問的網站,還需要供手機訪問的網站、供Pad訪問的網站,對於一些追求極緻用戶體驗的公司來說,還會提供給安卓設備用的App、給蘋果設備用的App。
作為開發人員,也許你會看到或正在經曆一個工作量暴增的時代,但是,不要緊張,事情沒那麼壞。在新時代,有一項重要且迅速成長的技術革新,那就是“前後端分離架構”,它可以有效遏製工作量的暴增。“前後端分離架構”正是伴隨著“前端MVC”的成長而成長的。
它的原理很簡單:雖然多齣瞭很多訪問入口,但是其背後的業務邏輯並沒有本質性變化,那麼,我們是否可以讓這一套業務邏輯為多種不同形態的終端服務呢?答案是肯定的,那就是讓後端隻提供跟業務邏輯緊密相關的那部分API,而用戶交互等非核心邏輯則交給前端程序來完成。
這樣,我們的工作量並不會成倍增長,而是可以先著重開發一個版本,讓後端API和一種形態的前端應用變得成熟,然後再去開發其他形態的前端應用。而這些其他形態的前端程序的工作量和風險都比較容易得到控製。
但是,根據康威定律,在新的程序架構下,項目的組織架構甚至整個公司的組織架構都將發生相應的變化,而最顯著的變化就是齣現瞭專門的前端工程師。前端工程師往往不是零基礎開始的,一小部分來自原來負責切圖或寫JavaScript特效的工程師,不過大部分是從以前開發Web應用的程序員轉型而來的。
無論對於公司還是個人,“前端MVC”以及相應的“前後端分離架構”都是一個新的機遇。不思進取的王者終會沒落,勤奮好學的新星將會崛起,希望本書能有幸成為你的助力。
緻讀者
寫給想轉職或兼修前端的Web工程師
本書麵嚮的讀者,第一大群體是Web工程師。“前後端分離架構”齣現之前,在大多數Web應用中,無論是核心的業務邏輯,還是錶現層的交互邏輯,都是完全運行在服務端的。寫這類程序的程序員就是這裏所說的Web工程師。
隨著“前後端分離架構”的普及,原來的開發方式將主動或被迫轉變。本書將通過實例引導你完成到“前後端分離架構”的思維轉變,以及與此相關的技術。
如果你是個Web工程師,在讀本書的時候請留意用戶交互邏輯是如何完全移交給前端程序的,而後端程序又做瞭哪些精簡,特彆要注意體會模塊職責的單一化、專業化趨勢。
對於部分轉職過來的Web工程師,除瞭轉換思維以外,還有一大挑戰是前端龐雜的知識體係:HTML/CSS/JavaScript/前端工具鏈/瀏覽器兼容性等,每一個領域都相當龐大。
在本書中,我們無法對此展開講解,但這些知識對於做實際項目又是必需的。所以,我們隻能在附錄中提供一些重要的技術要點和“坑”,並且給齣一些在綫學習資源和書單。這些大部分都是從我們開展培訓時所使用的課件改編而來的,具有很強的實戰性、實用性。希望可以為你提供一些第三方資料,作為進一步學習的起點。
寫給想進階為專業前端的切圖師
在很多開發組中,切圖師往往由初級程序員或美工擔任,有沒有想過自己將來嚮哪裏發展?除瞭麵嚮對象、項目管理等必學的基礎技能之外,還可以學習數據庫、後端框架、安全技術等,轉職為
AngularJS深度剖析與最佳實踐 下載 mobi epub pdf txt 電子書