Question

我是AngularJS的新手，并通过一些文档和教程来学习。我的问题是参考Egghead的视频系列，特别是这个视频，演示如何组合一个基本的搜索过滤器。我想在一个真实的应用程序中使用它我为一个有小型蜡烛制造业务的朋友建立但是当我将它修改为她的蜡烛而不是复仇者联盟（在视频中作为演示＆＃39; d）我收到了这个错误：

未捕获错误：[$ injector：modulerr]由于以下原因无法实例化模块myApp：

错误：[$ injector：nomod]模块＆＃39; myApp＆＃39;不可用！您要么错误拼写了模块名称，要么忘记加载它。如果注册模块，请确保指定...

我将视频演示中的一个编辑（在数组中只有3个演员）版本复制到了一个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;
}

简单地说，有人可以提供一个可以解决这个错误的解决方案，并且可以用简单的英语（不是博士级别和＃34; Angular Obscurese＆＃34;）解释导致它的原因（在简而言之）以及需要采取哪些措施来避免它？

编辑：道歉，但上面引用的教程中的jsfiddle链接不再有效。我删除了断开的链接。提到的教程仍可供查看。

Answer 1

尝试在小提琴中使用 No Wrap - In Head 或 No wrap-in body ：

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

<强>解释：

当DOM 完全加载时，Angular开始编译DOM。您注册代码以运行onLoad（小提琴中的onload选项）=＆gt;注册myApp模块已经太晚了，因为angular开始编译DOM，而angular看到没有名为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模块。

Answer 2

你必须使用JSFiddle加载选项：

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

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

Answer 3

对于使用相似代码具有相同错误的人：

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

    });
});

删除 $（function（）{...}）; 解决了错误。

Answer 4

对于通过搜索错误消息在网络上发现此旧帖子的人来说，还有另一个可能的原因。

即使您已经完成了另一个优秀答案中描述的内容，您也可能在编写脚本时遇到拼写错误。因此，请检查以确保您可以在脚本标记中使用正确的拼写。

Answer 5

我不得不更改js文件，因此要在其开头包含“function（）”，并在结束行中包含“（）”。这解决了问题

Answer 6

事实证明我收到此错误是因为路径拼写错误导致我请求的模块is not bundled in the minification prosses

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

AngularJS：未捕获错误：[$ injector：modulerr]无法实例化模块？

6 个答案: