Comment faire un indicateur de chargement pour chaque action asynchrone (à l'aide de $q) dans un angularjs-app

Bien que je trouve qu'il est très compliqué, inutile, et sans doute cassé, vous pourrait décorer $q et de remplacer son defer fonction.

Chaque fois quelqu'un demande pour un nouveau defer() il exécute votre propre version qui a également incrémente un compteur. Avant de distribuer le defer objet, vous vous inscrivez à un finally de rappel (Angulaire 1.2.0 seulement, mais always peut convenir aussi) pour décrémenter le compteur.

Enfin, vous ajoutez une montre à $rootScope à surveiller lorsque ce compteur est supérieur à 0 (plus rapide que d'avoir pendingPromisses dans $rootScope et lier comme ng-show="pendingPromisses > 0").

app.config(function($provide) {
    $provide.decorator('$q', ['$delegate', '$rootScope', function($delegate, $rootScope) {
      var pendingPromisses = 0;
      $rootScope.$watch(
        function() { return pendingPromisses > 0; }, 
        function(loading) { $rootScope.loading = loading; }
      );
      var $q = $delegate;
      var origDefer = $q.defer;
      $q.defer = function() {
        var defer = origDefer();
        pendingPromisses++;
        defer.promise.finally(function() {
          pendingPromisses--;
        });
        return defer;
      };
      return $q;
    }]);
});

Puis, vue lié à un champ d'application qui hérite de $rootScope peut avoir:

<span ng-show="loading">Loading, please wait</span>

(cela ne fonctionnera pas dans les directives isoler les étendues)

Voir en direct ici.

Depuis demandé par l'OP, c'est basé sur la méthode que nous utilisons pour l'application que nous sommes en train de travailler. Cette méthode ne PAS changer le comportement de $q, plutôt ajoute un très simple API pour gérer les promesses qui ont besoin d'une indication visuelle. Bien que ce besoin d'être modifié à chaque endroit où il est utilisé, il n'est qu'un one-liner.

D'utilisation

Il y a un service, dire ajaxIndicator, qui sait comment mettre à jour une partie de l'INTERFACE utilisateur. Chaque fois qu'une promesse, comme objet doit donner une indication jusqu'à ce que la promesse est résolu que nous utilisons:

//$http example:
var promise = $http.get(...);
ajaxIndicator.indicate(promise); //<--- this line needs to be added

Si vous ne souhaitez pas conserver une référence à la promesse:

//$http example without keeping the reference:
ajaxIndicator.indicate($http.get(...));

Ou avec une ressource:

var rc = $resource(...);
...
$scope.obj = rc.get(...);
ajaxIndicator.indicate($scope.obj);

(NOTE: Pour Angulaires 1.2 ce besoin tweeking, comme il n'y a pas de $then() sur l'objet de la ressource.)

Maintenant à la racine du modèle, vous devez lier l'indicateur de $rootScope.ajaxActive, par exemple:

<div class="ajax-indicator" ng-show="ajaxActive"></div>

Mise en œuvre

(Modifié à partir de notre source.) AVERTISSEMENT: Cette application ne prend pas en compte les appels imbriqués! (Nos exigences demandées pour l'INTERFACE utilisateur de blocage, de sorte que nous ne nous attendons pas les appels imbriqués; si intéressé je pourrais essayer d'améliorer ce code.)

app.service("ajaxIndicator", ["$rootScope"], function($rootScope) {
    "use strict";

    $rootScope.ajaxActive = false;

    function indicate(promise) {
        if( !$rootScope.ajaxActive ) {
            $rootScope.ajaxActive = true;
            $rootScope.$broadcast("ajax.active"); //OPTIONAL
            if( typeof(promise) === "object" && promise !== null ) {
                if( typeof(promise.always) === "function" ) promise.always(finished);
                else if( typeof(promise.then) === "function" ) promise.then(finished,finished);
                else if( typeof(promise.$then) === "function" ) promise.$then(finished,finished);
            }
        }
    }

    function finished() {
        $rootScope.ajaxActive = false;
    }

    return {
        indicate: indicate,
        finished: finished
    };
});