七步從Angular.JS菜鳥到專家（3）：數據綁定和AJAX

這是＂AngularJS - 七步從菜鳥到專家＂系列的第三篇。

在第一篇，咱們展現瞭如何開始搭建一個AngularaJS應用。第二篇咱們討論了scope和 $scope 的功能。

經過這整個系列的教程，咱們會開發一個NPR（美國全國公共廣播電臺）廣播的音頻播放器，它能顯示Morning Edition節目裏如今播出的最新故事，並在咱們的瀏覽器裏播放。完成版的Demo能夠看這裏。

第三部分 數據綁定

經過把一個文本輸入框綁定到person.name屬性上，就能把咱們的應用變得更有趣一點。這一步創建起了文本輸入框跟頁面的雙向綁定。

在這個語境裏「雙向」意味着若是view改變了屬性值，model就會「看到」這個改變，而若是model改變了屬性值，view也一樣會「看到」這個改變。Angular.js 爲你自動搭建好了這個機制。若是你好奇這具體是怎麼實現的，請看咱們以後推出的一篇文章，其中深刻討論了digest_loop 的運做。

要創建這個綁定，咱們在文本輸入框上使用ng-model 指令屬性，像這樣：

<div ng-controller="MyController">
  <input type="text" ng-model="person.name" placeholder="Enter your name" />
  <h5>Hello {{ person.name }}</h5>
</div>

如今咱們創建好了一個數據綁定（沒錯，就這麼容易），來看看view怎麼改變model吧：

試試看：

當你在文本框裏輸入時，下面的名字也自動隨之改變，這就展示了咱們數據綁定的一個方向：從view到model。咱們也能夠在咱們的（客戶端）後臺改變model，看這個改變自動在前端體現出來。要展現這一過程，讓咱們在  MyController 的model裏寫一個計時器函數， 更新 $scope 上的一個數據。下面的代碼裏，咱們就來建立這個計時器函數，它會在每秒計時（像鐘錶那樣），並更新 $scope 上的clock變量數據：

app.controller('MyController', function($scope) {  $scope.person = { name: "Ari Lerner" };  var updateClock = function() {    $scope.clock = new Date();  };  var timer = setInterval(function() {    $scope.$apply(updateClock);  }, 1000);  updateClock();});

能夠看到，當咱們改變modelclock變量的數據，view會自動更新來反映此變化。用大括號咱們就能夠很簡單地讓clock變量的值顯示在view裏：

<div ng-controller="MyController">
  <h5>{{ clock }}</h5>
</div>

請看:

{{ clock }}

互動

前面咱們把數據綁定在了文本輸入框上。請注意， 數據綁定並不是只限於數據，咱們還能夠利用綁定調用 $scope 中的函數（這一點以前已經提到過）。

對按鈕、連接或任何其餘的DOM元素，咱們均可以用另外一個指令屬性來實現綁定：ng-click 。這個 ng-click 指令將DOM元素的鼠標點擊事件（即 mousedown 瀏覽器事件）綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，此被綁定的方法就被調用。跟上一個例子類似，這個綁定的代碼以下：

<div ng-controller="DemoController">
  <h4>The simplest adding machine ever</h4>
  <button ng-click="add(1)" class="button">Add</button>
  <button ng-click="subtract(1)" class="button">Subtract</button>
  <h4>Current count: {{ counter }}</h4>
</div>

不管是按鈕仍是連接都會被綁定到包含它們的DOM元素的controller全部的 $scope 對象上，當它們被鼠標點擊，Angular就會調用相應的方法。注意當咱們告訴Angular要調用什麼方法時，咱們將方法名寫進帶引號的字符串裏。

app.controller('DemoController', function($scope) {
  $scope.counter = 0;
  $scope.add = function(amount) { $scope.counter += amount; };
  $scope.subtract = function(amount) { $scope.counter -= amount; };
});

 請看：

myApp中的數據綁定和AJAX

互動

在上一篇的例子中，咱們對view的一個按鈕進行了剛纔學到的數據綁定，給play按鈕綁定了 PlayerController 的play方法（一樣的，還給stop按鈕綁定了stop方法）。

AJAX

