19

私は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 リンクはアクティブではなくなりました。リンク切れを削除しました。上記のチュートリアルは引き続き表示できます。

4

6 に答える 6

51

No Wrap - In HeadまたはNo wrap - in bodyをフィドルで使用してみてください。

作業フィドル: http://jsfiddle.net/Q5hd6/

説明:

DOM が完全にロードされると、Angular は DOM のコンパイルを開始します。実行するコードを登録します(フィドルの onload オプション) => angular が DOM のコンパイルを開始し、angular が名前付きのモジュールがないことを確認して例外をスローするため、モジュールonLoadを登録するには遅すぎます。myAppmyApp

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 のコンパイルを開始する前にスクリプトを実行する機会があり、myAppangular が DOM のコンパイルを開始するときにモジュールが既に作成されています。

于 2014-03-14T13:55:21.980 に答える
10

JSFiddle 読み込みオプションで遊ぶ必要があります:

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

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

于 2014-03-14T13:45:09.953 に答える
3

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

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

    });
});

$(function(){ ... });の削除 エラーを解決しました。

于 2016-10-11T09:36:41.017 に答える
1

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

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

于 2015-10-26T20:38:24.503 に答える