我如何使用$ q all angular.js处理多个HTTP请求

Question

I am trying to wrapp my head around $q angular library. In my routeprovider i would like to get all my data from the server and store it in localStorage. But for some reason the resolve dont seem to wait for all http request to finish before routing to selectMedia. From my understanding reading the angular docs this should work but it doesn´t. Have i totally missunderstood the concept or am i my thinking right?

         $routeProvider.           
            when('/', {
            redirectTo : '/selectMedia',
            resolve: {  
                data: function ($q, backendApi, localStorage, network, route, loginService){
                    var prices = function () {
                        var defer = $q.defer();
                        backendApi.prices.get(function (data) {
                            localStorage.setItem("videoPrice", data.VideoPrice);
                            localStorage.setItem("imagePrice", data.ImagePrice);
                            localStorage.setItem("prices", data.SliderPrices);
                            localStorage.setItem("priceSuffix", data.PriceSuffix);
                            defer.resolve();
                        }, defer.resolve);  
                        return defer.promise;
                    };
                    var validFormats = function () {
                        var defer = $q.defer(); 
                        backendApi.validFormats.get(function (formats) {
                            localStorage.setItem("validFormats", formats);
                            defer.resolve();
                        }, defer.resolve);
                        return defer.promise;
                    };
                    var videoFormats = function () {
                        var defer = $q.defer(); 
                        backendApi.videoFormats.get(function (videoFormats) {
                            localStorage.setItem("videoFormats", videoFormats); 
                            defer.resolve();
                        }, defer.resolve);
                        return defer.promise;
                    };
                    var categories = function () {
                        var defer = $q.defer();
                        backendApi.categories.get(function (data){
                            localStorage.setItem("categories", data.Categories);
                            defer.resolve();
                        },defer.resolve);   
                        return defer.promise;
                    };
                    var renewToken = function () {
                        var defer = $q.defer();
                        loginService.renewToken(defer.resolve);
                        return defer.promise;
                    };

                    if(network.isOnline()){                 
                        var promises = [renewToken(), categories(), videoFormats(), validFormats(), prices()];
                        return $q.all(promises);
                    }
                    else if(!network.isOnline() && localStorage.length === 0){
                        route('/error');
                    }
                }   
            }
        });
}]);

Answer 1

I don't see the controller for the route being specified in the route definition. I guess you have set it via ngController at the view level. The resolve block is skipped when you don't have a controller specified in the definition.

4/23 UPDATE

The definition of the resolve property extracted from the official docs:

An optional map of dependencies which should be injected into the controller . If any of these dependencies are promises, they will be resolved and converted to a value before the controller is instantiated and the $routeChangeSuccess event is fired.

According to the definition, the design purpose of the resolve property is to have a way to inject dependencies into the controller associated with a route.