2016-11-21 26 views
16

私はAngular JSを初めて使用しており、1.6バージョンを使用しています。角度コントローラが登録されていないエラー

私はこのapptest.jsスクリプトがあります。

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

(function(){ 
    "use strict"; 
    myApp.controller("productController", function($scope, $http) 

    { 
     $http.get('data/data.json').then(function(prd) 
     { 
      $scope.prd = prd.data; 
     }); 
    }); 
}); 

をそして、ここに私のdata/data.jsonデータ:

[ 
    { 
    "id":"1", 
    "title":"20 Foot Equipment Trailer", 
    "description":"2013 rainbow trailer 20 feet x 82 inch deck area, two 5,000 lb axels, electric brakes, two pull out ramps, break away box, spare tire.", 
    "price":6000, 
    "posted":"2015-10-24", 
    "contact": { 
     "name":"John Doe", 
     "phone":"(555) 555-5555", 
     "email":"[email protected]" 
    }, 
    "categories":[ 
     "Vehicles", 
     "Parts and Accessories" 
    ], 
    "image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg", 
    "views":213 
    } 
] 

今ここでは、私はNG-アプリとngのコントローラを指定し、私のhtmlページです:

<body ng-app="myApp" ng-controller="productController"> 
<div class="row"> 
    <nav class="navbar navbar-default"> 
     <div class="container-fluid"> 
     <!-- Brand and toggle get grouped for better mobile display --> 
     <div class="navbar-header"> 
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      </button> 
      <a class="navbar-brand" href="#">Brand</a> 
     </div> 

     <!-- Collect the nav links, forms, and other content for toggling --> 
     <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Add <span class="sr-only">(current)</span></a></li> 
      </ul> 
      <form class="navbar-form navbar-left"> 
      <div class="form-group"> 
       <input type="text" class="form-control" placeholder="Search"> 
      </div> 
      <button type="submit" class="btn btn-default">Submit</button> 
      </form> 
     </div><!-- /.navbar-collapse --> 
     </div><!-- /.container-fluid --> 
    </nav> 

    <div class="col-sm-4" ng-repeat="product in prd"> 
     <div class="panel panel-primary"> 
      <div class="panel-heading">{{product.title}}</div> 
      <div class="panel-body"> 
       <img ng-src="{{product.image}}"> 
       {{product.price | currency}} 
       {{product.description}} 
      </div> 
      <div class="panel-footer">a</div> 
     </div> 
    </div> 
</div> 

<script src="angular/angular.js"></script> 
<script src="scripts/appTest.js"></script> 
</body> 

まだ私にとって新しい、次のエラーが発生しています:

angular.js:14239 Error: [$controller:ctrlreg] The controller with the name 'productController' is not registered. http://errors.angularjs.org/1.6.0-rc.0/ $controller/ctrlreg?p0=productController

助けていただければ幸いです。

+5

あなたの生命維持が起動されていない、あなたは '(関数(にそれを変更する必要があります:私はNG-アプリはそれ自体であるところを見てきましたが、私はのようなアプリを識別することを余儀なくされたいくつかの状況では3210 ){()}(); ''() 'をクロージャー関数に追加して呼び出され、コントローラが登録されるようにする必要があります。 –

+0

今私たちがなぜ角度でIIFEを使用するのか説明できますか?それは私にはぼやけです。 – droidnation

+1

それはあなたが生命維持を使用したら、すべての宣言は、その範囲に制限され、実際には、生命維持にはすぐに呼び出される関数の式を意味し、その目的は、ルート 'window'オブジェクトから、コードの分離のために主にあるjavascriptの問題です。スコープの分離に関する基本的なことです。私はあなたの助けに感謝 –

答えて

12

そのため、Immediately Invoked Function Expressionです。あなたは以下のようにそれを変更する必要があります。

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

(function(app){ 
    "use strict"; 
    app.controller("productController", function($scope, $http){ 
    $http.get('data/data.json').then(function(prd){ 
     $scope.prd = prd.data; 
    }); 
    }); 
})(myApp); 
+0

コンテキストはありませんて、myAppアプリ –

+0

は、はい、私はあなたが 'App'代わりに'パラメータでmyApp'はそれがないのスペルを間違えていると思うのですか? –

+2

いいえ、私はミスはそれを綴るませんでした。私は引数として 'myApp'を渡しているので、自己呼び出し関数の中で任意の変数エイリアスを使うことができます。 – ranakrunal9

5

それはインデックスページで参照だけでなく、私のコントローラがありませんでした、私の場合は

<script src=".../productController.js"></script> 
+0

別の質問に同じ答えを投稿しないでください - > **のhttp://stackoverflow.com/questions/41460755/error-controllerctrlreg-a-controller-with-this-name-is-not-registered**それに加えて、発電機やイサキを使用して、全体のポイントは、指導のための – davidkonrad

+0

感謝をindex.htmlにするためのスクリプトを手動で挿入を取り除くことです...私は私の愚かな誤りだった手差し –

2

、私はindex.htmlで、ファイルをインポートし、私の問題を解決します名前はstartupController(大文字小文字を区別)です。StartupController(大文字)

+0

を取り除くためにがぶ飲みを使用しました!ありがとうございました! – tinyCoder

-1

このエラーは、$ controller()サービスが、登録されている文字列コントローラ。コントローラサービスは、ngControllerディレクティブやコンポーネント/ディレクティブ/ルート定義(コントローラプロパティの文字列を使用する場合)などを介して直接的に、または間接的に呼び出されている可能性があります。サードパーティのモジュールもこのエラーの

原因をすることができ$コントローラ()サービスとコントローラをインスタンス化することができます:コントローラへ

1 - あなたの参照は、タイプミスがあります。たとえば、ngControllerディレクティブ属性、コンポーネント定義のコントローラプロパティ、または$ controller()への呼び出しなどです。あなたは、コントローラ(いずれもModule.controllerも$ controllerProvider.register(経由)を登録していない

2 -

3 - あなたが登録したコントローラ名にタイプミスがあり

参照:。。https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController

私の場合は
1

は、この同じエラーで、私はこのようなNG-アプリディレクティブでアプリモジュールを識別するために失敗しました:

<div class="row" ng-app> 

<div class="row" ng-app="myApp">

関連する問題