I have been following the examples provided on the UI-Router wiki as well as the sample available at this link: https://scotch.io/tutorials/angular-routing-using-ui-router However, I am facing an issue where the resolved factory is appearing undefined when injected into the controller. Any assistance on resolving this would be highly 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;
});
}
};
}]);