javascript
七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX
這是＂AngularJS?-?七步從菜鳥到專家＂系列的第三篇。
在第一篇，我們展示了如何開始搭建一個AngularaJS應用。第二篇我們討論了scope和?$scope?的功能。
通過這整個系列的教程，我們會開發一個NPR（美國全國公共廣播電臺）廣播的音頻播放器，它能顯示Morning?Edition節目里現在播出的最新故事，并在我們的瀏覽器里播放。完成版的Demo可以看這里。
第三部分?數據綁定
通過把一個文本輸入框綁定到person.name屬性上，就能把我們的應用變得更有趣一點。這一步建立起了文本輸入框跟頁面的雙向綁定。
在這個語境里“雙向”意味著如果view改變了屬性值，model就會“看到”這個改變，而如果model改變了屬性值，view也同樣會“看到”這個改變。Angular.js?為你自動搭建好了這個機制。如果你好奇這具體是怎么實現的，請看我們之后推出的一篇文章，其中深入討論了digest_loop?的運作。
要建立這個綁定，我們在文本輸入框上使用ng-model?指令屬性，像這樣：
現在我們建立好了一個數據綁定（沒錯，就這么容易），來看看view怎么改變model吧：
試試看：
當你在文本框里輸入時，下面的名字也自動隨之改變，這就展現了我們數據綁定的一個方向：從view到model。我們也可以在我們的（客戶端）后臺改變model，看這個改變自動在前端體現出來。要展示這一過程，讓我們在??MyController?的model里寫一個計時器函數，?更新?$scope?上的一個數據。下面的代碼里，我們就來創建這個計時器函數，它會在每秒計時（像鐘表那樣），并更新?$scope?上的clock變量數據：
可以看到，當我們改變modelclock變量的數據，view會自動更新來反映此變化。用大括號我們就可以很簡單地讓clock變量的值顯示在view里：
請看:
{{ clock }}
互動
前面我們把數據綁定在了文本輸入框上。請注意，?數據綁定并非只限于數據，我們還可以利用綁定調用?$scope?中的函數（這一點之前已經提到過）。
對按鈕、鏈接或任何其他的DOM元素，我們都可以用另一個指令屬性來實現綁定：ng-click?。這個?ng-click?指令將DOM元素的鼠標點擊事件（即?mousedown?瀏覽器事件）綁定到一個方法上，當瀏覽器在該DOM元素上鼠標觸發點擊事件時，此被綁定的方法就被調用。跟上一個例子相似，這個綁定的代碼如下：
不論是按鈕還是鏈接都會被綁定到包含它們的DOM元素的controller所有的?$scope?對象上，當它們被鼠標點擊，Angular就會調用相應的方法。注意當我們告訴Angular要調用什么方法時，我們將方法名寫進帶引號的字符串里。
?請看：
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?服務是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，我們馬上就會用到它?，F在我們要設置我們的PlayController?來調用?$http?服務，取回音頻文件。
像我們剛才做的那樣，讓我們調用?$http?服務來創建一個請求，這一次是為了取得所有音頻文件。我們想讓這個服務在controller實例化時啟動，所以我們只需要把這個方法直接放在controller函數里（這個函數在controller被創建時就會被調用），像這樣：
現在我們在success函數的data里有了一個音頻文件的列表。在success回調函數里，把這個列表存儲在?$scope?對象，這樣我們就簡單地把它綁定在了?$scope?對象上：
現在，跟剛才一樣，?只需在view里訪問programs，我們就能在view里訪問這個data。你看，使用Angular.js的一個好處就是，當承諾模式返回成功結果時，Angular.js就會自動把這個結果填進你的view里。
試試看:
在下一章里，我們會討論怎么在我們的view里有意義地展示這個data對象，使用一些Angular.js自帶的指令（和更多的一點什么）。
本系列的官方代碼庫可從github上下載：
https://github.com/auser/ng-newsletter-beginner-series.
要將這個代碼庫保存到本地，請先確保安裝了git，clone此代碼庫，然后check?out其中的part3分支：
總結
以上是生活随笔為你收集整理的七步从Angular.JS菜鸟到专家（3）：数据绑定和AJAX的全部內容，希望文章能夠幫你解決所遇到的問題。
