How to show Loader for $http calls in AngularJs ?

Hello Readers !!  In this post we are going to see how we can add a loader for $http calls in our angular applications. This loader will be shown whenever our angular application will send some call to server. I am assuming that you are aware of basics of AngularJs, if not then please go through the AngularJs official Developer Documentation.

So, lets begin, first of all we will be making simple loader UI with HTML and CSS. So our HTML will look somewhat as shown below.

<div id="loader" class="loader"  loading>    <span class="fa fa-spinner fa-pulse fa-2x fa-fw loader-align"></span></div>

Here I have used font-awsome’s spinner icon. You can keep same or can build your own loader/spinner, somewhat like this. Now let’s move to CSS part. Our loader should cover whole area of page and should not allow any actions unless all calls to server are finish. All we need to have div which will be having height and width 100% and z-index to be highest than all other elements. Below is exactly what we need

.loader {  position: fixed;  width:100%;  height:100%;  z-index: 99999;  background-color: grey;  opacity: 0.5;}

Next thing we will be adjusting our font-awsome’s spinner icon to center of our loader div with the help of following class

.loader-align{    position: relative;    top: 277px;    left: 657px;    z-index: 9999;}

top and left values are as per my screen resolution, you can try adjusting them as per yours. Now lets move to angular part, we will be constructing a directive of attribute type with name loader. Following is code for it

 your_app.directive('loading', ['$http', function ($http) {        return {            restrict: 'A',            link: function (scope, element, attrs) {                scope.isLoading = function () {                   return $http.pendingRequests.length > 0;                };                scope.$watch(scope.isLoading, function (value) {                    if (value) {                        element.removeClass('ng-hide');                    } else {                        element.addClass('ng-hide');                    }                });            }        };    }])

Here we have added a watch $http.pendingRequests , which actually return number of calls made by browser which are in pending state. So all we need to do is whenever this number of pending calls are more than 0 then show our loader otherwise hide it. Now if you want to apply this for some specific calls for example, this loader should work only for API calls in my application and my API base is ‘/api’ so you can do it simply by adding this lines to scope.isLoading

               scope.isLoading = function () {                   var temp=[];                    angular.forEach($http.pendingRequests,function (request,key) {                        if(request.url.includes('/api')){                            temp.puh(request);                        }                    });                    return temp.length > 0; */                };


Popular posts from this blog

MATLAB code for Circular Convolution using Matrix method

Positive number pipe in angular 2+