[AngularJs] insérer un Loader Ajax

angularjs
Introduction


Insérer un Loader Ajax qui s’affiche lors de chaque requête $http ajax sur les pages, en seulement 3 minutes.

Un loader est une image GIF animée qui signale à l’utilisateur de l’app qu’une requête AJAX est en cours.

On se sert d’un interceptor.

Note : dans mon cas, j’ajoute toujours app devant le nom des différents modules, exemple : app.factory, app.service etc … et jamais de points- virgules à la fin ! je n’ai jamais de problèmes de ce fait.

 

Comment faire :


http://stackoverflow.com/questions/17838708/implementing-loading-spinner-using-httpinterceptor-and-angularjs-1-1-5

La solution de Michael Hunziker à copier coller dans l’application AngularJs, ça a fonctionné immédiatement pour moi… Attention de bien nommer l’image du loader et son chemin.

Interceptor:


.factory('httpInterceptor', function ($q, $rootScope, $log) {

    var numLoadings = 0;

    return {
        request: function (config) {

            numLoadings++;

            // Show loader
            $rootScope.$broadcast("loader_show");
            return config || $q.when(config)

        },
        response: function (response) {

            if ((--numLoadings) === 0) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return response || $q.when(response);

        },
        responseError: function (response) {

            if (!(--numLoadings)) {
                // Hide loader
                $rootScope.$broadcast("loader_hide");
            }

            return $q.reject(response);
        }
    };
})
.config(function ($httpProvider) {
    $httpProvider.interceptors.push('httpInterceptor');
});

Directive:

.directive("loader", function ($rootScope) {
    return function ($scope, element, attrs) {
        $scope.$on("loader_show", function () {
            return element.show();
        });
        return $scope.$on("loader_hide", function () {
            return element.hide();
        });
    };
}
)

CSS:

#loaderDiv {
   position: fixed;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   
   background-color: white;
   opacity: .6;
}

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

HTML:

<div id="loaderDiv" loader>
    <img src="img-app/loader.gif" class="ajax-loader"/></div>

Résultat :
Voir l’app http://nicolash.org/pompestation/#/accueil

Publicités

#loaderdiv