2016-06-11 10 views
0

私はAngularJSを使用して、単一ページのブログサイトを構築しようとしていると私は、次のエラーメッセージが発生している:

「不明なエラー:[$インジェクタ:modulerrは]: エラーに起因して、モジュールspBloggerをインスタンス化に失敗しました:[$インジェクター:modulerr]: エラー:[$インジェクター:UNPR]不明プロバイダ:$ stateProvider」

これは$が起こっている理由は、私はよく分からない原因にモジュールspBlogger.postsをインスタンス化に失敗しました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> 

これは

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


; 
app.jsあります10

答えて

1

あなたはあなたのアプリケーションモジュールにui.routerに依存関係を追加するために逃した:

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

角度UIルータは公式の角度の分布の一部ではありませんが、それは、サードパーティの開発チームによって開発されたオプションのモジュールです。

+0

@マーズしかし、これは一部のコントローラでどこが間違っているのかを誰が知っているのだろうか? –

+0

@マーズ私はすでにあなたにこれらの問題を解決するためのヒントを教えてくれたと信じています。エラーメッセージはとても明確です。 'state'ではなく' $ state'です。 –

+0

@マーズあなたの心を使ってください! (Bruce Leeの引用.......)。次のエラーがサンプルコードで見つかることはありません。ところで、私のコメントをもう一度チェックすれば、あなた自身の問題を解決できるはずです... –

関連する問題