AngularJS: Ошибка при сбое: [$ injector: modulerr] Не удалось создать экземпляр модуля?

Я новичок в AngularJS и работаю над некоторыми документами и учебниками для изучения. Мой вопрос относится к серии видеороликов Egghead, в частности, к этому видео, демонстрирующему, как собрать основной фильтр поиска. Я хотел использовать это в реальном приложении, которое я создаю для друга с небольшим бизнесом по изготовлению свечей, но когда я его модифицировал, чтобы быть ее свечами, а не мстителями (как показано на видео), я получил эту ошибку

Неподготовленная ошибка: [$ injector: modulerr] Не удалось создать модуль myApp из-за:

Ошибка: [$ injector: nomod] Модуль 'myApp' недоступен! Вы либо ошибочно написали имя модуля, либо забыли загрузить его. Если регистрация модуля гарантирует, что вы укажете...

Я скопировал отредактированный (только 3 литых члена в массиве) версию ТОЧНО, что находится в видеоролике в jsfiddle, и обнаружил, что она по-прежнему дает ту же ошибку. (Для справки, демо-версия Egghead находится здесь: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter). Я читал по крайней мере полдюжины подобных вопросов на этом сайте и пытался каждое предлагаемое решение, но ни один из них не избавился от этой ошибки или не вызвал поиск Avengers, который отлично работает в видеоролике, должным образом.

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, ссылка на которую приведена выше из учебника, больше не активна. Я удалил неработающую ссылку. Указанный урок все еще доступен для просмотра.

Ответы

Ответ 1

Попробуйте использовать No Wrap - In Head или Без обертки в теле в вашей скрипке:

Рабочая скрипка: http://jsfiddle.net/Q5hd6/

Объяснение

Angular начинает компиляцию DOM, когда DOM полностью загружен. Вы регистрируете свой код для запуска onLoad (опция onload в скрипте) = > слишком поздно, чтобы зарегистрировать ваш модуль myApp, потому что angular начинает компиляцию DOM и angular видит, что нет модуля с именем myApp и выдает исключение.

Используя Без 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>

Ваш script имеет возможность запускать до того, как angular начнет компиляцию модуля DOM и myApp, который уже создан, когда angular начинает компиляцию DOM.

Ответ 2

Вам нужно играть с опцией загрузки JSFiddle:

установите для параметра < <20 > вместо "onload"

Рабочая скрипка: http://jsfiddle.net/zQv9n/1/

Ответ 3

Для людей, имеющих ту же ошибку с похожим кодом:

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

    });
});

Удаление $(function() {...}); разрешило ошибку.

Ответ 4

Для тех, кто находит эту старую публикацию в Интернете, ища сообщение об ошибке, есть еще одна возможная причина проблемы.

У вас может быть только опечатка в вашем вызове script, даже если вы уже сделали то, что описано в другом отличном ответе. Поэтому проверьте, чтобы вы могли использовать правильное написание в тегах script.

Ответ 5

Мне пришлось изменить файл js, поэтому включить в него функцию "()()()() и" () "в конце строки. Это решило проблему

Ответ 6

выясняется, что я получил эту ошибку, потому что мой запрошенный модуль is not bundled in the minification prosses из-за ошибки орфографии

поэтому убедитесь, что ваш модуль существует в файле minified js (убедитесь, что в нем есть слово)