直到現在，你或許已經聽說過AngularJS了，一個改變你對web應用思考方式，由谷歌開發的令人興奮的開源框架。關於它的文章已經寫得非常之多，但我發現還是要寫些給那些更喜歡快速且實際例子的開發者。當今對web編程已經發生了改變。下面通過對5個實例的解釋，你可以找到Angular應用的基本構建塊，包括模型，視圖，控制器，服務和過濾器，你可以在自己的瀏覽器中直接編輯。如果你更傾向於在你喜歡的代碼編輯器中打開，那么請下載zip包。
什么是AngularJS？
在高層次理解之上，AngularJS是一個把HTML(視圖)綁定到JavaScript對象(模型)上的框架。當模型改變時，頁面也能自動隨之更新，反之亦然。當某個域的內容發生變化時，與之關聯的模型也能更新。正因為Angular處理了所有的中間代碼，所以你不用像jQuery那樣，手動更新HTML或者事件監聽。事實上，這里沒有任何一個例子使用到了jQuery！
如果要使用AnguarJS，你就得在<body>標簽結束之前把它包含到你的頁面里。這里推薦使用谷歌CDN，相比來說，它有比較快速的加載時間：
|
1
2
3
|
<script
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"><
/script>
|
AngularJS通過大量的指令讓你能夠在模型和HTML元素間做關聯。它們就是以ng-開頭的屬性，並且能添加到任何元素上。如果你想使用Angular，你不得不為每個頁面包含一個最重要的屬性，即ng-app:
|
1
|
<body ng-app>
|
這個元素應該被添加到能夠包含剩余頁面的元素上，諸如body或者外圍的div元素之類。當頁面加載時，Angular會尋找這個屬性，並且會自動評估在子元素上看到的所有指令。
理論部分就到此為止了！現在讓我們看看代碼。
1.導航菜單
作為第一個例子，我們要構建一個會高亮選中條目的導航菜單。這個例子僅僅使用了Angular指令，同時可能也是使用這個框架最簡單的應用。查看源代碼請單擊”編輯”按鈕。開始准備實驗了！
從以上的代碼得知，我們使用到了Angular指令來設置以及讀取active變量。當它改變時，它會引起使用到它的HTML自動更新。在Angular的術語中，這樣的變量叫做模型。當前域中的所有指令都能使用它，並且在你的控制器(更多請看下面的例子)中也能獲取得到。
如果你之前使用過JavaScript模板，你對{{var}}語法應該會很熟悉。當框架看到這樣的字符串時，它會用變量的內容來代替。這種操作在變量改變時會重復一次。
2.內聯編輯器
對第二個例子，我們會創建一個簡單的內聯編輯器-單擊段落時會顯示文本提示框。我們會使用到一種控制器，能夠初始化模型，以及聲明兩個函數用來切換提示的可見性。控制器是常規的JavaScript函數，能自動被Angular執行。使用中，用ng-controller指令關聯相關的頁面。
當控制器函數執行時，它能得到特殊的$scope對象作為其一個參數。在這個對象上增加屬性或者函數，同樣對視圖可用。使用ng-model綁定在文本域上告訴Angular當域值改變時，要更新相關內容(這樣反過來就能重新渲染段落上的值)。
3.訂單表單
在這個例子里，我們使用另一個Angular中非常有用的特性-過濾器，來編寫一個能實時更新總價的訂單表單。過濾器能通過管道符”|”級聯起來修改模型。在下面的例子中，我使用了貨幣過濾器，把數字轉換為正確格式化的價格，包括美元符號以及分。你也可以和即將看到的第四個例子一樣，很容易地創造自己的過濾器。
ng-repeat綁定(文檔)是框架的另一個有用的特性，能夠讓你遍歷數組元素並且生成相應的標記。當某個條目改變或者刪除時，它能夠智能地更新。
注釋：要得到更完整的版本，請查閱此教程，基於這個版本用Backbone.js實現。
4.即時搜索
這個例子允許用戶通過在文本域輸入來過濾條目集。這是Angular另一個出眾的地方，也是編寫自定義的過濾器最合適的地方。既然要這樣做，首先我們就不得不把我們的應用轉換成一個模塊。
模塊是把JavaScript應用組織成通過新穎而又有趣的方式進行綁定形成獨立組件的一種方式。Angular通過這種技術達到了代碼分離，並且要求你創建過濾器時遵循這種方式。在把你的應用轉變成模塊中，你僅僅需要做兩件事：
1.在你的JS中使用angular.module(“name”,[])函數調用。這樣就會進行初始化並且返回一個新的模塊；
2.通過ng-app指令值傳遞模塊的名稱。
然后創建過濾器僅僅是簡單地調用由angular.module(“name”,[])返回的模塊對象上的filter()方法。
過濾器同樣遵循Angular.js的哲學理念–每一份你寫的代碼應該是獨立的，可測試的以及可重用的。你可以在所有視圖中使用這個過濾器，甚至通過級聯和其它組件連接起來。
5.切換網格
另一個經常用到的交互UI是通過單擊按鈕來切換不同的布局模式(網格或者列表)。這用Angular來做非常容易。另外，我會介紹一下另一個重要的概念–服務。它們是一種對象，能夠用來讓你的應用和服務器進行交互，比如：API，或者其它數據源。這個例子里，我們會編寫一個與InstagramAPI交互的服務，用它來返回以數組形式當前最流行的圖片。
請注意，要運行此代碼，我們要在頁面中包含額外的一個Angular.js：
|
1
2
3
|
<script
src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular-resource.min.js"><
/script>
|
這其中包含了ngResource模塊，能非常容易與AJAXAPI一起工作(此模塊在代碼中用$resource變量公開)。下面的編輯器里已經自動包含了這個文件。
服務是完全獨立的，因此編寫不同的實現可以不影響其它的代碼。比如在測試時，你可能更喜歡返回一個硬編碼的圖片數組來加快測試過程。
延伸閱讀
如果你已經按照上面例子做了的話，你已經理解了Angular開發的基本要點了。但是，如果要成為專業人才的話，需要更多地去學習。以下列出一些資源，能在你探索過程中帶來幫助：