0

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 ?

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

6 Answers 6

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.

1
  • I get "'dataControl' is not a function, got undefined" error when it finds the module May 2, 2014 at 5:13
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';
});
2
  • 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 May 2, 2014 at 6:15
  • remove that <html ng-app> May 2, 2014 at 6:22
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.

1
  • What <script src =?> did you use ? May 2, 2014 at 5:25
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

1
  • I think thats an error from your local project, review your code again, it should work...
    – TlonXP
    May 2, 2014 at 5:31
1

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}

1

try changing it to:

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.