Question

我对AngularJS很陌生，我现在正在努力解决问题：

我想使用routeProvider的resolve功能通过服务加载一些数据。但总是最终出现这个错误：

未捕获错误：[$ 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();
          }
      }
    })

Answer 1

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

此外，您正在定义teams模块的两倍。

angular.module('teams', [])

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

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

Answer 2

当您的index.html文件中包含缺少的脚本或文件名与控制器/服务/模块名称之间的错误匹配时，通常会发生这种情况。返回并仔细检查您的文件名，文件路径和实际的角度名称。

Answer 3

这有点告诉你它无法找到footballmvc模块。该脚本可能未包含在页面中，或者某处出现语法错误，导致模块无法加载/注入。确保您的脚本路径正确，并且在DOM中实例footballmvc模块之前没有语法错误。

AngularJS：无法实例化模块

3 个答案: