How to open modal pop up on each HTTP get/post method and close it when response is returned

Question

I am very new in AngularJs. I need a proper way by which I can open a modal popup on each http get/post method (with message like "processing...."). And when response is returned then close the opened Pop Up. I am searching it on google and know about decorator and interceptors, but I am unable to implement it. Can anyone suggest me the right way to achieve above functionality.

Given url is based on jquery. Jquery is not used in my application.

Answer 1

You can use the Http interceptor

Kinda like this:

angular.module('yourApp').factory('httpInterceptor', ['$q', function($q) {
//open modal function
var modal_open = function(){
    //some code
};
var modal_close = function(){
    //some code
};
return {
    request: function(config) {
        //open modal window in here
        modal_open();
        return config;
    },
    // optional method
    requestError: function(rejection) {
        //close modal window in here
        modal_close();
        return $q.reject(rejection);
    },
    response: function(response) {
        //close modal window in here
        modal_close();
        return response;
    },
    responseError: function (rejection){
        //close modal window in here
        modal_close();
        return $q.reject(rejection);
    }
};
}]);


angular.module('yourApp').config(['$httpProvider', function($httpProvider){
     $httpProvider.interceptors.push('httpInterceptor');
 }]);