Angularjs injection interceptor achieves Loading effect, angularjsloading

Angularjs injection interceptor achieves Loading effect, angularjsloading

Angularjs is a full ajax framework. For requests that do not perform any operations on the page, there is no response to the page before the result returns, unlike common HTTP requests, there will be progress bars and so on.

What is an interceptor?

$ HttpProvider has an interceptors array, and the so-called interceptor is just a simple standard service factory registered to this array. The following example shows how to create an interceptor:

<!-- lang: js -->module.factory('myInterceptor', ['$log', function($log) { $log.debug('$log is here to show you that this is a regular factory with injection'); var myInterceptor = {  ....  ....  .... }; return myInterceptor;}]);

Then add it to the $ httpProvider. interceptors array by its name:

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

First, we will show you:

This article uses the httpProvider injection Interceptor to implement loading.

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');}]);//loadingapp.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;}]);

The interceptor allows you:

Implement the request Method to intercept requests: This method will be executed before $ http sends the request to the background, so you can modify the configuration or perform other operations. This method receives the request configuration object as a parameter, and then must return the configuration object or promise. If an invalid configuration object or promise is returned, it will be rejected, resulting in $ http call failure.

Implement the response method to intercept the response: This method will be executed after $ http receives the response from the background, so you can modify the response or perform other operations. This method receives the response object as the parameter, and then must return the response object or promise. Response objects include request configuration, headers, status, and data from the background ). If an invalid response object or promise is returned, $ http fails to be called.

An exception occurred when intercepting a request by implementing the requestError method: Sometimes a request fails to be sent or is rejected by the interceptor. The request exception interceptor captures the requests interrupted by the previous request interceptor. It can be used to restore a request or sometimes to cancel the configuration made before the request, such as closing the progress bar, activating the button, and entering the box.

Response exceptions are intercepted by implementing the responseError method: Sometimes our background call fails. It may also be rejected by a request interceptor or interrupted by the previous response interceptor. In this case, the response to the exception interceptor can help us recover background calls.

Articles you may be interested in:

• Comparison and analysis of the difference between $ http. post and jQuery. post in AngularJS
• Analysis on AngularJs HTTP Response interceptor