How do i handle multiple http requests with $q all angular.js

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');
                    }
                }   
            }
        });
}]);

tamakisquare · Accepted Answer · 2013-04-23 14:55:31Z

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.

edited Apr 23, 2013 at 14:55

answered Apr 22, 2013 at 16:29

tamakisquare

17.2k28 gold badges92 silver badges132 bronze badges

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

4 Comments

bassen Over a year ago

Thanks for replying. But the resolve block doesn´t seem to be skipped and why do i need to specify a controller? All i want to do is save my data from the server in localStorage so i can access the data antwhere in the app.

tamakisquare Over a year ago

@bassen - I have updated my answer above. Using resolve without a controller is not what resolve is designed for. If I were you, I would try to use a controller just to see if that makes a difference and then work from there.

tamakisquare Over a year ago

@bassen - I am not completely sure how you want to use your data service. My guess is that you want it as a singleton object that gets loaded up when the app starts and its users don't get to access it until then. If so, you don't need to use resolve at all. You can simply use AngularJS service + promise + module.run(). Here is a plunker that demonstrates what I mean. There are comments in the code explaining what the code is doing. Note on the view, I use ngShow to show the content only if the promise is resolved.

bassen Over a year ago

Thanks for your answears. What i wanted to do was to save all serverdata when the app started. When('/') runs before routing to a page. That means it has no associated controller. I have now got it to work. The problem was that i couldn´t redirect to a page after resolve. My solution was to use $q.all().then redirect to a page.

Collectives™ on Stack Overflow

How do i handle multiple http requests with $q all angular.js

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related