How can I access a service in a ui-router resolve? - angularjs

Question

I have an Angular Application app.js :
var app;
app = angular.module('app',
[
'exam',
'ui.router'
])
.controller('appController', AppController)
.service('examService', ExamService));
and I have a config file:
var stateConfig = [
'$locationProvider',
'$sceDelegateProvider',
'$sceProvider',
'$stateProvider',
'examService',
function ($locationProvider, $sceDelegateProvider, $sceProvider, $stateProvider, examService) {
$locationProvider.html5Mode(true);
$sceProvider.enabled(false);
var exams = {
name: 'exams',
url: '/Exams',
templateUrl: 'app/exams/partials/home.html',
resolve: {
exams: examService.getAdminExams()
}
};
$stateProvider.state(exams);
}];
app.config(stateConfig);
Can someone give me some advice.
When I run this it tells me:
Uncaught Error: [$injector:modulerr] Failed to instantiate module app due to:
Error:
[$injector:unpr]
Unknown provider: examService
http://errors.angularjs.org/1.3.7/$injector/unpr?p0=examService
I checked and my examService is declared before the other two files:
<script src="/app/appController.js"></script>
<script src="/app/services/ExamService.js"></script>
<script src="/app/app.js"></script>
<script src="/app/appConfig.js"></script>
<script src="/app/appRun.js"></script>
Also in my controller I use the examService and it's available without any problem.
Here's what my controller looks like:
var AppController = (function () {
function AppController($scope, $state, es) {
var _this = this;
this.$scope = $scope;
this.$state = $state;
this.es = es;
}
AppController.$inject = [
'$scope',
'$state',
'examService'
];
return AppController;
})();

Answer 1

You can only inject providers to config block. Try injecting $injector and use it to get your examService:
var stateConfig = [
'$locationProvider',
'$sceDelegateProvider',
'$sceProvider',
'$stateProvider',
'$injector',
function ($locationProvider, $sceDelegateProvider, $sceProvider, $stateProvider, $injector) {
$locationProvider.html5Mode(true);
$sceProvider.enabled(false);
var exams = {
name: 'exams',
url: '/Exams',
templateUrl: 'app/exams/partials/home.html',
resolve: {
exams: function() {
//retrieve your service
var examService = $injector.get('examService');
return examService.getAdminExams()
}
}
};
$stateProvider.state(exams);
}];
Or according to the docs, you can inject directly like this:
resolve: {
exams: function(examService) {
return examService.getAdminExams();
}
}
This may not work if you minify the script. Try this:
resolve: {
exams: ['examService',function(examService) {
return examService.getAdminExams();
}]
}