web-dev-qa-db-ja.com

AngularJS：不明なエラー：[$ 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;
}

簡単に言えば、誰かが動作してこのエラーを取り除くソリューションを提供できますか？また、簡単な英語（博士号レベル「Angular Obscurese」ではありません）で何が原因か（簡単に言うと）それを避けるために行われましたか？

編集：申し訳ありませんが、上記のチュートリアルのjsfiddleリンクは無効になりました。壊れたリンクを削除しました。前述のチュートリアルは引き続き表示できます。

angularjsjsfiddleangularjs-module
18
code-sushi

あなたはJSFiddleローディングオプションで遊ぶ必要があります：

No wrap - in bodyの代わりに「"onload"」に設定します

作業フィドル： http://jsfiddle.net/zQv9n/1/

10
Cétia

同様のコードで同じエラーが発生する場合：

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

    });
});

$（function（）{...}）;を削除すると、エラーが解決しました。

3
L01c

エラーメッセージを検索してWeb上でこの古い投稿を見つけた人には、問題の別の原因が考えられます。

他の優れた回答で説明されていることを既に行っていたとしても、スクリプトの呼び出しにタイプミスがあった可能性があります。したがって、スクリプトタグで正しいスペルを使用できることを確認してください。

1
CodeMed

要求されたモジュールis not bundled in the minification prossesパスのスペルミスが原因

そのため、モジュールが縮小されたjsファイルに存在することを確認してください（モジュール内でWordを検索してください）

1
Basheer AL-MOMANI

Jsファイルを変更する必要がありました。そのため、先頭に「function（）」、最後の行に「（）」を含める必要がありました。問題を解決しました

0
Sam Joni