在上一篇教程裏，咱們引用的是一個存儲在本地的音頻文件，它給咱們的是一個靜態的NPR文件，而不是一個動態的NPR feed。在咱們的NPR應用裏，咱們將用$http 來填充咱們可播放的新聞文件的列表。Angular.js原生支持AJAX，由此咱們就得到了與一個或多個服務器來回發送請求的能力。這個能力對咱們要建立的這種客戶端應用來講是相當重要的，由於這種應用須要跟服務器交流，獲取和更新數據。Angular.js經過一個服務來支持AJAX（在以後的章節咱們會討論這個服務），這個服務就叫作 $http 服務。全部Angular.js的核心服務都用 $ 前綴，這點在以前的 $scope  服務裏咱們已經見過了。這個 $http 服務極其靈活，給了咱們不少種方式來調用AJAX服務。爲保證本教程簡單易懂，咱們專一於最簡單的方式。在之後更高級的章節裏咱們會深刻介紹 $http 服務。在深刻過多細節以前，讓咱們先來用 $http 服務建立一個請求：

$http({  method: 'JSONP',  url: 'http://api.openbeerdatabase.com/v1/beers.json?callback=JSON_CALLBACK'}).success(function(data, status, headers, config) {  // data contains the response  // status is the HTTP status  // headers is the header getter function  // config is the object that was used to create the HTTP request}).error(function(data, status, headers, config) {});

 

試試看:

$http 服務是Angular.js的核心服務之一，它幫助咱們經過XMLHttpRequest對象或JSONP與遠程HTTP服務進行交流。

注意， 像上面例子中那樣，原封不動加上如下字符串 callback=JSON_CALLBACK ，Angular.js就會負責爲你處理JSONP請求，將 JSON_CALLBACK 替換成一個合適的回調函數。

$http 服務是這樣一個函數：它接受一個設置對象，其中指定了如何建立HTTP請求；它將返回一個承諾（*參考JavaScript異步編程的promise模式），其中提供兩個方法： success方法和error方法。

要取得可播放的音頻文件列表，讓咱們向NPR的API發送一個請求。首先，你須要倒NPR註冊以取得一個API key。到它們的網站 http://www.npr.org/templates/reg/ 去。（做者在這裏用Angular.js作了一個用iFrame加載的NPR註冊表單，見下圖，或者直接前往英文原文查看）。

記下你的API key，咱們立刻就會用到它。如今咱們要設置咱們的PlayController 來調用 $http 服務，取回音頻文件。

像咱們剛纔作的那樣，讓咱們調用 $http 服務來建立一個請求，這一次是爲了取得全部音頻文件。咱們想讓這個服務在controller實例化時啓動，因此咱們只須要把這個方法直接放在controller函數裏（這個函數在controller被建立時就會被調用），像這樣：

var apiKey = 'YOUR_KEY',
    nprUrl = 'http://api.npr.org/query?id=61&fields=relatedLink,title,byline,text,audio,image,pullQuote,all&output=JSON';

app.controller('PlayerController', function($scope, $http) {
  // Hidden our previous section's content
  // construct our http request
  $http({
    method: 'JSONP',
    url: nprUrl + '&apiKey=' + apiKey + '&callback=JSON_CALLBACK'
  }).success(function(data, status) {
    // Now we have a list of the stories (data.list.story)
    // in the data object that the NPR API
    // returns in JSON that looks like:
    // data: { "list": {
    //   "title": ...
    //   "story": [
    //     { "id": ...
    //       "title": ...
  }).error(function(data, status) {
    // Some error occurred
  });
});

如今咱們在success函數的data裏有了一個音頻文件的列表。在success回調函數裏，把這個列表存儲在 $scope 對象，這樣咱們就簡單地把它綁定在了 $scope 對象上：

// from above
}).success(function(data, status) {
  // Store the list of stories on the scope
  // from the NPR API response object (described above)
  $scope.programs = data.list.story;
}).error(function(data, status) {
  // Some error occurred

如今，跟剛纔同樣， 只需在view裏訪問programs，咱們就能在view裏訪問這個data。你看，使用Angular.js的一個好處就是，當承諾模式返回成功結果時，Angular.js就會自動把這個結果填進你的view裏。

<div ng-controller="PlayerController">
{{ programs }}
</div>

試試看:

 

在下一章裏，咱們會討論怎麼在咱們的view裏有意義地展現這個data對象，使用一些Angular.js自帶的指令（和更多的一點什麼）。

本系列的官方代碼庫可從github上下載：

https://github.com/auser/ng-newsletter-beginner-series.

要將這個代碼庫保存到本地，請先確保安裝了git，clone此代碼庫，而後check out其中的part3分支：

git clone https://github.com/auser/ng-newsletter-beginner-series.git
git checkout -b part3

原文連接：http://www.ng-newsletter.com/posts/beginner2expert-data-binding.html

譯文連接：http://blog.jobbole.com/48780/