如何为整个项目添加一个通用加载器或进度条

Question

我在angularjs做我的项目我怎样才能给整个项目添加一个通用加载器或进度条使用 css 而不是为每个控制器的 div class.

调用 show/hide 块函数

Answer 1

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

但都已经有人做了，何必再造轮子呢！ http://chieffancypants.github.io/angular-loading-bar/

Answer 2

在收到回复之前，您可以等待对话框.. 得到回应后你可以隐藏对话框.. 这是一个 link 使用 jquery waitingDialog

的简单对话框

这个对话框最好与 angular 一起使用，您可以根据需要更改它，祝您好运..

像这样做

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

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

这是后台运行的最佳进度条。

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

那里也有演示。

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

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

如何为整个项目添加一个通用加载器或进度条

how can i add one common loader or progress bar to entire project

http

interceptor

angularjs