使用HTML模板：如果你曾經(jīng)使用過Mustache ， Hogan.js，或者handlerbars的話，你就可以快速的理解AngularJS的模板引擎語法，應(yīng)為它是純HTML的。AngularJS通過DOM瀏覽來完成此類功能，使用上面提到的directives。模板被作為DOM元素傳遞到Angular的編譯器中，可以被擴展，執(zhí)行或者重用。這很關(guān)鍵，這樣一來你就擁有了DOM組件，而非字符串，允許你直接的操作擴展DOM樹。

企業(yè)級別的測試：AnguarJS并不依賴于第三方的插件或者是框架，包括測試。如果你熟悉QUnit, Mocha 或者 Jasmine的話，那么對于理解Angular的單元測試和Scenario Runner來說就非常簡單。

以上的這些基本的原則能夠幫助知道你使用Angular來創(chuàng)建高效性能可維護的代碼。只要你有代碼保存數(shù)據(jù)，AnguarJS會幫助你處理所有的重量級內(nèi)容，提供一個富客戶端的超棒體驗！

原因三：花幾分鐘就可以開始開發(fā)

學習Angular非常簡單。添加幾個屬性到你的HTML中，你可以使用5分鐘搭建一個應(yīng)用！

添加ng-app directive到標簽，這樣Angular知道應(yīng)該運行：

添加Angular 

添加正常的HTML標簽。AngularJS directive可以在HTML屬性中被訪問，而表單式將使用兩個大括號來標示：

 
 
 

  
  
  
 
  
  
  
  
Today's activities
 
  
  
  
  
 
  
  
  
    
  
  
  
     {{activity.name}} 
  
  
  
   
 
  
  
  
  
 
  
  
  
 
  
  
  
 
 
 
 

ng-controller directive設(shè)置了一個名字空間，這里我們可以添加angular的相關(guān)javascript來處理數(shù)據(jù)和表達式。ng-repeat是一個angular的重復對象，可以用來創(chuàng)建一系列的對象元素。

當你想從Anguar中獲取數(shù)據(jù)，你使用一個對應(yīng)名字的controller方法，如下：

 
 
 

  
  
  
function ActivitiesListCtrl($scope) { 
  
  
  
  $scope.activities = [ 
  
  
  
    { "name": "Wake up" }, 
  
  
  
    { "name": "Brush teeth" }, 
  
  
  
    { "name": "Shower" }, 
  
  
  
    { "name": "Have breakfast" }, 
  
  
  
    { "name": "Go to work" }, 
  
  
  
    { "name": "Write a Nettuts article" }, 
  
  
  
    { "name": "Go to the gym" }, 
  
  
  
    { "name": "Meet friends" }, 
  
  
  
    { "name": "Go to bed" } 
  
  
  
  ]; 
  
  
  
 } 
 
 
 

這里我們創(chuàng)建了一個方法，名字和前面的ng-controller directive一樣，這樣我們頁面可以找到對應(yīng)的Angular方法來執(zhí)行。我們傳遞了$(scope)對象來訪問模板中的activities列表。提供了activities對應(yīng)的name，我們在頁面中使用"{{expression}}"表達式展現(xiàn)出來。

或者你保存數(shù)據(jù)在服務(wù)器上，我們同樣可以使用AJAX獲取數(shù)據(jù)：

 
 
 

  
  
  
function ActivitiesListCtrl($scope) { 
  
  
  
  $http.get('activities/list.json').success(function (data) { 
  
  
  
    $scope.activities = data; 
  
  
  
  } 
  
  
  
} 
 
 
 

這里我們簡單的使用指定的HTTP GET方法替換了本地的javascript數(shù)據(jù)。傳遞了文件名字來獲取相關(guān)數(shù)據(jù)。這和jQuery的方式非常類似。

以上我們使用success方法確保數(shù)據(jù)返回，并且將數(shù)據(jù)綁定到了$scope上。

靜態(tài)的列表顯示的很好，但是這里我們希望能夠根據(jù)用戶選擇自動排序。這里我們添加一個簡單的下拉菜單：

 
 
 

  
  
  
Sort:
 
  
  
  
 
  
  
  
   Alphabetically 
  
  
  
  
 
 
 

添加directive:

最后，我們修改