错误：[$ injector：unpr]未知提供程序：$ stateProvider？

Question

I'm trying to build a single page blogging site using AngularJS and I have encountered the following error message: 我正在尝试使用AngularJS建立一个单页博客网站，并且遇到以下错误消息：

"Uncaught Error: [$injector:modulerr] Failed to instantiate module spBlogger due to: Error: [$injector:modulerr] Failed to instantiate module spBlogger.posts due to: Error: [$injector:unpr] Unknown provider: $stateProvider" “未捕获错误：[$注射器：modulerr]未能实例模块spBlogger由于：错误：[$注射器：modulerr]未能实例由于模块spBlogger.posts：错误：[$注射器：unpr]未知提供商：$ stateProvider”

I'm not sure why this is happening although the $stateProvider service is already injected. 我不知道为什么发生这种情况虽然$ stateProvider服务已经注入。 Can you please help me identify why I'm getting this error message? 您能否帮助我确定为什么我收到此错误消息？

postModule.js contents: 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 contents: 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>

This is the app.js 这是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 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);
}])


;

Answer 1

You missed to add a dependency to ui.router in your application module: 您错过了在应用程序模块中向ui.router添加依赖ui.router的过程：

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

Angular UI Router isn't part of official Angular's distribution but it's an optional module developed by a third-party dev team. Angular UI Router不是Angular官方发行版的一部分，而是由第三方开发团队开发的可选模块。

错误：[$ injector：unpr]未知提供程序：$ stateProvider？

问题描述

1 个解决方案

解决方案1
1 2016-06-11 13:32:53

错误：[$ injector：unpr]未知提供程序：$ stateProvider？

问题描述

1 个解决方案

解决方案1 1 2016-06-11 13:32:53

解决方案1
1 2016-06-11 13:32:53