为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕容森 2019-09-18 19:33:55
我正在阅读这篇文章:http://eviltrout.com/2013/06/15/ember-vs-angular.html它说,由于缺乏约定,我想知道有多少Angular项目依赖于不良实践,例如直接在控制器中调用AJAX?由于依赖注入,开发人员是否将路由器参数注入指令?新手AngularJS开发人员是否会以经验丰富的AngularJS开发人员认为惯用的方式构建他们的代码?我实际上是$http从Angular.js控制器调用的。为什么这是一个不好的做法?那么$http拨打电话的最佳做法是什么?为什么?
查看完整描述

3 回答

?
12345678_0001

TA贡献1802条经验 获得超5个赞

编辑:这个答案主要集中在版本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();

});


查看完整回答
反对 回复 2019-09-18
?
慕妹3242003

TA贡献1824条经验 获得超6个赞

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


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


查看完整回答
反对 回复 2019-09-18
?
慕妹3146593

TA贡献1820条经验 获得超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) {


查看完整回答
反对 回复 2019-09-18
  • 3 回答
  • 0 关注
  • 469 浏览

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信