在Angular.js中进行AJAX调用的最佳做法是什么?

我正在阅读这篇文章: http : //eviltrout.com/2013/06/15/ember-vs-angular.html

它说,

由于缺乏约定,我不知道有多lessAngular项目直接在控制器内部依赖不良实践,如AJAX调用? 由于dependency injection,开发人员注入路由器参数到指令? 新手AngularJS开发人员是否将以一种经验丰富的AngularJS开发人员认为是惯用的方式来构build自己的代码?

我实际上是从我的Angular.js控制器进行$http调用。 为什么这是一个不好的做法? 那么做出$http调用的最佳做法是什么? 为什么?

编辑:这个答案主要集中在版本1.0.X. 为了避免混淆,2013年12月5日至今,所有当前版本的Angular都被改为反映最佳答案。

这个想法是创build一个服务,返回一个承诺返回的数据,然后调用你的控制器,并处理承诺那里填充你的$ scope属性。

服务

 module.factory('myService', function($http) { return { getFoos: function() { //return the promise directly. return $http.get('/foos') .then(function(result) { //resolve the promise as the data return result.data; }); } } }); 

控制器:

处理promise的then()方法并从中获取数据。 设置$ scope属性,并做任何你可能需要做的事情。

 module.controller('MyCtrl', function($scope, myService) { myService.getFoos().then(function(foos) { $scope.foos = foos; }); }); 

In-View Promise Resolution(仅限于1.0.X):

在Angular 1.0.X中,原始答案的目标在这里,承诺将得到View的特殊处理。 当他们解决的时候,他们解决的价值将被束缚在视野中。 这已经在1.2.X中被弃用了

 module.controller('MyCtrl', function($scope, myService) { // now you can just call it and stick it in a $scope property. // it will update the view when it resolves. $scope.foos = myService.getFoos(); }); 

最好的做法是将$http调用抽象成一个向服务器提供数据的“服务”:

 module.factory('WidgetData', function($http){ return { get : function(params){ return $http.get('url/to/widget/data', { params : params }); } } }); module.controller('WidgetController', function(WidgetData){ WidgetData.get({ id : '0' }).then(function(response){ //Do what you will with the data. }) }); 

像这样抽象$http调用将允许您跨多个控制器重复使用该代码。 当与这些数据交互的代码变得越来越复杂,或许你希望在你的控制器中使用它之前处理这些数据,并caching这个过程的结果,这样你就不必花费时间重新处理它。

您应该将“服务”视为应用程序可以使用的数据表示(或模型)。

接受的答案是给我的$http is not defined错误,所以我不得不这样做:

 var policyService = angular.module("PolicyService", []); policyService.service('PolicyService', ['$http', function ($http) { return { foo: "bar", bar: function (params) { return $http.get('../Home/Policy_Read', { params: params }); } }; }]); 

主要区别在于这一行:

 policyService.service('PolicyService', ['$http', function ($http) { 

我在Angular中为那些想要一个完全通用的Web服务的人提供了一个答案。 我build议只是插入它,它会照顾所有的Web服务调用,而不需要自己编码。 答案在这里:

https://stackoverflow.com/a/38958644/5349719