未捕获错误:[$injector:moduler]无法使用LABJS实例化模块



我在加载Angular应用程序时一直收到这个错误。在Chrome中,几次刷新后,我的应用程序就会运行,但IE和FF是不可能的。

这个错误将我链接到这个错误页面,但我真的不明白它说了什么。

我正在使用LabsJS加载我的应用程序,包括控制器和服务。

// spAppLoader.js
$LAB
.script("../js/app.js").wait()
.script("../js/controllers/userCtrl.js")
.script("../js/controllers/groupCtrl.js")
.script("../js/controllers/siteCtrl.js")
.script("../js/services/userServices.js")
.script("../js/services/groupServices.js")
.script("../js/services/siteServices.js")

标记:

<div id="mdContainer" ng-app="spApp" ng-cloak>
...
</div>
<script type="text/javascript" src="../js/spAppLoader.js"></script>

我想发布更多的代码,但我不知道从哪里开始,因为有角度,所有东西都在多个文件中。我通过github上传了它。

您应该手动引导您的应用程序,因为您使用异步脚本加载器:

$LAB
.script("../js/app.js").wait()
.script("../js/controllers/userCtrl.js")
.script("../js/controllers/groupCtrl.js")
.script("../js/controllers/siteCtrl.js")
.script("../js/services/userServices.js")
.script("../js/services/groupServices.js")
.script("../js/services/siteServices.js")
.wait(function(){
var root = document.getElementById('mdContainer')
angular.bootstrap(root ,['spApp']);
})

什么是自举

angular.bootstrap(root ,['spApp']);<div id="mdContainer" ng-app="spApp">相同,只有最后一个会在DOMContentLoaded event发生时自动初始化您的应用程序。

使用脚本加载程序时,DOMContentLoaded event可能在加载所有脚本之前发生,因此您必须等待所有模块脚本,然后手动引导应用程序。

在您的情况下,chrome可能缓存了您的脚本,因此在几次刷新后,DOMContentLoaded event发生在加载所有脚本之后。

来自文档:

自动初始化

Angular在DOMContentLoaded事件时自动初始化,或者在评估Angular.js脚本时(如果当时document.readyState设置为"complete")自动初始化。此时,Angular将查找指定应用程序根的ng应用程序指令。。。

手动初始化

如果您需要对初始化过程有更多的控制,可以使用手动引导方法。需要执行此操作的示例包括使用脚本加载程序或需要在Angular编译页面之前执行操作。

此错误通常意味着angular找不到您试图注入控制器或其他可注入函数的对象。在快速浏览了您的代码后,我猜测加载文件的方式有问题,因为您从多个文件中引用了spApp

我通常所做的是将单独的文件移动到它们自己的模块中,然后根据需要需要需要其他模块。例如,与其像这样启动userService:

spApp.factory('userService', function(){

将其放入自己的模块

angular.module('spApp.services.user', [])
.factory('userService', function(){

然后,每当您需要在另一个模块中使用userService时,请将其作为需求添加。例如:

var spApp = angular.module('spApp', ['spApp.services.user']);

最新更新