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

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

它说,

由于它缺乏惯例,我不知道有多少角度项目 依赖于控制器内部直接调用 AJAX 等不良实践? 由于依赖注入,开发者正在注入路由器 新手 AngularJS 开发人员是否要将 以一个经验丰富的 AngularJS 开发人员的方式来构造他们的代码 相信是成语吗?

我实际上正在使用 Angular.js 控制器进行 $http调用。为什么这是个坏习惯?那么打 $http电话的最佳实践是什么呢?为什么?

88975 次浏览

最好的做法是将 $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调用将允许您跨多个控制器重用此代码。当与数据交互的代码变得更加复杂时,这就变得必要了,也许您希望在控制器中使用数据之前先处理数据,然后缓存这个过程的结果,这样您就不必花时间重新处理它。

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

编辑: 这个答案主要集中在1.0.X 版本上。为了避免混淆,它正在改变,以反映所有当前版本的 Angular 的最佳答案今天,2013-12-05。

其思想是创建一个返回返回数据的承诺的服务,然后在控制器中调用它,并处理填充 $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;
});
}
}
});

总监:

处理承诺的 then()方法并从中获取数据。设置 $scope 属性,并执行可能需要执行的其他操作。

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

承诺决议(仅限1.0.X) :

在角1.0.X,原来的答案在这里的目标,承诺将得到特殊待遇的看法。解析时,它们的解析值将绑定到视图。这在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 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 服务调用,而不需要自己编写代码。答案就在这里:

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