Angular.JS从新手到专家七步（三）：数据绑定与AJAX

时间：2023-03-11 22:15:08 科技观察

这是《AngularJS-从新手到专家七步》系列文章的第三篇。在第一篇文章中，我们展示了如何开始构建AngularaJS应用程序。在第二篇文章中，我们讨论了scope和$scope的作用。通过这整个系列教程，我们将为NPR（国家公共广播电台）广播开发一个音频播放器，它可以显示早间版节目中当前播出的最新故事，并在我们的浏览器中播放。可以在此处查看演示的完整版本。第三部分，数据绑定，可以通过将文本输入字段绑定到person.name属性来使我们的应用程序更有趣。这一步在文本输入框和页面之间建立了双向绑定。“双向”在此上下文中意味着如果视图更改属性值，模型“看到”更改，如果模型更改属性值，视图也“看到”更改。Angular.js会自动为您构建此机制。如果您好奇这是如何工作的，请参阅我们即将发布的深入讨论digest_loop的文章。要建立此绑定，我们在文本输入字段上使用ng-model指令属性，如下所示：

Hello{{person.name}}

现在我们已经建立了数据绑定（是的，就这么简单），让我们看看视图如何改变模型：试试看：当你在文本框中键入时，下面的名称会自动相应地改变，这表明了我们数据绑定的一个方向：从视图到模型。我们还可以在我们的（客户端）后台更改模型，并观察此更改自动反映在前端。为了演示这个过程，让我们在MyController的模型中编写一个定时器函数来更新$scope上的数据。在下面的代码中，我们将创建这个计时器函数，它会每秒计数（就像时钟一样），并更新$scope上的时钟变量数据：app.controller('MyController',function($scope){$scope.person={name:"AriLerner"};varupdateClock=function(){$scope.clock=newDate();};vartimer=setInterval(function(){$scope.$apply(updateClock);},1000);updateClock();});您可以看到，当我们更改modelclock变量的数据时，视图会自动更新以反映此更改。有了大括号，我们可以很方便的在视图中显示时钟变量的值：

请看：{{clock}}交互前面我们将数据绑定到文本输入框。请注意，数据绑定不仅限于数据，我们还可以使用绑定来调用$scope中的函数（这个在前面已经提到过）。对于按钮、链接或任何其他DOM元素，我们可以使用另一个指令属性来实现绑定：ng-click。这个ng-click指令将DOM元素的鼠标点击事件（即mousedown浏览器事件）绑定到一个方法上，当浏览器在DOM元素上触发鼠标点击事件时，绑定的方法就会被调用。和前面的例子类似，绑定代码如下：button>Subtract

Currentcount:{{counter}}

按钮和链接都会被绑定Assigned对于包含其DOM元素的控制器的所有$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交互在前面的例子中，我们在视图的一个按钮上进行了刚刚学习的数据绑定，给播放按钮绑定了PlayerController的播放方法（同样，停止按钮也绑定了停止方法）。AJAX在上一个教程中，我们引用了本地存储的音频文件，它为我们提供了静态NPR文件而不是动态NPR提要。在我们的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){//datacontainstheresponse//statusistheHTTPstatus//headersistheheadergetterfunction//configistheobjectthatwasusedtocreatetheHTTPrequest}).error(function(data,status,headers,config){});#p#试试看：$http服务是Angular.js的核心服务之一，它帮助我们通过XMLHttpRequest对象或JSONP与远程HTTP服务进行通信。请注意，Angular.js将通过添加以下字符串callback=JSON_CALLBACK为您处理JSONP请求，如上例所示，将JSON_CALLBACK替换为适当的回调函数。$http服务就是这样一个功能：它接受一个设置对象，指定如何创建一个HTTP请求；它返回一个promise（*参考JavaScript异步编程的promise模式），promise提供了两个方法：success方法和error方法。要获得可播放音频文件的列表，让我们向NPR的API发出请求。首先，您需要在NPR注册以获得API密钥。访问他们的网站http://www.npr.org/templates/reg/。（笔者这里使用Angular.js做了一个加载了iFrame的NPR注册表，见下图，或者直接去英文原文查看）。记下您的APIkey，我们稍后会用到它。现在我们要设置我们的PlayController来调用$http服务并取回音频文件。就像我们之前所做的那样，让我们??调用$http服务来发出请求，这次是为了获取所有音频文件。我们希望这个服务在controller实例化的时候启动，所以我们只需要将这个方法直接放在controller函数中（这个函数会在创建controller的时候调用），像这样：varapiKey='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){//Hiddenourprevioussection'scontent//constructourhttprequest$http({method:'JSONP',url:nprUrl+'&apiKey='+apiKey+'&callback=JSON_CALLBACK'}).success(function(data,status){//Nowwehavealistofthestories(data.list.story)//inthedataobjectthattheNPRAPI//returnsinJSONthatlike://data:{"list":{//"title":...//"story":[//{"id":...//"title":...}).error(function(data,status){//Someerroroccurred});});现在我们在success函数的数据中有一个音频文件列表。在成功回调函数中，将此列表存储在$scope对象中，因此我们只需将其绑定到$scope对象即可：//fromabove}).success(function(data,status){//Storethelistofstoriesonthescope//fromtheNPRAPIresponseobject(describedabove)$scope.programs=data.list.story;}).error(function(data,status){//Someerroroccurred现在和之前一样，只是在视图中访问程序，我们可以在视图中访问这个数据。你看，一个使用Angular.js的一个好处是，当promise模式返回一个成功的结果时，Angular.js会自动将结果填充到你的视图中。{{programs}}