I am new to Angular JS and I am using the 1.6 version of it.
我是Angular JS的新手,我正在使用它的1.6版本。
I have this apptest.js
script:
我有这个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;
});
});
});
And here my data/data.json
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":"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:
现在这是我的html页面,我在其中指定了ng-app和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
angular.js:14239错误:[$ controller:ctrlreg]名称为“productController”的控制器未注册。 http://errors.angularjs.org/1.6.0-rc.0/$controller/ctrlreg?p0=productController
Any help is appreciated.
任何帮助表示赞赏。
5 个解决方案
#1
15
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);
#2
7
i import the file, in index.html
and my problem solved,
我在index.html导入文件,我的问题解决了,
<script src=".../productController.js"></script>
#3
2
In my case, it was missing reference in index page as well as my controller name was startupController
(notice lower case s) and I was trying to register it with StartupController
(upper case s)
在我的情况下,它在索引页面中缺少引用以及我的控制器名称是startupController(注意小写s),我试图用StartupController注册它(大写s)
#4
2
In my case, with this same error, I failed to identify the app module in the ng-app directive like this:
在我的情况下,由于同样的错误,我无法在ng-app指令中识别app模块,如下所示:
<div class="row" ng-app>
In some circumstances I've seen where ng-app is by itself but I was forced to identify the app like:
在某些情况下,我已经看到ng-app本身就在哪里,但我*识别应用程序,如:
<div class="row" ng-app="myApp">
#5
-1
This error occurs when the $controller() service is called with a string that does not match any of the registered controllers. The controller service may have been invoked directly, or indirectly, for example through the ngController directive, or inside a component / directive / route definition (when using a string for the controller property). Third-party modules can also instantiate controllers with the $controller() service
使用与任何已注册的控制器不匹配的字符串调用$ controller()服务时,会发生此错误。控制器服务可能已直接或间接调用,例如通过ngController指令,或在组件/指令/路由定义内(当使用字符串作为控制器属性时)。第三方模块还可以使用$ controller()服务实例化控制器
Causes for this error can be:
导致此错误的原因可能是:
1- Your reference to the controller has a typo. For example, in the ngController directive attribute, in a component definition's controller property, or in the call to $controller().
1-您对控制器的引用有拼写错误。例如,在ngController指令属性中,在组件定义的控制器属性中,或在对$ controller()的调用中。
2- You have not registered the controller (neither via Module.controller nor $controllerProvider.register().
2-您尚未注册控制器(既不通过Module.controller也不通过$ controllerProvider.register()。
3- You have a typo in the registered controller name.
3-注册的控制器名称中有拼写错误。
ref: https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController
ref:https://docs.angularjs.org/error/$controller/ctrlreg?p0 = GreetingController
#1
15
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);
#2
7
i import the file, in index.html
and my problem solved,
我在index.html导入文件,我的问题解决了,
<script src=".../productController.js"></script>
#3
2
In my case, it was missing reference in index page as well as my controller name was startupController
(notice lower case s) and I was trying to register it with StartupController
(upper case s)
在我的情况下,它在索引页面中缺少引用以及我的控制器名称是startupController(注意小写s),我试图用StartupController注册它(大写s)
#4
2
In my case, with this same error, I failed to identify the app module in the ng-app directive like this:
在我的情况下,由于同样的错误,我无法在ng-app指令中识别app模块,如下所示:
<div class="row" ng-app>
In some circumstances I've seen where ng-app is by itself but I was forced to identify the app like:
在某些情况下,我已经看到ng-app本身就在哪里,但我*识别应用程序,如:
<div class="row" ng-app="myApp">
#5
-1
This error occurs when the $controller() service is called with a string that does not match any of the registered controllers. The controller service may have been invoked directly, or indirectly, for example through the ngController directive, or inside a component / directive / route definition (when using a string for the controller property). Third-party modules can also instantiate controllers with the $controller() service
使用与任何已注册的控制器不匹配的字符串调用$ controller()服务时,会发生此错误。控制器服务可能已直接或间接调用,例如通过ngController指令,或在组件/指令/路由定义内(当使用字符串作为控制器属性时)。第三方模块还可以使用$ controller()服务实例化控制器
Causes for this error can be:
导致此错误的原因可能是:
1- Your reference to the controller has a typo. For example, in the ngController directive attribute, in a component definition's controller property, or in the call to $controller().
1-您对控制器的引用有拼写错误。例如,在ngController指令属性中,在组件定义的控制器属性中,或在对$ controller()的调用中。
2- You have not registered the controller (neither via Module.controller nor $controllerProvider.register().
2-您尚未注册控制器(既不通过Module.controller也不通过$ controllerProvider.register()。
3- You have a typo in the registered controller name.
3-注册的控制器名称中有拼写错误。
ref: https://docs.angularjs.org/error/$controller/ctrlreg?p0=GreetingController
ref:https://docs.angularjs.org/error/$controller/ctrlreg?p0 = GreetingController