Manage Spinner in AngularJS
Posted By : Himanshu Goyal | 07-Jan-2017
Intro: During every API call we always in show the spinner after the request and before the response comes .Rather then manage the in every API call you just manage in single point in angularjs application using the interceptor. $httpProvider is provide the three point ie request,response and responseError. Even you set the any property in header in every API request .The interceptor will mange the spinner at three points :
A.Show the spinner in request property in $httpProvider .
B.Hide the spinner in response property in $httpProvider
C.Hide the spinner in responseError property because in case of any error the spinner will be hide .
$httpProvider.interceptors.push(function ($rootScope, $q, $timeout) {
return {
request: function (config) {
config.headers = config.headers || {};
config.headers['X-Auth-Token'] = localStorage.getItem('authToken');
document.getElementById("spinnerBgfullshow").classList.remove("ng-hide");
return config;
},
response: function (response) {
document.getElementById("spinnerBgfullshow").className = "ng-hide";
$timeout(function () {
document.getElementById("spinnerBgfullshow").className = "ng-hide";
}, 1000);
return response;
},
responseError: function (response) {
document.getElementById("spinnerBgfullshow").className = "ng-hide";
return $q.reject(response);
}
};
});
THANKS
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Himanshu Goyal
Himanshu is a bright Java ,Mean stack developer and have good knowledge of Hibernate, Spring,FFmepg,Neo4j JSON, Jquery, NODE.JS .His hobbies are learning new things, fitness .