Angular.js中Ajax单一方法的体系结构

debugcn 发表于 Dev

嗜好者

我想了解如何为多个控制器设计单个ajax方法，这也会影响用户界面（例如“加载”动画）。

想法是（没有承诺）：

var myApp = angular.module('myApp', []);

myApp.controller('myCtrl',
    function myCtrl($scope, myFactory){
        $scope.loading = false;
        $scope.someStuff = myFactory.getStuff(params);
});

myApp.factory('myFactory', function(myService){
    return{
        getStuff: function(params){
            return myService.ajax(params);
        }
    }
});

myApp.service('myService', function($http) {
    this.ajax = function(params){
        // switch $scope.loading = true; 
        // make request
        // return $http result
        // switch $scope.loading = false; 
    };
});

据我所知，我需要使用$ scope进行UI更改，应将ajax方法带到自定义服务中。Angularjs中的服务无法与$ scope一起使用，我也不知道如何解决此问题。

我认为，必须有一个带有承诺链的服务。如何设计？

Upd：我希望，随着时间的流逝，文档将变得更加完整和清晰。但是有经验的用户社区已经很棒。谢谢。

MichałMiszczyszyn

在我的项目中，我定义了一个服务appState，该服务具有（除其他方法外）方法：showGlobalSpinner并hideGlobalSpinner修改上的变量$rootScope。

基本上：

(…)
.factory('appState', ['$rootScope', function ($rootScope) {
    return {
        showGlobalSpinner: function () {
            ++$rootScope.loadingInProgress;
        },
        hideGlobalSpinner: function () {
            if ($rootScope.loadingInProgress > 0) {
                --$rootScope.loadingInProgress
            }
        }
    };
}]);

接下来要做的是使用ng-show指令向需要的地方显示微调器：

<div class="spinner" ng-show="loadingInProgress"></div>

在每次调用AJAX之前，AppState.showGlobalSpinner()以及在成功/错误之后，我都致电AppState.hideGlobalSpinner()

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。