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

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;
})();

try injecting `$injector` and use it to get the `examService`: `var examService = $injector.get('examService');` — Khanh TO, Jan 20 '15 at 14:03
@KhanhTO - Thank you very much for your answer. That gives me some ideas. I added the controller code. Would it be possible for you to give me an example of how this could be done as an answer for me and others and so I can accept it. I think this would be a bit help. — Alan2, Jan 20 '15 at 14:03

score 4 · Accepted Answer · answered Jan 20 '15 at 14:32

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();
    }]
}

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

1 Answers1