Angular JS，错误：[$injector:nomod] 模块“blogger.posts.controllers”不可用答案

【问题标题】：Angular JS, Error: [$injector:nomod] Module 'blogger.posts.controllers' is not availableAngular JS，错误：[$injector:nomod] 模块“blogger.posts.controllers”不可用
【发布时间】：2015-08-17 12:27:08
【问题描述】：

我正在关注 Angular.js - 忍者新手

这就是我设置项目的方式： app/js/app.js：

angular.module('blogger', ['blogger.posts', 'ui.router']);

app/modules/posts/postModule.js：

angular.module('blogger.posts', ['blogger.posts.controllers', 'blogger.posts.services']);

angular.module('blogger.posts').config(['$stateProvider', '$urlRouterProvider', '$locationProvider', function($stateProvider, $urlRouterProvider, $locationProvider){
    $urlRouterProvider.otherwise('/posts');
    $stateProvider.state('allPosts', {
        url:'/posts',
        templateUrl:'modules/posts/views/posts.html',
        controller:'PostsController'
    });
}]);

app/modules/posts/js/controllers.js：

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

app/modules/posts/js/services.js：

angular.module('blogger.posts.services').factory('postService', 
    function(){
        return {
            posts:[{
                id:1,
                title:'Sample title 1',
                content:'Sample content 1',
                permalink:'sample-title1',
                author:'Sandy',
                datePublished:'2015-21-01'
            }],
            getAll:function(){
                return this.posts;
            }
       }
  });

但是如果我运行代码，它会给我这个错误：

错误：[$injector:nomod] 模块“blogger.posts.controllers”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数

【问题讨论】：

网页中的js文件是按什么顺序添加的？
是否还有其他控制台错误，特别是与 controllers.js 相关？
检查你排列
我认为你应该包括 js/controllers.js 然后 postModule.js 因为试图在 postModule.js 中注入不存在的控制器模块

标签： javascript angularjs angular-ui-router

【解决方案1】：

/**
 * Create blogger.posts which dependes on sub modules 
 * 'blogger.posts.controllers', 'blogger.posts.services'
 * Ex . angular.module('moduleName', []) syntax for module setter.
 *  This is requried before registering on module
 */
angular.module('blogger.posts', ['blogger.posts.controllers',
 'blogger.posts.services']);

/**
 * Module setters
 */
angular.module('blogger.posts.controllers', []);
angular.module('blogger.posts.services', []);

/**
 * Now you can register controllers , service, directive etc 
 */
angular.module('blogger.posts.services').factory('postService',
    function () {
        return {
            posts: [{
                id: 1,
                title: 'Sample title 1',
                content: 'Sample content 1',
                permalink: 'sample-title1',
                author: 'Sandy',
                datePublished: '2015-21-01'
            }],
            getAll: function () {
                return this.posts;
            }
        }
    });


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

【讨论】：

@Sandeep Rao 确保您已包含所有 js 文件
我已经按照正确的顺序包含了所有的 JS 文件。现在我收到此错误：错误：[$injector:modulerr] 无法实例化模块 blogger 由于：[$injector:modulerr] 无法实例化模块 blogger.posts 由于：[$injector:unpr] 未知提供者：$ stateProvider
我猜这个错误与ui-router有关。但不确定
你应该在你使用状态的地方注入'ui.router'模块
我已经在 app.js 中注入了它

【解决方案2】：

我刚刚解决了这个问题（我正在做同样的教程：P）。在文件 app/js/app.js 中你需要：

angular.module('blogger', [
   'ui.router',
   'blogger',
   'blogger.posts'
]).run(['$state', function($state){
   $state.go('allPosts');
}]);

这应该可以解决它:)

【讨论】：