javascript - Uncaught Error : [$injector:modulerr] Failed to instantiate module with LABJS

Question

我在加载 Angular 应用程序时不断收到此错误。在 Chrome 中刷新几次，我的应用程序将运行，但 IE 和 FF 是不行的。

错误将我链接到此 error page但我真的不明白它说的是什么。

我正在使用 LabsJS 加载我的应用程序包括 Controller 和服务。

// 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>

我想发布更多代码，但我不知道从哪里开始，而且对于 angular，一切都在多个文件中。我通过github上传的.

Answer 1

你应该 manually bootstrap您的应用，因为您使用异步脚本加载器:

$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加载所有脚本后发生。

来自文档:

Automatic Initialization

Angular initializes automatically upon DOMContentLoaded event or when the angular.js script is evaluated if at that time document.readyState is set to 'complete'. At this point Angular looks for the ng-app directive which designates your application root...

Manual Initialization

If you need to have more control over the initialization process, you can use a manual bootstrapping method instead. Examples of when you'd need to do this include using script loaders or the need to perform an operation before Angular compiles a page.