Question

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

＆＃34;未捕获错误：[$ injector：modulerr]由于以下原因导致无法实例化模块spBlogger：错误：[$ injector：modulerr]无法实例化模块spBlogger.posts，原因如下：错误：[$ injector：unpr]未知提供商：$ stateProvider＆＃34;

虽然$ stateProvider服务已经注入，但我不确定为什么会这样。能否帮我确定一下我收到此错误消息的原因？

postModule.js内容：

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

index.html内容：

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

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


;

controllers.js

{{1}}

Answer 1

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

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

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

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

1 个答案: