AngularJS - Difference between creating controllers
Question
I am new to AngularJS. When i am creating a controller, I have seen two examples which show how to do it differently. How ever the one that most show is the way to do it doesnt work.
The issue with the first one, is that it either can't find the module, or it cant find the function. And it ends up just as {{type}} {{name}}. How ever if i try on plnkr then the first one works.
'dataControl' is not a function, got undefined
Is the error i am getting
If i have my html as this.
<html ng-app>
<head>
</head>
<body ng-app="docsBindExample">
<script src="../bower_components/angular/angular.min.js"> </script>
<script src="../scripts/controllers/main.js"></script>
<div ng-controller="dataControl">
<select id="selected" ng-model="type">
<option>Total Revenue</option>
<option>Total Expenditure</option>
<option>Total Number of Events</option>
<option>Amount of Mail</option>
<option>Average Delivery Times</option>
<option>Critical Routes</option>
</select>
{{type}}
{{data}}
<ul>
<li ng-repeat="values in data">
{{values.dataName}}
{{values.dataValue}}
</li>
</ul>
</div>
</body>
</html>
And then the first controller, that doesnt work.
angular.module('docsBindExample', [])
.controller('dataControl', ['$scope', function($scope) {
$scope.name = 'Value Is here';
}]);
Secondly, the other controller that does work
function dataControl ($scope) {
$scope.name = 'Value Is here';
}
Is there any draw back from using the second ?
6 answers
solution1
4 2014-05-02 05:12:16
There is no any such drawback using the second approach. However the first approach is quite convenient one for the big applications as you will be defining your modules and registering controllers, filters etc against your modules. The reason behind your first approach is not working is may be you have not defined docsBindExample module. Trying doing this:
var docsBindExample = angular.module('docsBindExample', []);
and then your controller definition.
solution2
1 2014-05-02 05:17:34
Syntactically both works perfect but the first approach is recommended than the second one. In first approach the controller will be attached to that module and is been a good practice for building an application.
For more details visit this link
https://docs.angularjs.org/guide/controller
And there is no error when I executed your code.
solution3
1 2014-05-02 05:18:02
Your code is working for me!!!!
Check: http://plnkr.co/edit/hrkSDOinTcMEmPLcttut
Maybe this links from Stackoveflow works for you!!!
AngularJS - different ways to create controllers and services, why?
solution4
1 2014-05-02 05:24:58
The first is definitely the recommended way (if nothing else because it does to polute the global object).
I haven't tried it myself, but I am pretty sure you are going to run into trouble when your application becomes more complex (with more than 1 modules and/or external dependencies).
The error you get is probably due to some JS error (eg a syntax error) which csuses the dataControl to fail registering as a controller.
Unfortunately, such errors are annoyingly undescriptive and hard to track down.
I suggest commenting out all the code inside the controller definition and then uncomment block by nlock until you find the problematic line.
For me, more than a few times, such errors where caused by a wrong object declaration:
Eg {prop = val} instead of {prop: val} or {p1:v1; p2:v2} {p1:v1; p2:v2} instead of {p1:v1, p2:v2}
solution5
1 2014-05-02 05:29:39
try changing it to:
.controller('dataControl', function($scope) {
//more code
});
solution6
1 ACCPTED 2014-05-02 05:57:04
Try using the following
html
<div ng-app="docsBindExample">
<div ng-controller="dataControl">
<select id="selected" ng-model="type">
<option>Total Revenue</option>
<option>Total Expenditure</option>
<option>Total Number of Events</option>
<option>Amount of Mail</option>
<option>Average Delivery Times</option>
<option>Critical Routes</option>
</select>
{{type}}
{{data}}
<ul>
<li ng-repeat="values in data">
{{values.dataName}}
{{values.dataValue}}
</li>
</ul>
</div>
</div>
script
var app = angular.module('docsBindExample', []);
app.controller('dataControl', function ($scope) {
$scope.name = 'Value Is here';
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.