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

Question

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

它说，

由于缺乏约定，我想知道有多少Angular项目依赖于不良实践，例如直接在控制器中调用AJAX？由于依赖注入，开发人员是否将路由器参数注入指令？新手AngularJS开发人员是否会以经验丰富的AngularJS开发人员认为惯用的方式构建他们的代码？

我实际上是$http从Angular.js控制器调用的。为什么这是一个不好的做法？那么$http拨打电话的最佳做法是什么？为什么？

Answer 1

编辑：这个答案主要集中在版本1.0.X. 为了防止混淆，它将被更改以反映截至2013-12-05的所有当前Angular版本的最佳答案。我们的想法是创建一个服务，该服务返回对返回数据的承诺，然后在您的控制器中调用它并处理那里的承诺以填充您的$ 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();});

Answer 2

最佳做法是将$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像这样抽象调用将允许您跨多个控制器重用此代码。当与此数据交互的代码变得更加复杂时，这可能是必要的，您可能希望在控制器中使用数据之前处理数据，并缓存该进程的结果，这样您就不必花时间重新处理它。您应该将“服务”视为应用程序可以使用的数据的表示（或模型）。

Answer 3

接受的答案是给我$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) {