jQuery開發者眼中的AngularJS

AngualrJS是一個很貼心的web應用框架。它有很不錯的官方文檔和示例；通過在現實環境中的測試著名的TodoMVC project，它在海量的框架中脫穎而出；並且網上處處都是很不錯演示或者展現。可是對於一個沒有接觸過和AngularJS類似的框架並且仍是幾乎都在使用像jQuery這樣的JavaScript類庫的開發者來說，要從jQuery的思想轉變成AngularJS的思想是有點困難的。至少對於我來講是這樣的，因此我想要分享一些學習筆記但願幫到一些開發者。

Ng不是一個庫(library)

要理解AngularJS，第一件要作得事情就是要明白這是一個根本上就和jQuery不同的工具。jQuery是一個庫而AngularJS是一個框架。使用庫是指，你的代碼決定何時從庫中調用一個特定的方法；使用框架則是，你實現了一些回調方法，到了特定的時候框架會去調用這些方法。

當你思考下在runtime的時候會發生什麼之後你就能夠理解這個不一樣點了。jQuery在與runtime的時候會發生什麼？大部分狀況下，何時都不會發生。jQuery代碼的執行是做爲觸發了DOM事件上綁定的jQuery方法的響應。

在加載的時候，Angular會將你的DOM樹和JavaScript轉向一個angular app。包含着Angular指令和過濾器的HTML會被編譯成一個視圖樹，響應的範圍和控制器會被附加上這個樹上，內部的應用循環確保了視圖和模型之間的數據綁定。這是一個真正的MVC例子，視圖控制器和模型之間是被完全分離了。你能夠認爲主要的事件/渲染/綁定循環是一個例子，它持續在運行，只有在須要的時候才調用你的控制器。

每次模型被更新（能夠是經過AJAX請求，也能夠是直接操做控制器），Angular會從新運行它的$digest循環，更新數據綁定確保全部東西都是同步的。

是聲明，而不是命令

不像有些庫或者框架，Angualr從不把HTML或者JS看成一個須要修復的bug（我正看着你呢），而是用一個天然的方式讓你都不能相信本身並無在思考。這一點仍是讓我用代碼告訴你吧。

舉個例子，咱們想要根據checkbox的狀態隱藏/顯示某一個元素。用jQuery，咱們會這麼作：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<div>     <input id= "toggleShowHide" type= "checkbox" ><div id=」specialParagraph」>     This content will disappear and reappear if you click the checkbox above </div> <script>     $( function () {          function toggle() {             var isChecked = $( '#toggleShowHide' ).is( ':checked' );             var specialParagraph = $( '#specialParagraph' );             if (isChecked) {                 specialParagraph.show();             } else {                 specialParagraph.hide();             }         }         $( '#toggleShowHide' ).change( function () {             toggle();         });         toggle();     }); </script>

注意！以上的JS代碼是用一種命令的方式操做DOM：拿到某一個節點和某一個屬性，查看它的值，而後作這作那。如今來看看Angular是怎麼作相同的事情的：

1 2 3 4

< input ng-model = "showSpecial" type = "checkbox" > < div ng-show=」showSpecial」>     This content will disappear and reappear if you click the checkbox above </ div >

就是上面那段，根本沒有什麼代碼，只是一個很是清楚的聲明綁定和規則的方式。這裏有個線上版本，你能夠來試試.

DOM的直接操做不只是沒必要要的，它在Angular中是不被提倡的。DOM由視圖管理，data在scope中，方法在控制器裏，任何non-trivial的變換在你重寫的過濾器和指令裏。這樣的分離在一開始看上去是要花大量精力去消化，可是當項目變大的時候，它的回報是很可觀的：代碼容易維護，容易被放入模塊中，方便測試和查錯。

依賴注入

原諒我這麼說聽起來有點執拗了，可是Angular擁有全世界最優雅的處理數據依賴的方式。你有一個JSON的數據源被放在$resource在Angular中：

1	DataSource = $resource(url, default_params, method_details)

若是要知道更多細節請看文檔。任何須要這個JSON數據的控制器，能夠經過將DataSource做爲一個控制器參數傳入的方式來使用它。這就是你須要作的所有事情。若是你須要在控制器中寫一個異步的HTTP請求。將$http做爲一個控制器參數。若是你須要在console中打印什麼，將$log做爲你的控制器方法的參數。

在Angular內部的流程是這樣的：Angular分析你的代碼，找到這些參數，而後將你的代碼中所須要的服務推送給你。

數據獲取

當Angular給了你控制模型層的所有自由之後（你能夠隨意結合普通數據變量，對象，和數組的時候）。它提供了一個便捷的方式與服務器的REST API交互。舉個例子，下面這個方式是用來定義和使用一些來檢索和保存用戶記錄的調用的。

1 2 3 4 5

var User = $resource( '/user/:userId' , {userId: '@id' }); var user = User.get({userId:123}, function () {     user.abc = true ;     user.$save(); });

Angular給獲取，設置，刪除和查詢數據都預約義了合理的默認值設置，用參數表示的URL讓你能夠根據需求來制定數據獲取的方式。

Angular還有不少值得一提但這篇文章尚未說的東西，好比表單驗證，單元測試還有angular-ui庫，也許在之後的文章裏我會說一說的。