angular ui router optimizing resolve to only one requst - angularjs

Question

I want to combine multiple requests to one, so it won't do n requests but one.
Problem is that I don't know how to do a resolve to an object of names, which are variables that are injected in ctrl.
For example, now I have resolved:
resolve: {
regions : ["$http", function($http){
return $http({...});
}],
coordinators: ["$http", function($http){
return $http({...});
}],
....
}
What I want (not working) are same variables(n names) and only one request, which return n values to an object of names:
resolve: {
[regions,coordinators,...] : ["$http", function($http){
return $http({... return values;});
}]
}
Any ideas how?

Answer 1

You can achieve this by having one service endpoint that gathers your several pieces of information into an object literal:
function gatherResolves() {
return { region1.promise, region2.promise, region3.promise };
}
Then in the resolve you have just one call:
.state('foo', {
resolve: regions: ['$http', function($http) {
return $http.gatherResolves({ ... });
}]
})
Once in the controller, and injected into it, you can then split the injectable into the various pieces you want via destructuring (assuming you're using ES6) or manually assigning the object literal back into variables with your individual calls.
constructor(regions) {
this.splitRegions(this.regions);
}
splitRegions(regions) {
this.region1 = regions['region1'];
this.region2 = regions['region2'];
}
I might have mixed up some syntax as I'm mixing ES5/ES6 I think. But you get the idea, it is possible to distill it all down to 1 resolve call. The real question is, why, as you're just shifting logic around. Also, one of the benefits is that child states inherit resolves, so you can structure your code to make use of this. Having just one resolve with everything in it means you're carrying that around on all child states of that parent.