19

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

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

错误：[$injector:nomod] 模块“myApp”不可用！您要么拼错了模块名称，要么忘记加载它。如果注册一个模块，请确保您指定...

我将视频演示中的内容的编辑（数组中只有 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;
}

简而言之，有人可以提供一个可行的解决方案并消除此错误，并用简单的英语（不是博士级别的“Angular Obscurese”）解释是什么原因导致它（简而言之）以及需要什么做了避免吗？

编辑：抱歉，但是上面从教程中引用的 jsfiddle 链接不再有效。我已删除损坏的链接。提到的教程仍然可以查看。

4

6 回答 6

51

尝试在小提琴中使用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，您的代码如下所示：

<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 开始编译 DOMmyApp时已经创建了模块。

于 2014-03-14T13:55:21.980 回答
10

您必须使用 JSFiddle 加载选项：

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

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

于 2014-03-14T13:45:09.953 回答
3

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

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

    });
});

删除$(function(){ ... }); 解决了错误。

于 2016-10-11T09:36:41.017 回答
1

对于通过搜索错误消息在网络上找到此旧帖子的人来说，问题的另一个可能原因。

即使您已经完成了其他出色答案中描述的事情，您也可能在对脚本的调用中出现拼写错误。因此，请检查以确保您可以在脚本标签中使用正确的拼写。

于 2015-10-26T20:38:24.503 回答
1

原来我收到这个错误是因为我请求的模块is not bundled in the minification prosses由于路径拼写错误

所以请确保您的模块存在于缩小的 js 文件中（请务必在其中搜索一个单词）

于 2017-10-03T15:26:43.173 回答
0

我不得不更改 js 文件，因此在它的开头包含“function()”，并在结尾行包含“()”。这解决了问题

于 2015-11-05T14:03:20.560 回答