AngularJS is a very powerful front-end MVC framework. In AngualrJS, use $http to send a request to the remote API every time, waiting for a response, there is a little waiting process in between. How to handle this waiting process gracefully?
It would be a more elegant approach if we popped up a mask layer while waiting.
This involves intercepting the request response of $http. When requesting, a mask layer pops up, and hides the mask layer when receiving the response.
In fact, $httpProvider has provided us with a $ property, and we just need to put the custom interceptor into the collection.
How to show it? It's roughly like this:
<div data-my-overlay> <br/><img src="" /> Loading </div>
The displayed loaded image is included in Directive, and transclusion will definitely be used.
It also involves a problem of mask layer pop-up delay time. We want to set this through the API in config, so it is necessary to create a provider to set the delay time through this.
$http request response mask layer Directive:
(function(){
var myOverlayDirective =function($q, $timeout, $window, httpInterceptor, myOverlayConfig){
return {
restrict: 'EA',
transclude: true,
scope: {
myOverlayDelay: "@"
},
template: '<div class="onverlayContainer">' +
'<div class="onverlayBackground"></div>' +
'<div class="onverlayContent" data-ng-transclude>' +
'</div>' +
'</div>',
link: function(scope, element, attrs){
var overlayContainer = null,
timePromise = null,
timerPromiseHide = null,
inSession = false,
queue = [],
overlayConfig = ();
init();
//initializationfunction init(){
wireUpHttpInterceptor();
if() wirejQueryInterceptor();
overlayContainer = ('overlay-container');
}
//Customize Angular's http interceptorfunction wireUpHttpInterceptor(){
//Request for interception = function(config){
//Judge whether the display mask is met.if(shouldShowOverlay(, )){
processRequest();
}
return config || $(config);
};
//Response to intercept = function(response){
processResponse();
return response || $(response);
}
//Exception interception = function(rejection){
processResponse();
return $(rejection);
}
}
//Customize jQuery's http interceptorfunction wirejQueryInterceptor(){
$(document).ajaxStart(function(){
processRequest();
});
$(document).ajaxComplete(function(){
processResponse();
});
$(document).ajaxError(function(){
processResponse();
});
}
//Processing the requestfunction processRequest(){
({});
if( == 1){
timePromise = $timeout(function(){
if() showOverlay();
}, ? : );
}
}
//Processing the responsefunction processResponse(){
();
if( == 0){
timerPromiseHide = $timeout(function(){
hideOverlay();
if(timerPromiseHide) $(timerPromiseHide);
}, ? : );
}
}
//Display mask layerfunction showOverlay(){
var w = 0;
var h = 0;
if(!$){
if(!( == 0)){
w = ;
h = ;
} else {
w = ;
h = . clientHeight;
}
}else{
w = $;
h = $;
}
var content = ('overlay-content');
var contetWidth = parseInt(getComputedStyle(content, 'width').replace('px',''));
var contentHeight = parseInt(getComputedStyle(content, 'height').replace('px',''));
= h / 2 - contentHeight / 2 + 'px';
= w / 2 - contentWidth / 2 + 'px';
= 'block';
}
function hideOverlay(){
if(timePromise) $(timerPromise);
= 'none';
}
//Get the execution result of a functionvar getComputedStyle = function(){
var func = null;
if( && ){
func = ;
} else if(typeof() !== "undefined"){
func = function(element, anything){
return element["currentStyle"];
}
}
return function(element, style){
reutrn func(element, null)[style];
}
}();
//Decide whether to display the mask layerfunction shouldShowOverlay(method, url){
var searchCriteria = {
method: method,
url: url
};
return (findUrl(, searchCriteria));
}
function findUrl(urlList, searchCriteria){
var retVal = undefined;
(urlList, function(url){
if((url, searchCriteria)){
retVal = true;
return false;//Open the loop}
})
return retVal;
}
}
}
};
//Configure $httpProvidervar httpProvider = function($httpProvider){
$('httpInterceptor');
};
//Custom interceptorvar httpInterceptor = function(){
return {};
};
//Providing configurationvar myOverlayConfig = function(){
//Default configurationvar config = {
delay: 500,
exceptUrl: []
};
//Set delay = function(delayTime){
= delayTime;
}
//Set exception handling url = function(urlList){
= urlList;
};
//Get configurationthis.$get = function(){
return {
getDelayTime: getDelayTime,
getExceptUrls: getExceptUrls,
getConfig: getConfig
}
function getDelayTime(){
return ;
}
function getExeptUrls(){
return ;
}
function getConfig(){
return config;
}
};
};
var myDirectiveApp = ('',[]);
('myOverlayConfig', myOverlayConfig);
('httpInterceptor', httpInterceptor);
('$httpProvider', httpProvider);
('myOverlay', ['$q', '$timeout', '$window', 'httpInceptor', 'myOverlayConfig', myOverlayDirective]);
}());
In the global configuration:
(functioin(){
('customersApp',['ngRoute', ''])
.config(['$routeProvider, 'myOverlayConfigProvider', funciton($routeProvider, myOverlayConfigProvider){
...
(100);
({
method: 'GET',
url: ''
});
}]);
}());
The above is a masking layer Directive in AngualrJS that the editor shared with you every $http request. I hope it will be helpful to everyone.