153

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

它说，

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

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

4

4 回答 4

175

编辑：这个答案主要关注版本 1.0.X。为了防止混淆，它已被更改以反映截至今天 2013 年 12 月 5 日所有当前版本的 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 中，这里原始答案的目标，承诺将得到视图的特殊处理。当它们解析时，它们的解析值将绑定到视图。这已在 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();
});
于 2013-07-15T04:28:58.360 回答
45

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

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

于 2013-07-15T03:37:19.523 回答
9

接受的答案给了我$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) {
于 2014-08-20T19:16:28.567 回答
1

我为想要在 Angular 中提供完全通用的 Web 服务的人提供了一个答案。我建议只插入它，它会处理您所有的 Web 服务调用，而无需自己编写所有代码。答案在这里：

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

于 2016-08-15T16:07:16.863 回答