How to add loader in angular app

Question

I want to show a loader before any api call, after getiing response hide the loader.It should be like generic, i have tried inspector that is not working for me.

look at http://stackoverflow.com/questions/17144180/angularjs-loading-screen-on-ajax-request — Jigarb1992, Dec 22 '16 at 13:12

score 0 · Answer 1 · answered Dec 22 '16 at 13:14

0

You could use angular-loading-bar, it uses interceptors to show a loading bar as long as there is pending requests.

http://chieffancypants.github.io/angular-loading-bar/

answered Dec 22 '16 at 13:14

ChrisK

44
8

score 0 · Answer 2 · answered Dec 22 '16 at 18:26

Create loader using directive. Add a parent to the loader element.

loader.directive.js

app.directive('loaderDir', function(){
  return{
     restrict: 'AE',
     scope:{},
     template: 'loader template here.......',
  }
})

index.html

   <body>
      <div loader-dir class="loader-holder" id="loader-holder"></div>    //better make this as last child
   </body>

styles.css

.loader-holder{
   display: none;
}
.loader-show{
   display: inline-block;
}

ajaxCall.service.js

function makeRequest(){
  //when you are going to make request, show loader that means addClass `loader-show`
  angular.element(document.getElementById('loader-holder')).addClass('loader-show');
  $http.get(url).then(function success(response){
   // on successful response, hide loader that means removeClass `loader-show`
     angular.element(document.getElementById('loader-holder')).removeClass('loader-show');
  })
}

How to add loader in angular app

2 Answers2