angularjs ui-router resolve factory undefined

I've followed the examples on the UI-Router wiki and the sample here: https://scotch.io/tutorials/angular-routing-using-ui-router but the resolved factory is undefined when it is injected into the controller. Any help would be greatly appreciated.

app var app = angular.module('toa', ['ngResource', 'ui.bootstrap', 'ui.router']);

app.config(function($stateProvider, $urlRouterProvider){
    $urlRouterProvider.otherwise('/');
    $stateProvider.state('home', {
        url: '/',
        views: {
            '' : {
              templateUrl: 'app/partials/home-partial.html'  
            },
            'sidebar@home': {
                templateUrl: 'loginMenu.html',
                controller: 'loginController'
            },
            'content@home': {
                templateUrl: 'app/views/home.html',
                controller: 'homeController'
            }
        }
    }).state('register', {
        url: '/register',
        views: {
            '': { templateUrl: 'app/partials/register-partial.html' },
            'content@register': {
                resolve: {
                    registerService: 'registerService'
                },
                templateUrl: 'app/views/registerView.html',
                controller: 'regController'
            }
        }
    });
});

controller

app.controller('regController', ['$scope', '$location', '$resource', '$http', function($scope, $route, $routeParams, $location, $resource, $http, registerService){
   // Controller code is here console.log(registerService) prints undefined
}

service

app.factory('registerService', ['$http', function($http){
    return {
        registerPlayer : function(playerName, playerPassword, playerEmail, playerGender) {
            var newPlayer = {
                ...
            };
            $http.post('...', newPlayer).
                success(function(data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                }).
                error(function(data, status, headers, config) {
                    console.log(data);
                    console.log(status);
                });
        },
        checkEmail : function(emailIn) {
            var data = { email : emailIn };
            return $http.post('...', data).
                then(function(data) {
                    return data;
                });
        },
        checkUsername : function(usernameIn) {
            var data = { username : usernameIn };
            return $http.post('...', data).
                then(function(data) {
                    return data;
                });
        }
    };
}]);

Answers


First of all, you forgot to declare registerService after $http in array notation of the controller definition.

If you want to inject something using resolve block in route configuration then you need to provide a function returning somthing, like Promise, or just a value. In your case try this:

resolve: {
    registerService: function(registerService) {
        return registerService;
    }
},

However note, that in your case you can simply inject service directly to controller, as you don't need resolve it here:

app.controller('regController', ['$scope', '$location', '$resource', '$http', 'registerService', function($scope, $route, $routeParams, $location, $resource, $http, registerService) {
   // Controller code is here console.log(registerService) prints undefined
}

resolve must be dict with functions, not a strings.

Change registerService: 'registerService' to some like this:

registerService: function (){
      //here goes your resolve function.
}

There is no point in resolving a service you can already inject. I think there is a conflict between the name of the service declared at your module level, and the name of the resolved-dependency, and so angular is lost.

Resolve would be interesting if you'd want to registerUser or checkEmail before entering your controller.

I suggest you remove the resolve part, and then be sure to include the 'registerService' string before your function declaration.


Need Your Help

cannot login to phpmyadmin error #1862 - Your password has expired

mysql login phpmyadmin

I installed mysql, php and phpmyadmin following this tutorial. Evrything works well, i.e., I can start and connect to mysql through the command line without any error, but the problem is when I try...

choosing between arrays, json and hstore datatypes in postgres and rails

ruby-on-rails arrays json postgresql hstore

I have some fields that are related to other fields and I think to put it in one database column will be much cleaner.