在单独的文件中引用时，Angular模块不可用

ra9r 发表于 Dev

ra9r

我有一个基本的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'));

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

武奎耶

我不能将其简短地写上评论，所以我对此有一个答案。

还需要做一件事：必须在引导过程发生之前定义您的应用程序。作为来自角度团队的信息，

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

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

因此，您需要做的是将应用程序定义移出“未就绪”事件。

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。