错误：[$injector:unpr] 未知提供者：$stateProvider？答案

【问题标题】：Error: [$injector:unpr] Unknown provider: $stateProvider?错误：[$injector:unpr] 未知提供者：$stateProvider？
【发布时间】：2016-06-11 13:28:32
【问题描述】：

我正在尝试使用 AngularJS 构建单页博客站点，但遇到以下错误消息：

“未捕获的错误：[$injector:modulerr] 无法实例化模块 spBlogger，原因如下：错误：[$injector:modulerr] 无法实例化模块 spBlogger.posts，原因如下：错误：[$injector:unpr] 未知提供者：$stateProvider"

我不确定为什么会发生这种情况，尽管 $stateProvider 服务已经被注入。你能帮我找出我收到此错误消息的原因吗？

postModule.js 内容：

'use strict'

angular.module('spBlogger.posts', ['spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);

angular.module('spBlogger.posts')
    .config(['$stateProvider', '$locationProvider', function ($stateProvider, $locationProvider) {
        $stateProvider.state('allPosts', {
            url: '/posts',
            templateUrl: 'modules/posts/views/posts.html',
            controller: 'PostController'
        });
        $stateProvider.state('singlePost', {
            url: '/posts/:id/:permalink',
            templateUrl: 'modules/posts/views/singlePost.html',
            controller: 'PostDetailsController'
        });
}]);

index.html 内容：

<!doctype html>
<html lang="en" ng-app="spBlogger">

<head>
    <meta charset="utf-8">
    <base href="/">
    <title>The Single Page Blogger</title>
    <link rel="stylesheet" href="lib/bootstrap/bootstrap.min.css">
    <link rel="stylesheet" href="css/app.css">
    <link rel="stylesheet" href="modules/posts/css/posts.css">
</head>

<body>
    <div class="container">
        <br/>
        <div class="jumbotron text-center">
            <h1>The Single Page Blogger</h1>
            <p>One stop blogging solution</p>
        </div>
        <div ui-view> The angular ui-view should be displayed here!</div>
        <div class="row footer">
            <div class="col-xs-12 text-center">
                <p>The Single Page Blogger
                    <app-version/>
                </p>
            </div>
        </div>
    </div>
</body>
<!-- build:js app/built/app.min.js -->

<script src="lib/jquery/jquery.min.js"></script>
<script src="lib/bootstrap/bootstrap.min.js"></script>


<script src="lib/angular/angular.js"></script>
<script src="lib/angular-ui-router/angular-ui-router.min.js"></script>
<script src="lib/angular/angular-resource.js"></script>
<script src="lib/angular/angular-sanitize.js"></script>
<script src="lib/angular/angular-animate.js"></script>
<script src="lib/angular/angular-cookies.js"></script>

<script src="lib/angular/angular-translate.js"></script>

<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/directives.js"></script>
<script src="js/filters.js"></script>
<script src="js/services.js"></script>


<script src="modules/posts/postModule.js"></script>
<script src="modules/posts/js/controllers.js"></script>
<script src="modules/posts/js/filters.js"></script>
<script src="modules/posts/js/directives.js"></script>
<script src="modules/posts/js/services.js"></script>

<!-- endbuild -->

</html>

这是 app.js

'use strict'

angular.module('spBlogger', ['ui.router', 'spBlogger.posts', 'spBlogger.controllers', 'spBlogger.directives', 'spBlogger.filters', 'spBlogger.services']);

angular.module('spBlogger').value('version', 'V1.0');


angular.module('spBlogger').run(['state', function (state) {
    $state.go('allPosts');
}]);

controllers.js

'use strict'

angular.module('spBlogger.posts.controllers', [])


.controller('PostController', ['$scope', 'postService', function ($scope, postService) {
    $scope.getAllPosts = function () {
        return postService.getAll();
    };
    $scope.posts = $scope.getAllPosts();

}])


.controller('PostDetailsConstroller', ['$stateParams', '$state', '$scope', 'postService', function ($stateParams, $state, $scope, postService) {

    $scope.getPostById = function (id) {
        return postService.getPostById(id);
    };


    $scope.closePost = function () {
        $state.go('allPosts');
    };

    $scope.singlePost = $scope.getPostById($stateParams.id);
}])


;

【问题讨论】：

标签： javascript angularjs

【解决方案1】：

您错过了在应用程序模块中添加对ui.router 的依赖项：

angular.module('spBlogger.posts', ['ui.router', 'spBlogger.posts.controllers', 'spBlogger.posts.directives', 'spBlogger.posts.services', 'spBlogger.posts.filters']);

Angular UI Router 不是 Angular 官方发行版的一部分，但它是由第三方开发团队开发的可选模块。

【讨论】：

@Maz 但这可能是谁知道某些控制器的位置，我弄错了吗？
@Maz 我相信我已经就如何解决这些问题给了你一个很好的提示。错误信息非常清楚。它是 $state 而不是 state。
@Maz 动动脑筋！（李小龙语录......）。我没有看到您的示例代码中可能会发现下一个错误。顺便说一句，仔细检查我的 cmets，你应该能够自己解决问题......