Excute Angular Functions Synchronously and Simultaneously

Question

Here, this is my Scenario. Click to see the Image

Refer the above image. A, B, C, D are dropBoxes. And Data for each box are loaded by the http requests, on the page load. And after successfully completed each request, and loaded data into dropBoxes (each drop box has separate function ), the button should be enabled. Assume that each request brings different size of dataBulk from the DB. So, What I wanna know here is, - How could I track whether each dropBox has been loaded successfully or Not to Enable the Button ?

As I'm novel to Angular, highly expect and admire your answers and professional practice on doing this.

Note : functions can be independently used, is a must !! I'm using angularJs 1.x

If you are using AJAX and $http. Each $http request for each box will return a Promise. The success callback will let you know if it loaded successfully, the error callback will let you know if it didn't. — Hoyen, May 30 '17 at 18:56
Possible duplicate of [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Igor, May 30 '17 at 19:08

score 2 · Answer 1 · answered May 30 '17 at 19:06

You'll need to use $q.all() and pass in an array of your promises. Each one will still resolve independently, and once they have all resolved the .then() on your $q.all() will resolve. Here I've mocked up a working example that just returns string data after waiting for 1, 2 or 5 seconds.

angular.module('app', [])
  .service('dataService', function($q, $timeout) {
    var service = {};
    service.getData1 = function() {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.resolve("getData1 resolved");
      }, 1000);
      return deferred.promise;
    };
    service.getData2 = function() {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.resolve("getData2 resolved");
      }, 2000);
      return deferred.promise;
    };
    service.getData3 = function() {
      var deferred = $q.defer();
      $timeout(function() {
        deferred.resolve("getData3 resolved");
      }, 5000);
      return deferred.promise;
    };
    return service;
  })
  .controller('ctrl', function(dataService, $q) {
    var svcCall1 = dataService.getData1().then(function(data) {
      console.log(data);
    });
    var svcCall2 = dataService.getData2().then(function(data) {
      console.log(data);
    });
    var svcCall3 = dataService.getData3().then(function(data) {
      console.log(data);
    });

    $q.all([svcCall1, svcCall2, svcCall3]).then(function() {
      console.log("all getData calls completed");
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as vm">
</div>

Could you please explain me how to use promises for Angular 1.3 and less, for the structure as $scope.functionOne = function (value) { $http({ //POST request }).success (function(response) {//////////////}).error (function (response) {/////////////}) } — Tharaka Madhusanka, May 31 '17 at 10:26
I haven't used Angular 1.3, but promises aren't an Angular thing so I suspect the use is the same. One thing I would suggest is using a service instead of calling `$http` directly from the controller. Placing these in a service allows the methods to be shared among many controllers and also simplifies handling the promise resolution. I would also avoid `.success()` and opt for `.then()` as the former has been deprecated. — Lex, May 31 '17 at 17:25
Thank You @Lex. I too referred some articles on Angular 1.3 Promises, but couldn't find any successful answer for the above Success & error callback Structure. And Thank you For the suggestion to use Service ! I will work on that ! Thank you again for the Support ! — Tharaka Madhusanka, May 31 '17 at 18:29

score 1 · Answer 2 · answered May 30 '17 at 19:03

The $q operator has utilities for dealing with promises. One of those is the all() function, which waits for all the promises in an array to resolve before calling a function. Like so:

var promiseA = $http.get('url1').then(function(response) {
  $scope.dataA = response.data
});
var promiseB = $http.get('url2').then(function(response) {
  $scope.dataB = response.data
});
var promiseC = $http.get('url3').then(function(response) {
  $scope.dataC = response.data
});
var promiseD = $http.get('url4').then(function(response) {
  $scope.dataD = response.data
});

$q.all([promiseA, promiseB, promiseC, promiseD]).then(function() {
  enableButton();
})

Thank you ! Really Clear and Simple Explanation ! (Y) – Tharaka Madhusanka May 31 '17 at 07:35 — Tharaka Madhusanka, May 31 '17 at 07:35

Excute Angular Functions Synchronously and Simultaneously

2 Answers2