CSDN知識庫精品推薦：AngularJS學習指南

知無不言 第十三期

知識庫特邀編輯講技術的那些事兒

李澤揚，CSDN知識庫特邀編輯，雜誌作者。在多玩YY負責升龍遊戲雲平台前端開發。之前曾任職於騰訊，主要技術棧為Java及前端，GitHub帳號為giantray。

編者說

如果你是一名前端開發工程師，但還不了解AngularJS是做什麼用的。那麼，強烈建議仔細閱讀本文。 一言以蔽之，AngularJS（本文主要介紹的是1.x版本）是一款優秀的前端JavaScript框架，由Google開發、維護。該框架有著諸多特性，最為核心的是MVVM、模塊化、自動化雙向數據綁定、語義化標籤、依賴注入等。

AngularJS概述

【生態圈成熟】

在GitHub上，AngularJS以超過48000個Star，高居榜第四位，在前端領域，只落後於Bootstarp，高於React及jQuery，其受歡迎的程度，可見一斑。以ng作為關鍵字在GitHub上搜索，有超過8000個JavaScript項目，而這些項目，很大一部分就是AngularJS的第三方開源組件。也就是說，AngularJS的生態圈已經頗為完善，你不用頻繁造輪子，有很多現成的工具可以用。

【AngularJS帶來了什麼】

AngularJS代表了目前前端開發的一種趨勢，有很多先進的設計理念。很多人初次認識AngularJS，會被其神奇的雙向綁定及語義化標籤所吸引。在實際的項目開發中，也會發現，AngularJS解決了界面和數據聯動這一非常繁瑣的問題，切切實實為開發縮減了大量的代碼（例如少了很多元素選擇、設值取值的代碼），一樣的功能，用AngularJS實現，代碼量可能只有jQuery的三分之一，開發人員可以有更多的精力集中於實際業務邏輯中。另外，遵循AngularJS規範開發，代碼職責更加清晰，可維護性更好，可以防止一些剛學JavaScript的程式設計師寫出一堆難以維護的代碼，指令的特性，極大提高項目Web組件化的程度。

而對於學習者來說，可以帶來以下的提升：

1. 學習MVVM的模式，寫邏輯分層更佳的代碼，你會發現自己以前把各種各樣的代碼邏輯都扔到一起，簡直就是一坨「文明用語」 。

2. 學習模塊化開發 。

3. 理解Web組件化的理念和設計模式。

4. 學習如何寫可測性更佳的代碼。著力提高可測性，是AngularJS的一大設計哲學。

【沒有完美的框架】

就AngularJS 1.x來說，還存在不少缺憾。例如，受人詬病的，AngularJS概念太多，有一定的學習曲線。在瀏覽器兼容方面，從AngularJS 1.3版本之後，就拋棄了對IE8瀏覽器的支持。對於崇尚小而美的人來說，AngularJS體積龐大，架構重，可以幹的事情太多。在性能方面，其髒檢查的特性註定了會存在局限。

但是，世上沒有完美的框架，也不要為了學框架而學。對於項目開發來說，一定要結合實際情況，決定是否引入新框架、新技術。而從學習角度講，學習框架，不僅是解決問題，更要學習框架的思想。

CSDN知識庫包含了知識體系和相關知識點內容

AngularJS 知識節點

1. 視圖與內置指令：AngularJS內置了大量指令，如ng-model、ng-if、ng-class、ng-click等，幫助我們寫HTML模板。你需要理解這些指令應該如何使用，例如如何通過雙向綁定ng-model指令，往HTML中填充值，通過ng-click綁定事件等。

2. Controller：在AngularJS中，通過Controller來初始化數據和定義事件函數。你的AngularJS學習之旅，可以從寫一個簡單的HTML模板及對應的Controller開始。

3. Directive：Directive是AngularJS中比較難上手，但也是非常重要的概念。它相當於一個自定義的HTML元素。Directive是Web組件化開發的利器，能夠將view中複雜的交互邏輯抽取為一個個指令，使view具有更強的可讀性及維護性。你可以從最簡單的指令開始，逐步了解如何綁定HTML模版，綁定事件，寫對應的Controller，傳參等。

4. Filter：你可以自定義Filter，用來在HTML模板上做數據格式化，值到值的轉換。Filter比較簡單，但經常會用到。

5. 頁面路由：真正的Web項目，當然離不開頁面路由。AngularJS官方提供了路由庫ngRoute，另外，還有一個好用且廣受推薦的第三方庫Angular-UI-Router。前者是簡單版，後者功能更加強大。我個人傾向於使用Angular-UI-Router，因為它能覆蓋更多實際的業務場景。

6. HTTP：你可以通過$http和後端伺服器通信，也可以用更高級的封裝$resource和RESTful API通信。這兩個組件可以帶來抽象層級更高的後台通信邏輯。另外，你還會接觸到$promise，用一種更加優雅的鏈式方式寫異步通信邏輯。

7. 服務：說到服務（Service），那就一定要好好了解Provider、Factory、Service的差別和使用方式。在實際項目開發中，一般會將後台數據請求與數據緩存邏輯放到Service（或者Factory）中，以方便在不同的Controller中復用公共的邏輯。

8. 深入原理：如果你覺得AngularJS已經基本入門了，建議再重點理解以下原理：AngularJS啟動過程、依賴注入、髒檢查機制、MVVM模式、AngularJS作用域、$promise。徹底理解這些原理之後，相信你對AngularJS的認識會提升一個層次。

9. AngularJS 2：AngularJS 2跟AngularJS1.x的差別非常大，甚至可以認為是兩套完全不同的框架。本文截稿之前，AngularJS 2.0還處於Beta階段。至於是用AngularJS 1.x還是用AngularJS 2，我個人的觀點是，在未來一段時間，AngularJS 1.x還會有較強的生命力，官方團隊也表示會繼續維護1.x版本，AngularJS 2周邊的資料及開源組件也需要時間去積累。所以，如果是現在要上馬的項目，還是用AngularJS 1.x靠譜些。在學習和使用AngularJS1.x的過程中，對於前端的架構設計、個人視野的提高，也有較大的幫助。

10. 測試：自動（單元）測試涉及的兩個主要工具是Jasmine和Karma。AngularJS在設計之初，就希望能使程式設計師編寫更乾淨、可靠、可測試的代碼。這是AngularJS帶來的最有價值的特性之一。

11. 前端工程化：在開發大型Web項目時，需要用到前端工程化的方式，解決可以自動化處理的事情，解放生產力。例如，可以用Grunt、Gulp、Webpack做代碼混淆、打包、自動構建等，用Bower做包依賴管理，用Yeoman自動生成代碼。工欲善其事必先利其器，將AngularJS和這些生產力工具結合，對項目的開發效率大有裨益。

12. 移動開發：ionic是一個基於AngularJS、較為成熟的移動開發框架。它可以用來做Hybrid App開發，寫JavaScript代碼，最終生成可以運行在Android及iOS上的App。

13. 官方的增強組件及第三方組件：在實際開發中，你也許還需要了解如何通過ngTranslate做本地化、ngAnimate做動畫。另外，還可以到GitHub上搜索「ng」，然後按Star數排行，看看有哪些受歡迎，好用的第三方組件。