Handling of Multiple http request in a single click

Question

I am new to angularJS. I used Angular directive for block UI and it works as expected. My Problem is between two template get loaded it actually call 3 backend service. This all service has to be sequential. so that in error scenario it just skip the step. As per block UI design it does show loading page but it shows that 3 times (basically it start/stop on each http calls). I tried using it their manual start / stop but it does not effective. Even by following their direction I must be doing something wrong in configuration. Sorry if its dumb question but I am new to angular js and learning this all new stuff.

Here it more detail about directive which I am using.

github link

My code:

 angular.module(‘myApp').controller('MyController', function($scope, blockUI) {

//A function called from user interface, which performs an async operation.
 $scope.onSave = function(item) {

    // Block the user interface
     blockUI.start();

    // Perform the async operation    
     item.$save(function() {
               //service call 1 $http.post
                 if success then
                     //service call 2 $http.post
                     if success
                       //service call 3 $http.post
                     else
                       //error scenario
                 else
                    //error scenario
      // Unblock the user interface
       blockUI.stop();
    });
  };
});

Above code will show blockUI 3 times. as (3 http calls)…wanted to have treated 3 different calls as one call when blockUI executed.

Answer 1

Its always make me happy when I find out answer of my question. Here its answer which I used for my implementation. Hope this helps others.

 angular.module(‘myApp').controller('MyController', function($scope,      blockUI) {

//A function called from user interface, which performs an async      operation.
 $scope.onSave = function(item) {

// Block the user interface
 blockUI.start();

// Perform the async operation    
 item.$save(function() {

           $timeout(function() {
            blockUI.message('Still loading ...'); 

           //service call 1 $http.post
             if success then{
                   $timeout(function() { 
                   blockUI.message('Almost there ...');      

                 //service call 2 $http.post
                 if success then{
                   $timeout(function() { 
                   blockUI.message('Cleaning up ...'); 

                   //service call 3 $http.post
                   if success then
                       //process save
                   else{
                       //error scenario
                       // Unblock the user interface
                       blockUI.stop();
                   }
                    }, 3000);
                 }else{
                   //error scenario
                   // Unblock the user interface
                  blockUI.stop();
                 }
              }, 2000);
             }else{
                //error scenario
                // Unblock the user interface
                blockUI.stop();
             }
  }, 1000);

});
  };
});

This will take care about my question…it user blockUI for full 3 calls as single blockUI. Now message I can have it or not it up to individual choice.