Coordinating multiple AJAX calls in Angular using Restangular

Question

I have an Angular application with a view which gets updated via $scope references to some model and state object exposed by a factory singleton. During initialization, or under certain actions within the view, the factory must make multiple AJAX calls (using Restangular) and wait for all promises to be resolved before updating its state and model properties. How can I wait for multiple futures to be resolved before applying appropriate side-effects on the data returned from the future?

e.g. A div which shows either a loading spinner or a model property and a button to refresh this property depending on a state.

<div ng-controller="MyCtrl">
    <div ng-if="state.isLoading" class="loading-animation"></div>
    <div ng-if="!state.isLoading">
        <span ng-bind-template="Property: {{model.property}}"></span>
        <button ng-click="refresh()">Refresh</button>
    </div>    
</div>

App.controller('MyCtrl', ['$scope', 'MyFactory', function('$scope', 'Factory') {
    $scope['model'] = Factory['model'];
    $scope['state'] = Factory['state'];
    $scope.refresh = function() {
        Factory.init();
    };
}])
.factory('MyFactory', ['restangular', function('Rest') {
    var Factory = {
            model = {
                property: null
            },
            state = {
                isLoading = false;
            }
        };

    Factory.init = function() {
        Factory['state']['isLoading'] = true;

        var promise1 = Rest.one('first').get();
            promise2 = Rest.one('second').get();

        // Resolve both promises.
        // Only when both promises are done,
        //     update model.property based on data returned and relevant logic.
        // Toggle isLoading state when finalized. 
    }

    return Factory;    
}])
.run(['MyFactory', function(Factory) {
    Factory.init();
}]);

What I'm having trouble with is how to implement the commented section in Factory.init(). I know I can use Angular's $q but I'm not very well versed in deferred objects and I find Angular's documentation on $q to be a bit confusing.

RichardTowers · Accepted Answer · 2015-09-06 10:25:58Z

8

I think $q.all() is what you want. This:

Combines multiple promises into a single promise that is resolved when all of the input promises are resolved.1

Untested example:

var promises = [
    Rest.one('first').get(),
    Rest.one('second').get()
];

$q.all(promises).then(function (results) {
    var resultOfFirstPromise = results[0],
        resultOfSecondPromise = results[1];
    // update model.property based on data returned and relevant logic.
});

edited Sep 6, 2015 at 10:25

answered Dec 18, 2013 at 22:22

RichardTowers

4,7801 gold badge30 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SirTophamHatt Over a year ago

Also very helpful for me was using an associative array. I could optionally add promises with keys and check for the keys to trigger different side effects on the model.

alyn000r Over a year ago

The problem I am facing with this was that if I have a .then in my controller it is throwing an undefined

Collectives™ on Stack Overflow

Coordinating multiple AJAX calls in Angular using Restangular

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related