Afficher le GIF d'un spinner pendant une requête $http en AngularJS ?

Question

J'utilise le $http d'AngularJS pour effectuer une requête Ajax.

Comment afficher un GIF de type "spinner" (ou un autre type d'indicateur d'activité) pendant l'exécution de la requête Ajax ?

Je ne vois rien qui ressemble à un ajaxstartevent dans la documentation d'AngularJS.

Answer 1

Cela dépend vraiment de votre cas d'utilisation spécifique, mais un moyen simple serait de suivre un modèle comme celui-ci :

.controller('MainCtrl', function ( $scope, myService ) {
  $scope.loading = true;
  myService.get().then( function ( response ) {
    $scope.items = response.data;
  }, function ( response ) {
    // TODO: handle the error somehow
  }).finally(function() {
    // called no matter success or failure
    $scope.loading = false;
  });
});

Puis réagissez-y dans votre modèle :

<div class="spinner" ng-show="loading"></div>
<div ng-repeat="item in items>{{item.name}}</div>

Answer 2

Voici les actuel les anciennes incantations d'AngularJS :

angular.module('SharedServices', [])
    .config(function ($httpProvider) {
        $httpProvider.responseInterceptors.push('myHttpInterceptor');
        var spinnerFunction = function (data, headersGetter) {
            // todo start the spinner here
            //alert('start spinner');
            $('#mydiv').show();
            return data;
        };
        $httpProvider.defaults.transformRequest.push(spinnerFunction);
    })
// register the interceptor as a service, intercepts ALL angular ajax http calls
    .factory('myHttpInterceptor', function ($q, $window) {
        return function (promise) {
            return promise.then(function (response) {
                // do something on success
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return response;

            }, function (response) {
                // do something on error
                // todo hide the spinner
                //alert('stop spinner');
                $('#mydiv').hide();
                return $q.reject(response);
            });
        };
    });

//regular angular initialization continued below....
angular.module('myApp', [ 'myApp.directives', 'SharedServices']).
//.......

Voici le reste (HTML / CSS)....using

$('#mydiv').show(); 
$('#mydiv').hide(); 

pour l'activer. NOTE : ce qui précède est utilisé dans le module angulaire au début de l'article.

#mydiv {  
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    z-index:1000;
    background-color:grey;
    opacity: .8;
 }

.ajax-loader {
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -32px; /* -1 * image width / 2 */
    margin-top: -32px;  /* -1 * image height / 2 */
    display: block;     
}

<div id="mydiv">
    <img src="lib/jQuery/images/ajax-loader.gif" class="ajax-loader"/>
</div>

Answer 3

Si vous utilisez ngResource, l'attribut $resolved d'un objet est utile pour les chargeurs :

Pour une ressource comme suit :

var User = $resource('/user/:id', {id:'@id'});
var user = User.get({id: 1})

Vous pouvez lier un chargeur à l'attribut $resolved de l'objet ressource :

<div ng-hide="user.$resolved">Loading ...</div>

Answer 4

https://github.com/wongatech/angular-http-loader est un bon projet pour cela.

Exemple ici http://wongatech.github.io/angular-http-loader/

Le code ci-dessous montre un modèle exemple/loader.tpl.html lorsqu'une requête se produit.

<div ng-http-loader template="example/loader.tpl.html"></div>

Answer 5

Je viens de découvrir le angular-busy qui montre un petit chargeur dépendant d'un appel asynchrone.

Par exemple, si vous devez faire un GET , faites référence à la promesse dans votre $scope ,

$scope.req = $http.get('http://google.fr');

et l'appeler ainsi :

<div cg-busy="req"></div>

---

Voici le <a href="https://github.com/cgross/angular-busy" rel="nofollow noreferrer"><strong>GitHub</strong></a> .

Vous pouvez également l'installer en utilisant bower (n'oubliez pas de mettre à jour les dépendances de votre projet) :

bower install angular-busy --save