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

查看:450
本文介绍了AngularJS:未捕获的错误:[$喷油器:modulerr]无法实例模块?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我是新来AngularJS并通过一些文件和教程来学习工作我的方式。我的问题是在参考Egghead的系列视频,这段视频特别演示了如何把一个基本的搜索过滤器。我想在一个真正的应用程序我建立与小蜡烛制造业务的朋友用这个,但是当我修改了它是她的蜡烛,而不是复仇者投(如demo'd视频)我得到这个错误

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:

未捕获的错误:[$喷油器:modulerr]未能实例化模块对myApp由于:

错误:[$喷油器:NOMOD]模块'对myApp'不可!你要么拼写错误的模块名称,或忘了加载它。如果注册一个模块,确保指定...

我复制一个绝密的究竟什么是视频演示成的jsfiddle版本(仅3投数组成员),并发现它仍然得到同样的错误。 (作为参考,理论家演示是在这里: http://www.thinkster.io/angularjs / ET1iee6rnm / angularjs-ngfilter )。我到目前为止阅读本网站至少有半打类似的问题,并想尽解决方案提供,但他们没有摆脱这种错误或导致复仇者搜索 - 这在视频演示工作正常 - 实际功能正常。

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:

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

简单地说,有人可以提供一个解决方案,将工作,摆脱这种错误,以及在简单的英语(非博士级角Obscurese),是什么原因呢(简言之),并解释了什么需要做才能避免呢?

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?

编辑:道歉,但是从上面的教程引用的jsfiddle链接不再有效。我已经删除了断开的链接。提到本教程仍然是可供观赏。

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:

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

说明

角开始编译DOM当DOM的满载。注册您code运行的onLoad (在小提琴的onload选项)=>为时已晚来注册你的对myApp 模块,因为角开始编译DOM和角度看,有对myApp 无模块命名,并抛出一个异常。

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.

使用的不换行 - 头后,您的code是这样的:

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>

您脚本有机会的角度开始编译DOM和对myApp 模块已经创建之前运行时的角度开始编译DOM。

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:未捕获的错误:[$喷油器:modulerr]无法实例模块?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