Question

我有一个基本的Angular应用程序，它试图在单个模块下添加控制器和指令。该模块在名为 app.js 的顶级javascript文件中声明，如下所示：

(function(){
  var app = angular.module("FooModule", [
    'ngRoute',
    'ui.bootstrap'
  ]);

  // Code to setup config and routes here
})();

在他们自己的文件中，每个控制器或指令都是使用看起来像或多或少的代码创建的......

(function(){
  var app = angular.module('FooModule');

  app.controller('barCtlr', ['$scope', function($scope) {
    // Controller Logic Here
  }]);
})();

但是，在运行时，我们收到错误

Module 'FooModule' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

有没有人有任何想法为什么它找不到FooModule？

注意：当我们为每个单独的控制器或指令创建模块时，它可以正常工作。

UPDATE ：为了让事情变得更有趣，事实是在获得错误之后，在Javascript控制台中，当我输入以下内容时：

console.log(angular.module('FooModule'));

我没有得到任何错误，事实上确实得到了一个有效的模块对象，包含了所有的控制器和指令。

Answer 1

请查看您的'barCtlr.js'

目前的代码是：

app.controller('barCtlr'. ['$scope', function($scope) {

'barCtlr'。它应该是逗号而不是像

这样的句号

app.controller('barCtlr', ['$scope', function($scope) {

Answer 2

我不能用评论写出来，所以我有一个答案。

还需要做一些事情：必须在引导过程发生之前定义您的应用。作为info from angular team here，

“Angular在DOMContentLoaded事件时自动初始化，或者在评估angular.js脚本时，如果当时document.readyState设置为'complete'”

意味着引导程序将要求您的应用程序定义在引导过程发生时已经存在。

所以您需要做的是将您的应用定义移出'onready'事件。

app.js中的代码应为：

var app = angular.module("FooModule", [
    'ngRoute',
    'ui.bootstrap'
]);

没有in（function（）{}）（）;

如果您想手动控制，例如您自己稍后会发生引导过程，那么您应该从您的HTML中删除ng-app 并仅在以后手动启动您的应用您的应用定义已准备好：

// define your app first
angular.module('myApp', [])    

// then bootstrap it
angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

在单独的文件

2 个答案: