直到現在，你或許已經聽說過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開發的基本要點了。但是，如果要成為專業人才的話，需要更多地去學習。以下列出一些資源，能在你探索過程中帶來幫助：