How store AngularJS $resource calls in an array to execute all together after?

Question

I'm working with AngularJS 1.5 (I'm really beginner with JS) in a user profile view where the user can change a lot of things in his data.

In this view the data is split in several sections and save all of this data means to do several calls to server ( due to the design of app). So the problem that I found is that when the user modify his data maybe modify only a part of this and when it push save button I don't want call all methods, only to necessary methods.

I've programed the way to detect the changes in data blocks when the user push the save button, sometimes the controller make a call and in other cases two or three. But the problem is that the calls (made with $resource library) is executed asyncronously and I would like can control this better.

I would like do the next: store all calls in a list or array but wihout execute them and after execute all at the same time (more or less). If any of this fails I would like show a error message to user (only a generic error message), but internally log the call that failed, and in the same way only show (and only one) a success message when all calls have ended with success ( and not a message per success call).

I don't know how to do this, some mates say me that maybe I need use $q AngularJS service to do this, or store the promises that $resource have to execute all after (I've trying this without success) or work with promises in JS.

Anyone can give me any idea?

Answer 1

Finally I resolved my problem using $q. At first I wanted store the calls without execute them (I thought that it was better) but finally I can check that only stored the results of this calls is enought for my aim. So, this a skeleton of the solution that I've been done:

At the beginning of the controller

var promises = [];

In all places where I need make a controlled call inside of save user data function:

var deferred = $q.defer();

var promise = vm.teacher.$update(
    function () { // Success
        deferred.resolve('Success updating the teacher.');
    },
    function (error) { // Fail
        deferred.reject('Error updating the teacher, error: ' + error)
    });
promises.push(deferred.promise)
}

...

... vm.otherItems.$update ... 

...

And at the end of this function, something like this:

$q.all(promises).then(

    function(value){
        console.log('Resolving all promises, SUCCESS,  value: ')
        console.log(value);
        toastService.showToast('Success updating the teacher.');

        // It deleted old promises for next iteration (if it exists)                
        promises = [];

    },function(reason){
        console.log('Resolving all promises, FAIL, reason: ')
        console.log(reason);
        toastService.showToast('Fail updating the teacher.');
    }
)

Thanks for the help!