Question

i'm working on my first project with AngularJS and well i haven't found a right answer for this question, these are 2 pieces of code on my application:

$routeProvider
            .when('/claim/:code', {
                templateUrl: 'views/RewardClaim.html',
                controller: 'RewardClaimCtrl',
                resolve: {
                    DataCode: ['Api', '$route', function (Api, $route) {
                        var code = $route.current.params.code;

                        return Api.code({code: code});
                    }]
                }
            })
            .when('/:slug', {
                templateUrl: 'views/Page.html',
                controller: 'PageCtrl',
                resolve: {
                    DataPage: ['Api', '$route', function (Api, $route) {
                        var slug = $route.current.params.slug;

                        return Api.page({slug: slug});
                    }]
                }
            })
            .otherwise({
                redirectTo: '/home'
            });

and this is my factory

angular.module('frontendApp')
  .factory('Api', ['$resource', function ($resource) {
        var SERVER_URL = '/api/index.php/';

        return $resource(SERVER_URL, {}, {
            code: {
                method: 'GET',
                url: SERVER_URL+'code/:code',
                cache: true
            },
            page: {
                method:'GET',
                url: SERVER_URL+'page/:slug',
                cache:true
            }
        });
  }]);

somebody told me that i don't need to use deferred/promises because $resource works as a promise, so resolve should work fine and render the view until the resolve is completed, but i'm having the problem that if i debug DataCode.data/DataPage.data inside the controller prints null when the api it's returning info.

what's the right way to do render the view and controller after $resource finished it's task?

AngularJS Version: 1.2.4

thanks

Was it helpful?

Solution

finally i found an answer for this, and here it is

$routeProvider
            .when('/claim/:code', {
                templateUrl: 'views/RewardClaim.html',
                controller: 'RewardClaimCtrl',
                resolve: {
                    DataCode: ['Api', '$route', function (Api, $route) {
                        var code = $route.current.params.code,
                            DataCode = Api.code({code: code});

                        return DataCode.$promise;
                    }]
                }
            })
            .when('/:slug', {
                templateUrl: 'views/Page.html',
                controller: 'PageCtrl',
                resolve: {
                    DataPage: ['Api', '$route', function (Api, $route) {
                        var slug = $route.current.params.slug,
                            DataPage = Api.page({slug: slug});

                        return DataPage.$promise;
                    }]
                }
            })
            .otherwise({
                redirectTo: '/home'
            });

this is where i found the solution: phillippuleo.com

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top