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

问题

I'm doing my project in angularjs how can i add one common loader or progress bar to entire project with css rather than calling show/hide block functions for every controller's div class.

回答1:

You have to write an interceptor to do that. To learn about interceptor refer: https://docs.angularjs.org/api/ng/service/$http

But someone has already done all the works, so why re-invent the wheel! http://chieffancypants.github.io/angular-loading-bar/

回答2:

Until you get the response you can put a waiting dialog.. after getting the response you can hide the dialog.. Here is a link of simple dialog using jquery waitingDialog

And this dialog can be best used with angular and you can alter it according to your requirement so good luck..

Do it something like this

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');
}]);

Then use event bound to $rootScope anywhere (preferable to use in directive or run block of app.js):

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

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

You can read more about it here codingsmackdown

回答3:

You can use angular-loading-bar http://chieffancypants.github.io/angular-loading-bar/#

This is the best progress bar working in background.

Here is the documentation http://angular-js.in/loading-bar/

Also the demo is available there.

To change color of loading bar use css

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

来源：https://stackoverflow.com/questions/38177329/how-can-i-add-one-common-loader-or-progress-bar-to-entire-project

标签

angularjs

http

interceptor