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.
How to add loader in angular app
1.1k views Asked by aman kumar At
2
There are 2 answers
0
On
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');
})
}
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/