Execute code after multiple resources have loaded in Angular

Question

Execute code after multiple resources have loaded in Angular

In Angular, what is the best practice for triggering code after multiple models have been populated by resource services. Nest $scope.$watch?

Right now, I'm cheating and checking off values in an array, which doesn't feel very "angular."

$scope.loaded = [];
$scope.modelA = aResource.query({}, function() {$scope.loaded.push('a')});
$scope.modelB = bResource.query({}, function() {$scope.loaded.push('b')});

$scope.$watch(loaded.length, function(newValue) {
    if ($scope.loaded.indexOf(modelA) != -1 && $scope.loaded.indexOf(modelB) != -1) {
        console.log('done!'); 
    } 
});

https://groups.google.com/forum/?fromgroups=#!topic/angular/TizlifUL7FU

angularjs

Answer 1

If you are using Angular routing, this is normally accomplished with the resolve parameter of the when() method. See also Delaying AngularJS route change until model loaded to prevent flicker

If you don't want to delay your route change until the data is loaded, you can set up your own promises using $q. Use $q.all() to wait for all promises to resolve. See http://stackoverflow.com/a/15117739/215945 and http://stackoverflow.com/a/14545803/215945