未捕获的错误：[$injector:modulerr] 无法实例化模块 MyApp 由于：错误答案

【问题标题】：Uncaught Error: [$injector:modulerr] Failed to instantiate module MyApp due to:Error未捕获的错误：[$injector:modulerr] 无法实例化模块 MyApp 由于：错误
【发布时间】：2016-09-16 01:46:15
【问题描述】：

当我使用 jsfiddle 学习 Angular 时，我遇到了一个类似打击的错误：

未捕获的错误：[$injector:modulerr] 无法实例化模块 MyApp 由于：

错误：[$injector:nomod] 模块“MyApp”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册模块，请确保将依赖项指定为第二个参数。

谢谢@Khanh TO's answer，我解决了这个问题。

但我不明白为什么我不能将代码放入 dom 就绪事件中。

所以同样的错误是这样发生的：

<!DOCTYPE html>
<html lang="en" ng-app="MyApp">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
    <script>
        document.addEventListener('DOMContentLoaded',function() {
            var app = angular.module('MyApp',[]);
        }, false);
    </script>
</head>
<body>
    <div>
        Hello {{val}}
    </div>
</body>
</html>

所以我有两个问题

1：我应该如何理解Angular在DOM完全加载时开始编译DOM。

2：由于Angular在DOM完全加载时开始编译DOM，所以上面的代码应该可以正常运行，但是为什么会出现错误。

提前感谢您的帮助。

【问题讨论】：

stackoverflow.com/help/someone-answers

标签： angularjs

【解决方案1】：

您的代码在执行时不会创建角度模块。它只是添加了一个事件侦听器，该侦听器将在将来创建它。

假设 Angular 也监听 DOMContentLoaded 开始编译，现在我们有两个事件处理程序监听相同的事件。
假设一个特定的浏览器按照它们附加的顺序执行处理程序。由于 angular 是在您的脚本之前加载的，因此它在您的脚本之前附加了处理程序。因此 Angular 的事件处理程序将首先触发并开始编译，但此时该模块不存在。只有在之后执行事件处理程序时才会创建该模块。因此它会引发错误。

您应该编写在执行时创建 angular 模块的脚本，以便在执行脚本并且DOM 准备好时，它就可以使用了。

【讨论】：

【解决方案2】：

您在 DOMContentLoaded 上添加事件侦听器以创建 Angular 模块，但 Angular 添加事件侦听器以便在有“ng-app”时自动引导；

关键是事件'DOMContentLoaded'触发时，你之前的角度执行回调，所以它找不到名为'MyApp'的模块。

你应该做的是把你的代码直接放在标签中，像这样：

<script>
    var app = angular.module('MyApp',[]);
</script>

但是，最好手动初始化

https://docs.angularjs.org/guide/bootstrap

【讨论】：