[AngularJS] Route resolve doesn't inject resolve result into controller

[Kuba Kozłowicz]

I am trying to postpone markup rendering until all required data for 
controller is retrieved from API, but it doesn't work - the resolve result 
is not injected into controller.

I also tried to place resolve body directly in route definition and it 
either doesn't work.

I am using Angular 1.2.5, I followed this topic to implement this:
http://stackoverflow.com/questions/11972026/delaying-angularjs-route-change-until-model-loaded-to-prevent-flicker

I tried increasing timeout time and watch this is Chrome console to see 
what is going on and controller's body is indeed postponed, $route param 
'productId' is present and correct, API call has been made, response with 
data has arrived before timeout, but the response is not injected into 
'product' variable, no idea why.

// app.js
    $routeProvider.when('/products/:productId', {
        templateUrl: 'productDetail.html',
        controller: 'ProductDetailController',
        resolve: productDetailController.resolve
    });

// services.js
productService.factory('Products', function($resource, $routeParams, urls){
    return $resource(
        urls.products + ':productId', { // urls.products ( Angular constant 
) => "/api/products/"
            productId: '@productId'
        }
    )
});

// controler.js
var productDetailController = 
catalogControllers.controller('ProductDetailController',
    ['$scope',
        function($scope, product) {

            console.log(product);
            $scope.product = product;
            $scope.mainImageUrl = product.images[0].path; // cannot read 
'images' of undefined

            $scope.SetImage = function(imageUrl) {
                $scope.mainImageUrl = imageUrl;
            }
        }
    ]
);


productDetailController.resolve = {
    product: function(Products, $q, $route) {
        var deferred = $q.defer();
        Products.get(
            {
                productId: $route.current.params.productId
            },
            function(successData) {
                deferred.resolve(successData);
            },
            function(errorData) {
                deferred.reject();
            }
        );
        return deferred.promise;
    },
    delay: function($q, $timeout) {
        var delay = $q.defer();
        $timeout(delay.resolve, 1000);
        return delay.promise;
    }
};


// also tried like this:
    $routeProvider.when('/products/:productId', {
        templateUrl: 'productDetail.html',
        controller: 'ProductDetailController',
        resolve: {
            product: function ($q, $route, Products) {
                var deferred = $q.defer();
                Products.get(
                    {
                        productId: $route.current.params.productId
                    },
                    function(successData) {
                        deferred.resolve(successData);
                    }, function(errorData) {
                        deferred.reject();
                    }
                );
                return deferred.promise;
            },
            delay: function($q, $timeout) {
                var delay = $q.defer();
                $timeout(delay.resolve, 5000);
                return delay.promise;
            }
        }
    });

-- 
You received this message because you are subscribed to the Google Groups 
"AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email 
to angular+unsubscr...@googlegroups.com.
To post to this group, send email to angular@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.