angularjs ui-router issue with resolve

Question

I'm creating an app using angularjs and angular-ui-router for state based routing. I have several routes in my app, but one is the one that demands attention. The state is defined as follows

state('profile', {
            url: '/profile',
            controller: 'ProfileController', //controller on a different file
            resolve: {
                user_profile: ['User', function (User){
                    return User.getProfile(); //returns a json object
                }]
            },
            templateUrl: 'profile.html'
        })

The getProfile code: getProfile: function(){ var d = $q.defer();

            $http.get('/profile')
                .success(function(res){
                    if (res.status == 'success'){
                        d.resolve(res);
                    } else {
                        d.reject();
                    }
                })
                .error(function(reason){
                    d.reject(reason);
                });
            return d.promise;
        }

Now in my controller file I have the following code:

.controller("ProfileController", ['$scope',function($scope,user_profile){
    console.log(user_profile);
}]);

The thing is that resolve should inject the resolved results in the controller, on a parameter named user_profile(because in the keys of the state definition I used user_profile) and the injected dependency has a value of undefined as stated by the console.log call.

I have debugged my code and the service that fetches the user profile on the server works really well, so, no problem in there. Even if I use an object return on the user_profile resolve key the error remains.

The other thing is that if I, on the state definition set the controller property to a function defined in the state definition then the dependency is injected with the correct value, but I don't want this, I want the dependency injected on the defined controller no on a inline controller as well.

So, what can be happening here?

Thanks in advance for any answer.

Answer 1

You are using the strict DI syntax for angular (array of strings for dependency names, with the function as the final parameter of the array), but you have not specified the user_profile dependency in the array.

E.g.

.controller("ProfileController", ['$scope','user_profile',function($scope,user_profile) { console.log(user_profile); }]);