Question

我已经开发了一个应用程序，我想在我的系统中添加加载程序，因为我看到BlockUI并进行一个演示，但我必须将它保存在每个页面中。

那么有角度的任何选项我可以将它包含在一个页面中并从一个地方管理所有HTTP调用的标志吗？

只有在完成所有api调用后才能删除它。

Answer 1

只需为$http调用创建一个工厂，并在该工厂中为ajax加载和结束事件添加侦听器。在该听众中添加您的加载器显示和隐藏事件。这是一个示例代码。在这里，我使用谷歌地图服务获取位置和angular broadcast事件，以显示和隐藏加载程序。

＆＃13;

<!doctype html>
<html ng-app="plunker">

<head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script>
        var app = angular.module('plunker', []);

        app.config(function ($httpProvider) {

        });

        app.factory('httpPreConfig', ['$http', '$rootScope', function ($http, $rootScope) {
            $http.defaults.transformRequest.push(function () {
                console.log('Started');
                //Show your loader here
                $rootScope.$broadcast('AjaxProgress');
            });
            $http.defaults.transformResponse.push(function () {
                console.log('Stopped');
                //Hide your loader here
                $rootScope.$broadcast('AjaxFinished');
            })
            return $http;
        }]);

        app.controller('MainCtrl', function ($scope, $rootScope, httpPreConfig) {
            $scope.showLoader = false;
            $scope.sendGet = function () {
                httpPreConfig.get('http://maps.googleapis.com/maps/api/geocode/json?address=america');
            };
            
            $rootScope.$on('AjaxProgress', function(){
                $scope.showLoader = true;
            });
            
            $rootScope.$on('AjaxFinished', function(){
                $scope.showLoader = false;
            });
        });
    </script>
    
</head>

<body ng-controller="MainCtrl">
    <div ng-if="showLoader">Loader</div>
    <button ng-click="sendGet()">Send Get</button>
</body>

</html>

＆＃13;

我希望这会对你有所帮助。

Answer 2

不确定这是你想要的但是基于标题 - 如果有人正在寻找一个非常容易实现的装载机我已经使用loading bar

只需将其包含在您的应用中，它就可以使用拦截器自动运行。

angular.module('myApp', ['angular-loading-bar'])

不会阻止用户界面，但会提供加载程序。（不确定问题是哪个要求？）

当http请求正在页面上时，AngularJs加载器正在进行中

2 个答案: