web-dev-qa-db-fra.com

AngularJS: Erreur non capturée: [$ injector: modulerr] Impossible d'instancier le module?

Je suis nouveau sur AngularJS et je me débrouille dans des documents et des tutoriels pour apprendre. Ma question fait référence à la série de vidéos d'Egghead, cette vidéo en particulier, montrant comment mettre en place un filtre de recherche de base. Je voulais utiliser cela dans une vraie application que je construis pour un ami avec une petite entreprise de fabrication de bougies, mais lorsque je l'ai modifiée pour qu'elle soit ses bougies plutôt que celle du casting de Avengers (comme démontré dans la vidéo), j'ai eu cette erreur. :

Erreur non capturée: [$ injector: modulerr] Impossible d'instancier le module myApp en raison de:

Erreur: [$ injector: nomod] Le module 'monApp' n'est pas disponible! Vous avez mal orthographié le nom du module ou vous avez oublié de le charger. Si vous enregistrez un module, assurez-vous de spécifier ...

J'ai copié une version rédigée (seulement 3 membres de la distribution dans le tableau) EXACTEMENT du contenu de la démo vidéo dans un fichier jsfiddle et j'ai découvert qu'elle génère toujours la même erreur. (Pour référence, la démo Egghead est ici: http://www.thinkster.io/angularjs/ET1iee6rnm/angularjs-ngfilter ). J'ai lu au moins une demi-douzaine de questions similaires sur ce site et essayé toutes les solutions proposées, mais aucune d'entre elles ne se débarrasse de cette erreur ni ne permet à la recherche Avengers - qui fonctionne très bien dans la démo vidéo - de fonctionner. correctement.

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

En termes simples, quelqu'un peut-il proposer une solution qui fonctionnera et supprimera cette erreur, tout en expliquant en anglais simple (et non au niveau du doctorat "Angular Obscurese") ce qui la cause (en un mot) et ce qui doit être fait pour l'éviter?

Édition: Toutes mes excuses, mais le lien jsfiddle référencé ci-dessus dans le tutoriel n’est plus actif. J'ai enlevé le lien cassé. Le tutoriel mentionné est toujours disponible pour visualisation.

angularjsjsfiddleangularjs-module
18
code-sushi

Essayez d 'utiliser No Wrap - In Head ou No Wrap - In Body dans votre violon: 

Violon de travail: http://jsfiddle.net/Q5hd6/

Explication:

Angular commence à compiler le DOM lorsque ce dernier est entièrement chargé. Vous enregistrez votre code pour exécuter onLoad (option onload dans fiddle) => il est trop tard pour enregistrer votre module myApp car angular commence à compiler le DOM et angular voit qu'il n'y a pas de module nommé myApp et lève une exception.

En utilisant No Wrap-In Head, votre code ressemble à ceci:

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

Votre script a une chance de s'exécuter avant qu'angular ne commence à compiler le DOM et que le module myApp soit déjà créé lorsque angular commence à compiler le DOM.

47
Khanh TO

Vous devez jouer avec l'option de chargement JSFiddle: 

réglez-le sur "No wrap - in body" au lieu de "onload"

Violon de travail: http://jsfiddle.net/zQv9n/1/

10
Cétia

Pour les personnes ayant la même erreur avec un code similaire:

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

    });
});

Supprimer le $ (function () {...}); a résolu l'erreur.

3
L01c

Pour les personnes qui trouvent cet ancien message sur le Web en recherchant le message d'erreur, il existe une autre cause possible du problème. 

Vous pouvez simplement avoir une faute de frappe dans votre appel au script, même si vous avez déjà effectué les tâches décrites dans l'autre excellente réponse. Vérifiez donc que vous pouvez utiliser la bonne orthographe dans vos balises de script.

1
CodeMed

Je devais changer le fichier js, donc inclure "function ()" au début, ainsi que "()" à la fin. Cela a résolu le problème

0
Sam Joni

il s’avère que j’ai eu cette erreur parce que le module demandé is not bundled in the minification prosses était dû à une faute d’orthographe 

alors assurez-vous que votre module existe dans un fichier js minifié (recherchez un mot dans celui-ci pour en être sûr)

0
Basheer AL-MOMANI