How to add the page loader in angularJS??

To add the page loader , we need to determine the http request sent by us has been responded or not.

For this simple query we need to evaluate just the value of following expression.


Following directive can be used anywhere to install loader the page on loading:-



   .directive('loading',   ['$http' ,function ($http)
        return {
            restrict: 'A',
            link: function (scope, elm, attrs)
                scope.isLoading = function () {
                    return $http.pendingRequests.length > 0;

                scope.$watch(scope.isLoading, function (v)


In View Page :-

Where spinner is the class you want to add as animation or loading image.

More about
Http Request