私は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
助けていただければ幸いです。
あなたの生命維持が起動されていない、あなたは '(関数(にそれを変更する必要があります:私はNG-アプリはそれ自体であるところを見てきましたが、私はのようなアプリを識別することを余儀なくされたいくつかの状況では3210 ){()}(); ''() 'をクロージャー関数に追加して呼び出され、コントローラが登録されるようにする必要があります。 –
今私たちがなぜ角度でIIFEを使用するのか説明できますか?それは私にはぼやけです。 – droidnation
それはあなたが生命維持を使用したら、すべての宣言は、その範囲に制限され、実際には、生命維持にはすぐに呼び出される関数の式を意味し、その目的は、ルート 'window'オブジェクトから、コードの分離のために主にあるjavascriptの問題です。スコープの分離に関する基本的なことです。私はあなたの助けに感謝 –