ANGULARJS injection Interceptor to achieve loading effect _ANGULARJS

Source: Internet
Author: User

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:

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:

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" >

CSS Code

. modal {
 Background:rgba (0, 0, 0, 0.3);
. Loading {
 #solution > Border-radius (8px);
 Margin-top: -36px;
 Margin-left: -80px;
 img {
 span {

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 ');
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.