web-dev-qa-db-ja.com

キャッチされないエラー：モジュール 'myApp'は使用できません！ （AngularJS）

angularチュートリアルに取り組んでいますが、開始時に問題が発生します。myAppモジュールをロードするとエラーが発生します。チュートリアルで説明したように、これはコントローラーを作成する3つの方法の1つです。

これが私が取り組んでいるチュートリアルの印刷画面です： Creating controllers in tutorials

Webページを更新すると、Chrome console：

Uncaught Error: [$injector:modulerr] Failed to instantiate module myApp due to:
Error: [$injector:nomod] Module 'myApp' is not available! You either misspelled the module name or forgot to load it. If registering a module ensure that you specify the dependencies as the second argument.

これは私のHTMLファイルです

  <html ng-app="myApp">
        <head>
        </head>
        <body>
            <h1>Hello world!</h1>   

            <div ng-controller="MainController">
                {{ 2+2 }}
                <br>
                {{ val }}
            </div>
            <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js"></script>
            <script src="app.js">
        </body>
    </html>

これは私のapp.jsファイルです

var myApp = angular.module('myApp', []);

var MainController = function($scope){
    $scope.val = "Main controller variable value"
}

それで私の問題は何ですか？私はそれを理解することはできません。

前もって感謝します

javascripthtmlangularjsangularjs-directiveangularjs-controller
8
Valor_

モジュール「myApp」は利用できません！モジュール名のスペルを間違えたか、ロードするのを忘れました。モジュールを登録する場合は、2番目の引数として依存関係を指定してください。

元の問題は、無効なスクリプトタグが原因です。基本的に、スクリプトタグは閉じられていません。ブラウザがapp.jsファイルをダウンロードするには、スクリプトタグを閉じる必要があります。スクリプトタグは自己終了しないため、終了タグが必要です。

<script src="app.js">

する必要があります

<script src="app.js"></script>

これを修正すると、別のエラーが発生します。

[ng：areq]引数 'MainController'は関数ではなく、未定義になりました

最新のangularバージョンを使用しているため、つまり、1.3.x以上の場合は、.controllerコンストラクトを使用してコントローラーを手動で登録する必要があります。 詳細については、こちらを参照してください） 。

注-スクリーンショットは1.2.0（必ずしも明示的なコントローラー登録を必要としない）を使用していることを示しているため、少し混乱しますが、質問のスニペットは1.4.xを示しています

9
PSL

controllerをangularモジュールmyAppに登録する必要があります。

App.js

var myApp = angular.module('myApp', []);
myApp.controller('MainController', MainController );
var MainController = function($scope){
    $scope.val = "Main controller variable value"
}

基本的にあなたがやっていたことは正しいですが、そのコードは古いバージョンのAngularJSに続いています。コントローラーを宣言した方法はコントローラーAs関数として知られているだけで、$controllerProviderのallowGlobals()メソッドを有効にする必要があります。以下のコードを追加するとAngular 1.3 + allowGlobals()メソッドが無効になるため、オンにしてコードを機能させることができますが、これを行う方法はお勧めしません。

Config

myApp.config(['$controllerProvider',
  function($controllerProvider) {
    $controllerProvider.allowGlobals();
  }
]);

同じを参照 SO Answer ここに

5
Pankaj Parkar

これを試して：

myApp.controller ("MainController",[$scope, function ($scope){
      $scope.val = "Main controller variable value"
}]);

ng-controllerディレクティブは、MyAppモジュールでMainControllerを検索します。

2
9ers Rule