AngularJS:未捕获错误:[$injector:modulerr]无法示例化模块?

yfwxisqw  于 2023-02-15  发布在  Angular
关注(0)|答案(7)|浏览(165)

我是AngularJS的新手,正在通过一些文档和教程来学习。我的问题是关于Egghead的视频系列,特别是这个视频,演示了如何组装一个基本的搜索过滤器。我想在一个真正的应用程序中使用这个功能,我正在为一个做蜡烛生意的朋友开发一个小应用程序,但是当我把它修改成她的蜡烛而不是复仇者联盟的时候(如演示的视频)我得到了这个错误:

  • 未捕获的错误:[$injector:modulerr]无法示例化模块myApp,原因是:*
  • 错误:[$injector:nomod]模块'myApp'不可用!您可能拼错了模块名称或忘记加载它。如果要注册模块,请确保指定... *

我将视频演示中的内容复制到一个jsfiddle中,发现它仍然会产生相同的错误。(作为参考,Egghead演示在这里:到目前为止,我已经在这个网站上阅读了至少六个类似的问题,并尝试了提供的每一个解决方案,但没有一个能消除这个错误,也没有一个能使复仇者搜索(在视频演示中运行良好)真正正常工作。
超文本:

<div ng-app="myApp">
    <div ng-controller="AvengersCtrl">
        <input type="text" ng-model="search.$" />
        <table>
            <tr ng-repeat="actor in avengers.cast | filter:search">
                <td>{{actor.name}}</td>
                <td>{{actor.character}}</td>
            </tr>
        </table>
    </div>
</div>

Javascript:

var myApp = angular.module('myApp', []);
myApp.factory('Avengers', function () {
    var Avengers = {};
    Avengers.cast = [
        {
        name: "Robert Downey Jr.",
        character: "Tony Stark / Iron Man"
        }, 
        {
        name: "Chris Evans",
        character: "Steve Rogers / Captain America"
        },
        {
        name: "Mark Buffalo",
        character: "Bruce Banner / The Hulk"
        }
    ];
    return Avengers;
})

function AvengersCtrl($scope, Avengers) {
    $scope.avengers = Avengers;
}

简单地说,有没有人能提供一个解决方案,将工作和摆脱这个错误,以及解释在简单的英语(不是phidodd.水平"Angular 模糊")是什么原因(一言以蔽之)和需要做些什么来避免它?
编辑:很抱歉,上面提到的教程中的jsfidle链接不再有效。我已经删除了损坏的链接。提到的教程仍然可以查看。

ars1skjm

ars1skjm1#

尝试在小提琴中使用不包裹琴头不包裹琴身
工作小提琴:http://jsfiddle.net/Q5hd6/

    • 说明**:

Angular在DOM完全加载时开始编译DOM,您注册代码以运行onLoad(fiddle中的onload选项)=〉现在注册myApp模块已经太晚了,因为angular开始编译DOM,并且发现没有名为myApp的模块,并抛出异常。
通过使用No Wrap-In Head,您的代码看起来如下所示:

<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模块。

guykilcj

guykilcj2#

您必须使用JSFiddle加载选项:
将其设置为"No wrap - in body"而不是"onload"
工作小提琴:http://jsfiddle.net/zQv9n/1/

6ovsh4lw

6ovsh4lw3#

对于具有类似代码的相同错误的人:

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

    });
});

正在删除**$(函数(){...});**解决了错误。

sbtkgmzw

sbtkgmzw4#

对于那些通过搜索错误消息在Web上找到这个旧帖子的人来说,还有另一个可能的问题原因。
即使你已经完成了另一个很好的答案中描述的事情,你也可能在调用脚本时出现拼写错误,所以检查一下,确保你在脚本标记中使用了正确的拼写。

enyaitl3

enyaitl35#

原来我得到这个错误是因为我请求的模块is not bundled in the minification prosses由于路径拼写错误
因此,请确保您的模块存在于minified js文件中(请在其中搜索一个单词以确保)

cpjpxq1n

cpjpxq1n6#

我不得不修改js文件,在开头加上“function()”,在最后一行加上“()”,这样就解决了问题

1szpjjfi

1szpjjfi7#

我知道这是一个9年前的问题,我也遇到过同样的错误,我试图将包含AngularJS代码的js文件放在一个目录中,该目录中还有以下文件

我尝试了几件事都没有成功,直到我只是做了一个简单的测试,以移动到该目录之外,隔离文件和工作,我仍然不知道原因。希望这对有人有帮助

相关问题