wie kann ich

Question

einen gemeinsamen Lader oder Fortschrittsbalken auf ein ganzes Projekt füge ich in AngularJS mein Projekt mache, wie kann ich einen gemeinsamen Loader oder Fortschrittsbalken auf ein ganzes Projekt mit CSS hinzufügen, anstatt Show/Verbergen des Blocks aufrufen Funktionen für die Div-Klasse jedes Controllers.

Answer 1

Sie müssen einen Interceptor schreiben, um das zu tun. Um über Interceptor zu erfahren, siehe: https://docs.angularjs.org/api/ng/service/ $ http

Aber jemand hat bereits alle Arbeiten getan, also warum das Rad neu erfinden! http://chieffancypants.github.io/angular-loading-bar/

Answer 2

Bis Sie die Antwort erhalten Sie einen Warte Dialog setzen können .. nach Erhalt der Antwort, die Sie den Dialog verstecken .. Hier ist ein Link von einfachen Dialog mit Jquery waitingDialog

Und Sie können diesen Dialog werden am besten mit Winkel verwendet, und Sie können es entsprechend Ihrer Anforderung so viel Glück ändern ..

tun Sie es so etwas wie dieses

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

Dann Ereignis $rootScope überall gebunden verwenden (bevorzugt in der Richtlinie zu verwenden, oder führen Block app.js):

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

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

Sie mehr lesen kann es über hier codingsmackdown

Answer 3

Sie Winkel Laden verwenden können -bar http://chieffancypants.github.io/angular-loading-bar/#

Dies ist die beste Fortschrittsbalken im Hintergrund arbeiten.

Hier ist die Dokumentation http://angular-js.in/loading-bar/

Auch die Demo dort zur Verfügung steht.

Um Farbe der Ladebalken Verwendung css

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