AngularJS：未捕获错误：[$inject：modulerr]未能实例化模块？

发布时间：2020-12-17 08:12:41 所属栏目：安全来源：网络整理

导读：我是AngularJS的新手，并通过一些文档和教程来学习。我的问题是参考Egghead的视频系列，特别是这个视频，展示了如何组合一个基本的搜索过滤器。我想在一个真正的应用程序中使用我正在为一个小型蜡烛生意的朋友建立的朋友，但是当我修改为蜡烛而不是复仇者演

我是AngularJS的新手，并通过一些文档和教程来学习。我的问题是参考Egghead的视频系列，特别是这个视频，展示了如何组合一个基本的搜索过滤器。我想在一个真正的应用程序中使用我正在为一个小型蜡烛生意的朋友建立的朋友，但是当我修改为蜡烛而不是复仇者演员(在视频中演示)时，我收到了这个错误：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:

Error: [$injector:nomod] Module ‘myApp’ is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify …

我将视频演示中的编辑(数组中只有3个演员)版本的EXACTLY复制到jsfiddle中，并发现它仍然产生相同的错误。 (为参考，Egghead演示如下：http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter)。到目前为止，我已经阅读了至少六个类似的问题，并尝试了所有提供的解决方案，但没有一个可以摆脱这个错误，或者导致复仇者搜索 – 视频演示中的工作正常 – 实际运行正常。

HTML：

<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;
}

简单地说，有人可以提供一个可以解决这个错误的解决方案，并且以简单的英语解释(不是Ph.D.级别的“Angular Obscurese”)导致它的原因(简而言之)，需要什么做了避免吗？

编辑：抱歉，但从教程上面引用的jsfiddle链接已不再活跃。我已经删除了断开的链接。提到的教程仍然可以查看。

尝试使用无包装 – 头或不包裹在你的小提琴身上：

工作小提琴：http://jsfiddle.net/Q5hd6/

说明：

当DOM完全加载时，Angular开始编译DOM。你注册你的代码来运行onLoad(在fiddle中的onload选项)=>注册您的myApp模块为时已晚，因为角度开始编译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>

您的脚本有机会在角度开始编译DOM之前运行，并且在角度开始编译DOM时已经创建了myApp模块。

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!