Most Single Page Applications (SPA) written in Angular, utilize a plethora of asynchronous service calls in the background, some completing instantly and some taking a very long duration just because your ISP provides blazing speeds. Nevertheless, during such situation, it is essential that you display a loading indicator that suggests something like "Loading.." or "Please wait, your connection sucks!".
If your application contains a magnitude of $http service calls that you could hardly remember yourself, modifying each of them to display a loading indicator and hide it before and after each request will kill your time and ultimately you. Just imaging maintaining it! Is there a better way to enable this feature?
I feel your pain, hence this blog is about to detail a mechanism of how you can conveniently incorporate a loading indicator using a custom interceptor that plugs in to the AnguarlJS $httpProvider. To demonstrate this lets create a simple application where upon the user clicking a button we will query a backend service while displaying a loading indicator throughout the period of the HTTP request roundtrip.
Folder Structure
I like segregating an application into specific files and modules merely for maintainability. Before we dive in to the nitty-gritty details, lets observe the Angular application folder structure shown below that I opted to, which by no means are you restricted or limited to,
The pink square depicts the shared module, where I will have shared controllers, services, etc. indexController.js will be a controller that will be used to perform a simple http request. The utilityService.js contains a simple utility function to generate a unique ID and the httpInterceptorService.js will be the interceptor that is used to show/hide the loading indicator for each http request made via Angular.
The red square depicts the application where I have a module.js and rootController.js defined. The module.js at this level is responsible of injecting all the other modules that the application is dependent on (e.g. shared/module.js).
Below is the markup index.html page created as part of this solution, which details the loading of each file and the bootstrapping of the application,
<html>
<head>
<title>Display Loading Indicator with Interceptors in AngularJS</title>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.3.min.js"></script>
<script type="text/javascript" src="app/module.js"></script>
<script type="text/javascript" src="app/rootController.js"></script>
<script type="text/javascript" src="app/shared/module.js"></script>
<script type="text/javascript" src="app/shared/services/utilityService.js"></script>
<script type="text/javascript" src="app/shared/services/httpInterceptorService.js"></script>
<script type="text/javascript" src="app/shared/controllers/indexController.js"></script>
<link rel="stylesheet" href="Styles/styles.css" />
</head>
<body ng-app="app" ng-controller="app.RootController">
<div ng-controller="shared.IndexController">
<button ng-click="getData()">Get Data</button>
<div>
<ul ng-repeat="contact in contacts">
<li>{{contact}}</li>
</ul>
</div>
</div>
</body>
</html>Notice the app.RootController at the top most level, and the shared.IndexController at a child level. This will enable the addition of common functionality to the root controller that can be invoked throughout the applications life cycle. Lets see how we could add the show/hide ability of the loading indicator to the root controller below.
Toggling the Loading Indicator
The rootController.js is responsible as functioning as the top-most controller for the entire application and will be the controller the application is bootstraped with, and is typically where its most suitable to add all application wide functionality such as the show/hide functionality of the loading indicator we indent to enable,
angular.module('app')
.controller('app.RootController', ['$rootScope', function ($rootScope) {
// Collection to maintain load order.
var _loadList = {};
// Display the loading message.
$rootScope.showLoading = function (id, message) {
if (_loadList != null && _loadList[id] == null) {
var data = { id: id, message: message }; 7
_loadList[id] = data;
}
var loadElement = $('div[data-load]');
if (loadElement.length == 0) {
$('body').append('<div data-load class="preloader"><img src="http://www.downgraf.com/wp-content/uploads/2014/09/01-progress.gif" /><p data-load-message>' + message + '</p></div>');
} else {
loadElement.find('p[data-load-message]').text(message);
}
};
// Hide the loading message.
$rootScope.hideLoading = function (id) {
if (_loadList != null && _loadList[id] != null) {
delete _loadList[id];
}
if (Object.keys(_loadList).length != 0) {
var data = _loadList[Object.keys(_loadList)[Object.keys(_loadList).length - 1]];
if (data.id != null) {
_showLoading(data.id, data.message);
return;
}
}
var loadElement = $('div[data-load]');
loadElement.remove();
};
}]);The code is fairly simple. There are two functions bound to the $rootScope which is showLoading(id, message) and hideLoading(id). The showLoading(id, message) function is responsible of queuing the message based on the ID and then displaying a animated GIF image that is dynamically added to the DOM using JQuery. The hideLoading(id) function is responsible to removing the ID from the queue and hiding the loading indicator from the DOM. If there are other loading messages queued in the _loadList array, the hideLoading(id) function is responsible of displaying the next immediate loading message.
Having code to show/hide the loading indicator is all good, but we need to enable the mechanism of showing/hiding or invoking the showLoading(id, message)/hideLoading(id) functions accordingly for each $http service request invocation. Lets see on how to enable that using interceptors in Angular next.
Configuring the HTTP Interceptor
We all know what $http in Angular is. The $http is a service in Angular that supports the communication with a backend server via HTTP. Hence in order to add a loading indicator we need the ability to pre/post process each of the requests executed via the $http service. The $httpProvider is how Angular enables this ability, where it contains an array named interceptors. An interceptor in the context of $httpProvider is simply an object that will contain for important methods, which in-fact are request(...), requestError(...), response(...) and responseError(...) that will be triggered for each request made via $http service.
Simple enough! All we need is a mechanism to trigger a way to display a loading message when the request(...) function is triggered and hide the loading message when requestError(...), response(...) and responseError(...) is triggered. Lets see the code of the custom interceptor below,
angular.module('shared')
.factory('shared.httpInterceptorService', ['$rootScope', '$q', 'shared.utilityService', function ($rootScope, $q, utilityService) {
// Shows the loading.
var _showLoading = function (id, message) {
$rootScope.showLoading(id, message);
};
// Hides the loading.
var _hideLoading = function (id) {
$rootScope.hideLoading(id);
};
return {
// On request success
request: function (config) {
// Inject unique ID to config and and show loading. Show loading only if backgroundLoad property is not set or set to false.
if (config != null) {
config.id = utilityService.scriptHelper.getUniqueId();
_showLoading(config.id, config.loadMessage != null ? config.loadMessage : 'Loading...');
}
// Return the config or wrap it in a promise if blank.
return $q.when(config);
},
// On request failure
requestError: function (rejection) {
// Hide loading triggered against the unique ID.
if (rejection != null && rejection.config != null) {
_hideLoading(rejection.config.id);
}
// Return the promise rejection.
return $q.reject(rejection);
},
// On response success
response: function (response) {
// Get unique id from config and hide loading. Hide loading only if backgroundLoad property is not set or set to false.
var config = response.config;
if (config != null) {
_hideLoading(config.id);
}
// Return the response or promise.
return $q.when(response);
},
// On response failure
responseError: function (rejection) {
// Hide loading triggered against the unique ID.
if (rejection != null && rejection.config != null) {
_hideLoading(rejection.config.id);
}
// Return the promise rejection.
return $q.reject(rejection);
}
};
}]);There are a couple of things going on here. First off, lets understand the four important methods of the interceptor,
-
request(...)function: This function is called before the request is sent over to the backend. The function is passed with a configuration object and you are free to modify the config object as required and this config object will be passed to each of the other three functions. Likewise I am adding a unique ID generated via the utilityService.js to the config object, which will then be passed to the_showLoading(id, message)function and get queued. You are further required to return a valid configuration or promise or the request will be terminated/rejected.
-
response(...)function: This function is called as soon as a response is received from the backend. As of this point we retrieve the unique ID from the config object and call the_hideLoading(id)function. You are further required to return a valid configuration or promise or the request will be terminated/rejected.
-
requestError(...)function: The current interceptor is not the only interceptor, and there can be interceptors chained together. During certain situations a request can fail due to other interceptors throwing errors, or for other network or backend related issues. in this case as well we retrieve the unique ID from the config object and call the_hideLoading(id)function. You are further required to return a valid configuration or promise or the request will be terminated/rejected.
-
responseError(...)function: At certain tims there are situations where interceptors in the chan fail, or there can be situation where the backend failed to provide a successful response. In either case we retrieve the unique ID from the config object and call the_hideLoading(id)function. You are further required to return a valid configuration or promise or the request will be terminated/rejected.
You may have noticed the term promise quite a few times. Promise is a JS based pattern for differed execution/asynchronous programming. Please refer the $q documentation to gain more understanding on the promises in the context of Angular.
Summary
Provided all goes well, you should see and output similar to the following for each $http invocation in you application,
Provide you are unable to get things working, download the sample application from below and try it out.
Happy Coding!
