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 ?

There is a third and lately recommended way, the "controller as" syntax. — elclanrs
– elclanrs, Commented May 2, 2014 at 5:12

Ritesh Waghela · Accepted Answer · 2014-05-02 05:12:16Z

4

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.

answered May 2, 2014 at 5:12

Ritesh Waghela

3,7272 gold badges23 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2469515 Over a year ago

I get "'dataControl' is not a function, got undefined" error when it finds the module

Nidhish Krishnan · Accepted Answer · 2014-05-02 06:18:42Z

1

Try using the following

Working Demo

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';
});

edited May 2, 2014 at 6:18

answered May 2, 2014 at 5:57

Nidhish Krishnan

20.8k6 gold badges67 silver badges78 bronze badges

2 Comments

user2469515 Over a year ago

I updated the main post with the new code that I tried with, "Error: Argument 'dataControl' is not a function, got undefined" was the error it was throwing

Nidhish Krishnan Over a year ago

remove that <html ng-app>

Shivaraj · Accepted Answer · 2014-05-02 05:17:34Z

1

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.

answered May 2, 2014 at 5:17

Shivaraj

6133 silver badges10 bronze badges

1 Comment

user2469515 Over a year ago

What <script src =?> did you use ?

Community · Accepted Answer · 2017-05-23 11:58:53Z

1

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?

Globally defined AngularJS controllers and encapsulation

edited May 23, 2017 at 11:58

CommunityBot

11 silver badge

answered May 2, 2014 at 5:18

TlonXP

3,4853 gold badges28 silver badges36 bronze badges

1 Comment

TlonXP Over a year ago

I think thats an error from your local project, review your code again, it should work...

gkalpak · Accepted Answer · 2014-05-02 05:24:58Z

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 (e.g. 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:

E.g. {prop = val} instead of {prop: val} or {p1:v1; p2:v2} instead of {p1:v1, p2:v2}}

Zaheer Ahmed · Accepted Answer · 2014-05-02 05:29:39Z

1

try changing it to:

.controller('dataControl', function($scope) {
   //more code
 });

answered May 2, 2014 at 5:29

Zaheer Ahmed

28.7k12 gold badges77 silver badges113 bronze badges

Collectives™ on Stack Overflow

AngularJS - Difference between creating controllers

6 Answers 6

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

6 Answers 6

1 Comment

2 Comments

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related