频道导航

angular.js global ajax loading

2020-03-22 Angularjs 前端之家

前端之家收集整理的这篇文章主要介绍了angular.js global ajax loading，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

<!DOCTYPE html>
<html>
<head>
    <Meta charset="UTF-8">
</head>
<body>
    <div ng-app="app" ng-controller="main">
        <button type="button" ng-click="run()">ajax</button>
    </div>

    <script src="http://cdn.bootcss.com/angular.js/1.4.14/angular.min.js"></script>

    <script>
        var app = angular.module('app',[]);

        app.config(function ($httpProvider) {
            var count = 0;

            $httpProvider.interceptors.push(function ($q) {
                return {
                    request: function (config) {
                        if (count++ === 0) {
                            console.log('open');
                        }

                        return config;
                    },response: function (response) {
                        if (count-- === 1) {
                            console.log('close');
                        }

                        return response;
                    },responseError: function (rejection) {
                        if (count-- === 1) {
                            console.log('close');
                        }

                        return $q.reject(rejection);
                    }
                }
            });
        });

        app.controller('main',function ($scope,$http) {
            $scope.run = function () {
                $http.get('http://www.baidu.com');
                $http.get('http://www.baidu.com');
                $http.get('http://www.baidu.com');
                $http.get('http://www.baidu.com');
            }
        });
    </script>
</body>
</html>