AngularJS:未捕获的错误:[$injector:modulerr] 无法实例化模块? [英] AngularJS: Uncaught Error: [$injector:modulerr] Failed to instantiate module?

问题描述

我是 AngularJS 的新手，正在通过一些文档和教程来学习.我的问题是关于 Egghead 的视频系列，特别是这个视频，演示了如何组合一个基本的搜索过滤器.我想在一个真正的应用程序中使用它，我正在为一个有小型蜡烛制造业务的朋友构建，但是当我将它修改为她的蜡烛而不是复仇者联盟演员时(如视频中的演示)，我收到了这个错误:

<块引用>

未捕获的错误:[$injector:modulerr] 无法实例化模块 myApp，原因如下:

错误:[$injector:nomod] 模块myApp"不可用！您拼错了模块名称或忘记加载它.如果注册模块，请确保您指定 ...

我将视频演示中的内容的编辑(阵列中只有 3 个演员)版本复制到 jsfiddle 中，发现它仍然产生相同的错误.(作为参考，Egghead 演示在这里:http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter).到目前为止，我已经在这个网站上阅读了至少六个类似的问题，并尝试了提供的所有解决方案，但没有一个解决这个错误或导致复仇者联盟搜索 - 在视频演示中工作正常 - 实际运行正确.

HTML:

<div ng-controller="AvengersCtrl"><输入类型=文本"ng-model="search.$";/><表格><tr ng-repeat="演员 in avengers.cast |过滤器:搜索"><td>{{actor.name}}</td><td>{{actor.character}}</td></tr>

Javascript:

var myApp = angular.module('myApp', []);myApp.factory('复仇者联盟'，函数(){var 复仇者联盟 = {};复仇者联盟.cast = [{名称:小罗伯特唐尼"，角色:托尼·斯塔克/钢铁侠"},{姓名:克里斯·埃文斯"，角色:史蒂夫·罗杰斯/美国队长"},{名称:马克布法罗"，角色:布鲁斯·班纳/绿巨人"}];回归复仇者联盟；})function AvengersCtrl($scope, Avengers) {$scope.avengers = 复仇者联盟；}

简单地说，有人能提供一个解决方案，可以解决这个错误，并用简单的英语解释(不是博士级别的Angular Obscurese")是什么导致它(简而言之)和需要做些什么来避免它?

抱歉，上面从教程中引用的 jsfiddle 链接不再有效.我已经删除了断开的链接.提到的教程仍然可以查看.

解决方案

尝试在你的小提琴中使用 No Wrap - In Head 或 No wrap - in body:>

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

说明:

当 DOM 完全加载时，Angular 开始编译 DOM.您注册您的代码以运行 onLoad(小提琴中的 onload 选项)=> 现在注册您的 myApp 模块为时已晚，因为 angular 开始编译 DOM，而 angular 发现没有名为 myApp 的模块并抛出异常.

通过使用No Wrap - In Head，您的代码如下所示:

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

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

I am new to AngularJS and working my way through some documents and tutorials to learn. My question is in reference to Egghead's video series, this video in particular, demonstrating how to put together a basic search filter. I wanted to use this in a real app I'm building for a friend with a small candle-making business but when I modified it to be her candles rather than the Avengers cast (as demo'd in the video) I got this error:

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

I copied a redacted (only 3 cast members in the array) version of EXACTLY what is in the video demo into a jsfiddle and discovered it still yields the same error. (For reference, the Egghead demo is here: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). I've read at least a half dozen similar questions on this site so far and tried every solution offered, but none of them get rid of this error or cause the Avengers search -- which works fine in the video demo -- to actually function properly.

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

Simply put, can someone offer a solution that will work and get rid of this error, as well as explain in simple English (not Ph.D. level "Angular Obscurese") what causes it (in a nutshell) and what needs to be done to avoid it?

Edit: Apologies, but the jsfiddle link referenced above from the tutorial is no longer active. I have removed the broken link. The tutorial mentioned is still available for viewing.

解决方案

Try using No Wrap - In Head or No wrap - in body in your fiddle:

Working fiddle: http://jsfiddle.net/Q5hd6/

Explanation:

Angular begins compiling the DOM when the DOM is fully loaded. You register your code to run onLoad (onload option in fiddle) => it's too late to register your myApp module because angular begins compiling the DOM and angular sees that there is no module named myApp and throws an exception.

By using No Wrap - In Head, your code looks like this:

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

Your script has a chance to run before angular begins compiling the DOM and myApp module is already created when angular starts compiling the DOM.

这篇关于AngularJS:未捕获的错误:[$injector:modulerr] 无法实例化模块?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！