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

Я новичок в 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;
}

Проще говоря, может ли кто-нибудь предложить решение, которое будет работать и избавиться от этой ошибки, а также объяснить на простом английском языке (не уровень Ph.D. Angular Obscurese), что вызывает ее (в двух словах) и что нужно сделать, чтобы избегай это?

Изменить: извините, но ссылка jsfiddle, указанная выше из учебника, больше не активна. Я удалил битую ссылку. Упомянутый учебник по-прежнему доступен для просмотра.


person code-sushi    schedule 14.03.2014    source источник
comment
Попробуйте использовать No Wrap — In Head в своей скрипке: jsfiddle.net/Q5hd6   -  person Khanh TO    schedule 14.03.2014
comment
Нагружайте его не в голову, а на конец тела!   -  person gkalpak    schedule 14.03.2014
comment
@ExpertSystem: в этом случае работают и тело, и голова. Я также добавил объяснение в свой ответ.   -  person Khanh TO    schedule 14.03.2014
comment
@ExpertSystem: еще одна вещь: эта опция загрузки применяется к нашему скрипту в окне скрипта, а не к скрипту фреймворка.   -  person Khanh TO    schedule 14.03.2014
comment
@KhanhTO: я знаю, что оба работают, но один - плохая практика (загрузка в голову), другой - хорошая практика (загрузка в тело). Так что между двумя рабочими решениями не стоит поощрять худшее.   -  person gkalpak    schedule 14.03.2014
comment
@ExpertSystem: Это правда, поскольку страница загружается быстрее. Но в случае angular, скорее всего, будет отображаться нескомпилированный DOM. Что-то вроде {{}}   -  person Khanh TO    schedule 14.03.2014
comment
@KhanhTO: И это именно то, для чего можно использовать ng-cloak :)   -  person gkalpak    schedule 14.03.2014
comment
@ExpertSystem: спасибо, я не знал ng-cloak.   -  person Khanh TO    schedule 14.03.2014
comment
давайте продолжим это обсуждение в чате   -  person gkalpak    schedule 14.03.2014
comment
Лолд @Mark Buffalo   -  person Kurai Bankusu    schedule 03.06.2016


Ответы (6)


Попробуйте использовать Без переноса — в голове или Без переноса — в теле в своей скрипке:

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

Пояснение:

Angular начинает компилировать DOM, когда 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, а модуль myApp уже создан, когда angular начнет компилировать DOM.

person Khanh TO    schedule 14.03.2014
comment
Отлично, спасибо за ваш ответ. Тем не менее, я все еще получаю сообщение об ошибке, когда пытаюсь разработать это локально и запустить его в своем браузере. Все, что появляется, это поле ввода, а не таблица. В частности, я получаю две ошибки: -Uncaught ReferenceError: angular не определен kandlepicker.js:1 и -Error: [$injector:unpr] errors.angularjs.org/1.2.14/$injector/. Что я делаю не так? У меня есть ссылка на загрузку скрипта angular непосредственно перед закрывающим тегом ‹/body›, как рекомендовано, и мой пользовательский скрипт в разделе ‹head›. Пробовал другие способы, не идет - person code-sushi; 16.03.2014
comment
Когда я помещаю оба тега script вместе (сначала Angular, затем custom) либо в ‹head›, либо в конце ‹body›, я все еще получаю эту ошибку: -- Ошибка: [$injector:unpr] errors.angularjs.org/1.2.14/$injector/ ----› Я предполагаю, что: docs.angularjs.org/ error/$injector/unpr -- что я должен указать Service. Но что, если он мне на самом деле не нужен? Извините, если это звучит глупо, как я сказал, что я новичок в Angular. Возможно, мои вопросы помогут другим новичкам. :) - person code-sushi; 16.03.2014
comment
@code-sushi: во-первых, угловой скрипт всегда должен быть загружен до того, как будет создан ваш собственный скрипт, иначе будет выдано исключение, угловое не определено. - person Khanh TO; 17.03.2014
comment
@code-sushi: ваш kandlepicker.js должен быть после angular. Также проверьте, вводите ли вы службу в контроллер без ее определения. Если вам не нужна эта служба в вашем контроллере, просто удалите ее. - person Khanh TO; 17.03.2014
comment
Привет, это работает в скрипке, но как решить проблему в html-браузере? - person Dirk; 25.06.2014
comment
@Dirk: как и в примере кода, вы можете запустить свой скрипт в голове сразу после включения angular.js - person Khanh TO; 26.06.2014

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

установите его на "No wrap - in body" вместо "onload"

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

person Jscti    schedule 14.03.2014

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

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

    });
});

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

person L01c    schedule 11.10.2016

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

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

person CodeMed    schedule 26.10.2015

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

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

person Basheer AL-MOMANI    schedule 03.10.2017

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

person Sam Joni    schedule 05.11.2015
comment
Это было в jsfiddle? Вопрос конкретно об этом, поэтому, если это так, не могли бы вы опубликовать ссылку на свою скрипку? Спасибо! - person code-sushi; 06.11.2015
comment
Это работает в jsFiddle без добавления модификации, которую я объяснил, я попробовал ваш код в jsfiddle, и он работает правильно, см. код здесь jsfiddle.net/SaifHarbia/ht4jme7q обратите внимание, что вам нужно выбрать библиотеку Angular и No Wrap-in ‹body› в разделе Frameworks and Extensions. - person Sam Joni; 08.11.2015
comment
Ну да, вы просто повторили первый ответ, предложенный более полутора лет назад Ханом Т.О., выше. В этом и была проблема - используйте no-wrap. - person code-sushi; 13.11.2015