Fatal编程技术网
  • angularjs/
  • AngularJS:Uncaught错误：[$injector:modulerr]未能实例化模块？

AngularJS:Uncaught错误：[$injector:modulerr]未能实例化模块？

angularjs

AngularJS:Uncaught错误：[$injector:modulerr]未能实例化模块？,angularjs,jsfiddle,angularjs-module,Angularjs,Jsfiddle,Angularjs Module,我刚接触AngularJS，正在通过一些文档和教程学习。我的问题是关于Egghead的视频系列，特别是这段视频，它演示了如何组合一个基本的搜索过滤器。我想在我为一个做蜡烛生意的朋友开发的一个真正的应用程序中使用它，但当我将它修改为她的蜡烛而不是复仇者的角色时（如视频中的演示），我得到了以下错误： 未捕获错误：[$injector:modulerr]未能实例化模块myApp，原因是： 错误：[$injector:nomod]模块“myApp”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块

我刚接触AngularJS，正在通过一些文档和教程学习。我的问题是关于Egghead的视频系列，特别是这段视频，它演示了如何组合一个基本的搜索过滤器。我想在我为一个做蜡烛生意的朋友开发的一个真正的应用程序中使用它，但当我将它修改为她的蜡烛而不是复仇者的角色时（如视频中的演示），我得到了以下错误：

未捕获错误：[$injector:modulerr]未能实例化模块myApp，原因是：

错误：[$injector:nomod]模块“myApp”不可用！您要么拼错了模块名，要么忘记加载它。如果注册模块，请确保指定

我将视频演示中的内容复制到JSFIDLE中，发现它仍然会产生相同的错误。（此处是Egghead演示，仅供参考：）。到目前为止，我已经在这个网站上读到了至少六个类似的问题，并尝试了提供的每一个解决方案，但没有一个解决了这个错误，或者导致复仇者搜索（在视频演示中运行良好）真正正常运行

HTML:

简言之，有人能提供一个有效的解决方案，消除这个错误，并用简单的英语（不是博士级别的“角度模糊语”）解释它的原因（简而言之），以及需要采取什么措施来避免它

编辑：很抱歉，但是上面从教程中引用的JSFIDLE链接不再处于活动状态。我已经移除了断开的链接。上面提到的教程仍然可以查看。

您必须使用JSFIDLE加载选项：

将其设置为“
No wrap-in body
”而不是“onload”

工作小提琴：

试着在你的小提琴中使用不缠绕头部或不缠绕身体：

工作小提琴：

说明：

当DOM完全加载时，Angular开始编译DOM。注册代码以运行
onLoad
（小提琴中的onLoad选项）=>注册
myApp
模块为时已晚，因为angular开始编译DOM，angular发现没有名为
myApp
的模块，并引发异常

通过使用无换行符头，您的代码如下所示：

<head>

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>

    <script type='text/javascript'>
      //Your script.
    </script>

</head>


//你的剧本。
您的脚本有机会在angular开始编译DOM之前运行，并且当angular开始编译DOM时，
myApp
模块已经创建。

对于通过搜索错误消息在web上找到此旧帖子的用户，问题的另一个可能原因是

即使你已经完成了另一个优秀答案中描述的事情，你也可以在对脚本的调用中输入一个拼写错误。因此，请检查以确保您可以在脚本标记中使用正确的拼写。

我必须更改js文件，以便在开头包含“function（）”，在结尾行也包含“（）”。这解决了使用类似代码出现相同错误的人的问题：

$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){

    });
});
删除$（函数（）{…}）解决了错误。

结果表明，我出现了此错误，因为由于路径拼写错误，我请求的模块
未捆绑在缩小过程中

因此，请确保您的模块存在于缩小的js文件中（请在其中搜索一个单词以确保）


试着在你的小提琴中使用无缠绕的头部：不要在头部加载，而是在身体的末端加载@专家系统：在这种情况下，身体或头部都起作用。我还在回答中添加了一个解释。@ExpertSystem:还有一件事，加载选项适用于脚本窗口中的脚本，而不是框架脚本。@KhanhTO:这正是ng斗篷的用途：）非常好，感谢您的回复。然而，当我试图在本地开发这个程序并在浏览器中启动它时，仍然会遇到错误。显示的只是输入字段，没有表格。具体来说，我得到了两个错误：-未捕获引用错误：angular未定义kandlepicker.js:1和-Error:[$injector:unpr]。我做错了什么？我有脚本加载参考angular，就在建议的结束标记之前，我的自定义脚本在部分中。尝试了其他方法，没有问题当我将两个脚本标记放在一起（角度第一，自定义第二）时，我仍然会遇到这个错误：-错误：[$injector:unpr]->我由此猜测：-我必须指定一个“服务”。但如果我真的不需要呢？抱歉，如果这听起来很愚蠢，就像我说的我是新手。也许我的问题会对其他新手有所帮助。：）@code sushi：首先，在自定义脚本之前必须始终加载angular脚本，否则将抛出未定义angular的异常。@code sushi:your
kandlepicker.js
应在angular之后。还要检查是否在未定义服务的情况下向控制器注入服务。如果您的控制器中不需要该服务，只需将其删除即可。@Dirk:正如在代码示例中一样，您可以在将angular.js包含在JSFIDLE中后立即在头部运行脚本？这个问题与此相关，所以如果是，你能给你的小提琴贴个链接吗？谢谢这在JSFIDLE中可以工作，没有添加我解释过的修改，我在JSFIDLE中尝试了您的代码，它工作正常，请参见这里的代码注意，您需要在框架和扩展下选择一个角度库，而不需要进行包装。是的，您只是重复了Khanh to在一年半前提供的第一个答案，上面提到。这就是问题所在——不要使用包装。

<head>

    <script type='text/javascript' src='//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.js'></script>

    <script type='text/javascript'>
      //Your script.
    </script>

</head>



$(function(){
    var app = angular.module("myApp", []); 
    app.controller('myController', function(){

    });
});