Question

我在angularjs中做我的项目 如何用css添加一个公共加载器或进度条到整个项目 ，而不是为每个调用show / hide块函数控制器的div类。

Answer 1

你必须编写一个拦截器才能做到这一点。要了解拦截器，请参阅：https://docs.angularjs.org/api/ng/service/ $ http

但是有人已经做了所有的工作，所以为什么要重新发明轮子！ http://chieffancypants.github.io/angular-loading-bar/

Answer 2

在收到回复之前，您可以进行等待对话。获得响应后，您可以隐藏对话框.. 这是使用jquery waitingDialog

的简单对话框的链接

这个对话框可以最好地与角度一起使用，你可以根据你的要求改变它，祝你好运..

做这样的事情

angular.module('app').factory('httpInterceptor', ['$q', '$rootScope',
    function ($q, $rootScope) {
        var loadingCount = 0;

        return {
            request: function (config) {
                if(++loadingCount === 1) $rootScope.$broadcast('loading:progress');
                return config || $q.when(config);
            },

            response: function (response) {
                if(--loadingCount === 0) $rootScope.$broadcast('loading:finish');
                return response || $q.when(response);
            },

            responseError: function (response) {
                if(--loadingCount === 0) $rootScope.$broadcast('loading:finish');
                return $q.reject(response);
            }
        };
    }
]).config(['$httpProvider', function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
}]);

然后在任何地方使用绑定到$rootScope的事件（最好在指令或app.js的运行块中使用）：

$rootScope.$on('loading:progress', function (){
    // show loading gif
});

$rootScope.$on('loading:finish', function (){
    // hide loading gif
});

您可以在此处详细了解codingsmackdown

Answer 3

你可以使用角加载杆 http://chieffancypants.github.io/angular-loading-bar/#

这是在后台工作的最佳进度条。

以下是文档http://angular-js.in/loading-bar/

此外还有演示版。

要更改加载栏的颜色，请使用css

#loading-bar .bar {
    background-color: #2CA01C;
}

如何在整个项目中添加一个通用加载程序或进度条

3 个答案: