it-swarm.com.de

AngularJS: Fehler nicht erfasst: [$ injector: modulerr] Modul konnte nicht instanziiert werden?

Ich bin neu bei AngularJS und arbeite mich durch einige Dokumente und Tutorials, um zu lernen. Meine Frage bezieht sich auf Eggheads Videoserie, insbesondere auf dieses Video, das zeigt, wie man einen einfachen Suchfilter zusammenstellt. Ich wollte dies in einer echten App verwenden, die ich für eine Freundin mit einem kleinen Kerzenhersteller baue. Als ich sie jedoch so modifizierte, dass sie eher zu ihren Kerzen als zu den Avengers-Darstellern gehörte (wie im Video gezeigt), bekam ich diesen Fehler :

Nicht abgerufener Fehler: [$ injector: modulerr] Das Modul myApp konnte nicht instanziiert werden, weil

Fehler: [$ injector: nomod] Modul 'myApp' ist nicht verfügbar! Sie haben entweder den Modulnamen falsch geschrieben oder das Laden vergessen. Wenn Sie ein Modul registrieren, stellen Sie sicher, dass Sie ...

Ich habe eine redigierte (nur 3 Darsteller im Array) Version von EXACTLY, die sich in der Video-Demo befindet, in ein jsfiddle-Exemplar kopiert und festgestellt, dass immer noch derselbe Fehler auftritt. (Die Referenz zu Egghead finden Sie hier: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter ). Ich habe bis jetzt mindestens ein halbes Dutzend ähnlicher Fragen auf dieser Website gelesen und versucht, alle angebotenen Lösungen zu testen, aber keiner von ihnen löst diesen Fehler oder führt dazu, dass die Avengers-Suche - was in der Videodemo einwandfrei funktioniert - tatsächlich funktioniert richtig.

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

Einfach ausgedrückt, kann jemand eine Lösung anbieten, die funktioniert und diesen Fehler beseitigt, sowie in einfachem Englisch (nicht im Graduiertenkolleg "Angular Obscurese") erklärt, was ihn (in Kürze) verursacht und was sein muss getan, um es zu vermeiden?

Bearbeiten: Entschuldigungen, aber der jsfiddle-Link, auf den oben im Tutorial verwiesen wird, ist nicht mehr aktiv. Ich habe den defekten Link entfernt. Das erwähnte Tutorial steht weiterhin zur Ansicht zur Verfügung.

18
code-sushi

Versuchen Sie es mit No Wrap-In Head oder No Wrap-In Body deine Geige:

Arbeitsgeige: http://jsfiddle.net/Q5hd6/

Erklärung :

Angular beginnt mit dem Kompilieren des DOM, wenn das DOM vollständig geladen ist . Sie registrieren Ihren Code, um onLoad auszuführen (Onload-Option in Fiddle) => Es ist zu spät, um Ihr myApp -Modul zu registrieren, da angular beginnt, das DOM und = zu kompilieren angular sieht, dass es kein Modul mit dem Namen myApp gibt, und löst eine Ausnahme aus.

Wenn Sie No Wrap-In Head verwenden, sieht Ihr Code folgendermaßen aus:

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

Ihr Skript kann möglicherweise ausgeführt werden, bevor angular mit dem Kompilieren des DOM beginnt, und das myApp -Modul ist bereits erstellt, wenn angular mit dem Kompilieren des DOM beginnt.

48
Khanh TO

Sie müssen mit der JSFiddle-Ladeoption spielen: 

setze es auf "No wrap - in body" anstelle von "onload"

Geige arbeiten: http://jsfiddle.net/zQv9n/1/

10
Cétia

Für Personen, die den gleichen Fehler mit einem ähnlichen Code haben:

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

    });
});

Entfernen von $ (function () {...}); Fehler behoben.

3
L01c

Für Benutzer, die dieses alte Posting im Internet finden, indem sie nach der Fehlermeldung suchen, gibt es eine andere mögliche Ursache des Problems. 

Sie könnten nur einen Tippfehler in Ihrem Aufruf des Skripts haben, selbst wenn Sie die in der anderen hervorragenden Antwort beschriebenen Dinge bereits getan haben. Überprüfen Sie daher, ob Sie die richtige Schreibweise in Ihren Skript-Tags verwenden können.

1
CodeMed

Ich musste die js-Datei ändern, also "function ()" am Anfang und "()" am Ende der Zeile einfügen. Das hat das Problem gelöst

0
Sam Joni

es stellt sich heraus, dass ich diesen Fehler erhalten habe, weil mein Modul is not bundled in the minification prosses wegen Pfadfehlern falsch geschrieben wurde 

stellen Sie daher sicher, dass Ihr Modul in einer minimierten JS-Datei vorhanden ist (suchen Sie nach einem Word, um sicherzugehen)

0