AngularJS：无法实例化模块答案

【问题标题】：AngularJS: failed to instantiate moduleAngularJS：无法实例化模块
【发布时间】：2014-06-04 00:43:02
【问题描述】：

我对 AngularJS 很陌生，我现在正在为以下问题苦苦挣扎：

我想使用 routeProvider 的解析功能通过服务加载一些数据。但总是以这个错误结束：

未捕获的错误：[$injector:modulerr] 无法实例化模块 footballmvc，原因是：错误：[$injector:modulerr] 无法实例化模块团队，原因是：错误：[$injector:unpr] 未知提供者：团队

这是我的代码：

index.html

...
<script src="app/app.js"></script>
<script src="app/config.js"></script>
<script src="app/services/divisionService.js"></script>
<script src="app/services/teamService.js"></script>
<script src="app/teams/teamControllers.js"></script>
<script src="app/divisions/divisionControllers.js"></script>
...

...
<body ng-app="footballmvc">
    <div class="container-fluid">
        <div class="row" id="header">
            <h1>{{title}}</h1>
        </div>
        <div class="row">
            <div id="menu" class="col-lg-2">
                <ul class="list-unstyled">
                  <li><a href="#/divisions"><h3>Divisions</h3></a></li>
                  <li><a href="#/teams"><h3>Teams</h3></a></li>
                </ul>
            </div>
            <div id="content" class="col-lg-10" ng-view>
                <!-- Content goes here! -->
            </div>
        </div>
    </div>
</body>
...

app.js

var app = angular.module('footballmvc', ['config','ngRoute','teams','divisions'])
...

teamControllers.js

angular.module('teams', [])
.config(function($routeProvider, Teams, Divisions) {
$routeProvider
.when('/teams', {
  controller:'TeamListCtrl',
  templateUrl:'app/teams/list.tpl.html',
  resolve: { 
      teams : function(Teams) { 
          return Teams.query();       
      }    
  } 
})
...

teamService.js

angular.module('teams', [])

.factory('Teams', function($resource, config){
return $resource(config.MONGO_URL + 'teams/:id', {apiKey: config.MONGO_API_KEY,       id:'@_id.$oid'});
});

***更新：解决方案***

终于找到了解决办法。线索是将对服务的依赖项仅传递给解析函数而不是配置函数：

config(function ($routeProvider) {
  $routeProvider
    .when('/teams', {
      controller: 'TeamListCtrl',
      templateUrl: 'app/teams/list.tpl.html',
      resolve: {
          teams: function (Teams) {
              return Teams.query();
          }
      }
    })

【问题讨论】：

在您的 index.html 中，是否包含所有脚本（app.js、teamControllers.js、teamService.js）？
谁能解释为什么这些参数应该进入参数的函数而不是配置本身？

标签： angularjs

【解决方案1】：

您可以先尝试加载依赖脚本。即，'config','ngRoute','teams','divisions' 在您尝试实例化 app 模块之前。

另外，您定义了两次 teams 模块。

angular.module('teams', [])

只应在您的代码中出现一次。当您想稍后引用该模块时，请使用

angular.module('teams')
.config(...)

【讨论】：

【解决方案2】：

这通常发生在您的 index.html 文件中缺少包含的脚本或文件名与控制器/服务/模块名称不匹配时。返回并仔细检查您的文件名、文件路径和实际的角度名称。

【讨论】：

【解决方案3】：

这是角度告诉你它找不到footballmvc 模块。该脚本可能未包含在页面中，或者某处存在一些语法错误，阻止了模块被加载/注入。在将 footballmvc 模块实例化到 DOM 之前，请确保您的脚本路径正确且没有语法错误。

【讨论】：