ANGULARJS injection Interceptor to achieve loading effect _ANGULARJS

Angularjs as a full AJAX framework, for requests, if the page does not do anything, before the results annoying back, the page is not any response, unlike ordinary HTTP requests, there will be progress bar and so on.

What is a interceptor?

There is a interceptors array in the $httpProvider, and the so-called interceptor is simply a generic service factory registered in the array. The following example shows you how to create an interceptor:

<!--lang:js-->
module.factory (' Myinterceptor ', [' $log ', function ($log) {
 $log. Debug (' $log is Show you the This is a regular factory with injection ');
 var myinterceptor = {
  ....
  . ....
  ....
 };
 Return Myinterceptor
}]);

It is then added to the $httpProvider. Interceptors array by its name:

<!--lang:js-->
module.config ([' $httpProvider ', function ($httpProvider) {
 $ HttpProvider.interceptors.push (' Myinterceptor ');
}];

First to show you the effect of the picture:

In this paper, the loading is realized by Httpprovider injection interceptor.

HTML code

<div class= "Loading-modal modal" ng-if= "Loading" >
 <div class= "Loading" >
  module->getassetsurl () >/img/loading.gif "alt=" "/><span ng-bind=" Loading_text "></span" >
 </div>
</div>

CSS Code

. modal {
 position:fixed;
 width:100%;
 height:100%;
 left:0;
 top:0;
 z-index:99;
 Background:rgba (0, 0, 0, 0.3);
 Overflow:hidden
}
. Loading {
 position:absolute;
 top:50%;
 Background:white;
 #solution > Border-radius (8px);
 width:160px;
 height:72px;
 left:50%;
 Margin-top: -36px;
 Margin-left: -80px;
 Text-align:center;
 img {
 margin-top:12px;
 Text-align:center;
 }
 span {
 Display:block
 }}

JS Code

App.config (["$routeProvider", "$httpProvider", Function ($routeProvider, $httpProvider) {
 $routeProvider. When (' /', {
  templateurl: "/views/reminder/index.html",
  Controller: "Indexcontroller"
 });
 $routeProvider. When ('/create ', {
  templateurl: "/views/reminder/item/create.html",
  Controller: " Itemcreatecontroller "
 });
 $routeProvider. Otherwise ({redirectto: '/'});
 $httpProvider. Interceptors.push (' Timestampmarker ');
}];
Loading
app.factory (' Timestampmarker ', ["$rootScope", function ($rootScope) {
 var timestampmarker = {
  request:function (config) {
   $rootScope. Loading = true;
   Config.requesttimestamp = new Date (). GetTime ();
   return config;
  },
  response:function (response) {
   //$rootScope. Loading = false;
   Response.config.responseTimestamp = new Date (). GetTime ();
   return response;
  }
 ;
 Return Timestampmarker
}]);

Interceptors allow you to:

Blocking requests by implementing the request method: This method executes before the $http sends a request path, so you can modify the configuration or do something else. The method receives the request configuration object (requests configuration object) as an argument and must then return the configuration object or promise. If an invalid configuration object or promise is returned, it is rejected, causing the $http call to fail.

Intercepts the response by implementing the Response method: This method executes after the $http receives a response from the background, so you can modify the response or do something else. The method receives the Response object (response object) as an argument, and then must return the response object or promise. The response object includes the request configuration (requests configuration), header (headers), status, and data from the background. If an invalid response object is returned or the promise is rejected, the $http call fails.

Block request exceptions by implementing the Requesterror method: Sometimes a request fails or is rejected by the interceptor. Requesting an exception interceptor captures requests that have been interrupted by the last request interceptor. It can be used to recover requests or sometimes to undo the configuration that was made prior to the request, such as closing the progress bar, activating the button and the input box, and so on.

Blocking response exceptions by implementing the Responseerror method: sometimes our backend calls fail. It is also possible that it was rejected by a request interceptor or interrupted by the last response interceptor. In this case, the response exception interceptor can help us recover the background call.