angularjs - 如何访问 ui-router 解析中的服务？

Question

我有一个 Angular 应用程序 app.js :

var app;

app = angular.module('app',
    [
        'exam',
        'ui.router'
    ])
    .controller('appController', AppController)
    .service('examService', ExamService));

我有一个配置文件:

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

谁能给我一些建议。

当我运行它时，它告诉我:

 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

我检查了一下，我的 examService 在其他两个文件之前声明:

<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>

同样在我的 Controller 中，我使用了 examService，它可以毫无问题地使用。

这是我的 Controller 的样子:

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

您只能将提供程序注入(inject)到 config block 中。尝试注入(inject) $injector 并使用它来获取您的 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);
}];

或者根据docs ，你可以像这样直接注入(inject):

resolve: {
     exams: function(examService) {
        return examService.getAdminExams();
     }
}

如果您缩小脚本，这可能不起作用。试试这个:

resolve: {
    exams: ['examService',function(examService) {
         return examService.getAdminExams();
    }]
}