角度控制器未注册错误
[英] Angular controller is not registered error
本文介绍了角度控制器未注册错误的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是 Angular JS 的新手，我正在使用它的 1.6 版本.
我有这个 apptest.js 脚本:
var myApp = angular.module("myApp", []);(功能(){严格使用"；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 足部器材预告片","描述":"2013 年彩虹拖车 20 英尺 x 82 英寸甲板面积，两个 5,000 磅轴，电动刹车，两个拉出坡道，分离箱，备胎.",价格":6000,"发表":"2015-10-24",接触": {"name":"约翰·多伊","电话":"(555) 555-5555","电子邮件":"johndoe@gmail.com"},类别":[车辆"，零件和附件"],"图片": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg",意见":213}]
现在这是我指定 ng-app 和 ng-controller 的 html 页面:
<div class="row"><nav class="navbar navbar-default"><div class="container-fluid"><!-- 品牌和切换被分组以获得更好的移动显示--><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">切换导航</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span><a class="navbar-brand" href="#">Brand</a>
<!-- 收集导航链接、表单和其他用于切换的内容--><div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"><ul class="nav navbar-nav"><li class="active"><a href="#">添加<span class="sr-only">(current)</span></a></li>;<form class="navbar-form navbar-left"><div class="form-group"><input type="text" class="form-control" placeholder="Search">
<button type="submit" class="btn btn-default">提交</button></表单></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}}">{{产品价格 |货币}}{{产品描述}}
<div class="panel-footer">a</div>
<script src="angular/angular.js"></script><script src="scripts/appTest.js"></script>
我仍然收到以下错误，这对我来说是新的:
<块引用>angular.js:14239 错误:[$controller:ctrlreg] 带有名称productController"未注册.http://errors.angularjs.org/1.6.0-rc.0/$controller/ctrlreg?p0=productController
感谢任何帮助.
解决方案
这是因为你的立即调用函数表达式.你必须像下面那样改变它:
var myApp = angular.module("myApp", []);(功能(应用程序){严格使用"；app.controller("productController", function($scope, $http){$http.get('data/data.json').then(function(prd){$scope.prd = prd.data;});});})(我的应用程序);
I am new to Angular JS and I am using the 1.6 version of it.
I have this apptest.js script:
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;
});
});
});
And here my data/data.json data:
[
{
"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":"johndoe@gmail.com"
},
"categories":[
"Vehicles",
"Parts and Accessories"
],
"image": "http://www.louisianasportsman.com/classifieds/pics/p1358549934434943.jpg",
"views":213
}
]
Now here is my html page where I specified the ng-app and ng-controller:
<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>
I am still getting the following error which is new for me:
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
Any help is appreciated.
解决方案
Its because of your Immediately Invoked Function Expression. you have to change it like below :
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);
这篇关于角度控制器未注册错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
