Controller not defined error in simple AngularJS example

Question

We are doing a comparison between knockout and angular to help make a determination about which to use for binding. Since I'm not a current developer in either, I just wanted to put together a simple single html page (index.html) without multiple views to do this comparison. To make this happen, I viewed a simple jsfiddle regarding a knockout hello world example, copied the source from the page, pasted it in an index.html, changed the script reference paths, and served it up. No problems I was able to start using a knockout app in a single file to start testing.

Tried to do the same thing with Angular and I keep getting errors that make me unsure what the problem is. Here is the example. Can anyone tell me what I'm doing wrong? The jsfiddle example is: http://jsfiddle.net/Hp4W7/637/

Here is the code. The error is below.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Scroll + limitTo - jsFiddle demo</title>

  <script type='text/javascript' src='scripts/angular.js'></script>

  <script type='text/javascript'>//<![CDATA[

                var app = angular.module('app', []);

                function Ctrl($scope) {
                  $scope.tasks = [{id:1,'name':'test1'}, {id:2,'name':'test2'}, {id:3,'name':'test3'}];

                  $scope.removeTask = function(taskId){
                                alert("Task Id is "+taskId);
                  };
                }
                //]]> 

                </script>


</head>
<body ng-app="app">
  <div class="test" ng-controller="Ctrl">
  <div ng-repeat="task in tasks">
   <button ng-click="removeTask(task.id);">remove</button>
  </div>
</div>

</body>


</html>

And here is the error message.

Error: [ng:areq] Argument 'Ctrl' is not a function, got undefined
http://errors.angularjs.org/1.3.0-rc.5/ng/areq?p0=Ctrl&p1=not%20a%20function%2C%20got%20undefined
   at assertArg (http://myhost/angulartest/scripts/angular.js:1609:5)
   at assertArgFn (http://myhost/angulartest/scripts/angular.js:1619:3)
   at Anonymous function (http://myhost/angulartest/scripts/angular.js:8074:9)
   at Anonymous function (http://myhost/angulartest/scripts/angular.js:7251:13)
   at forEach (http://myhost/angulartest/scripts/angular.js:343:11)
   at nodeLinkFn (http://myhost/angulartest/scripts/angular.js:7238:11)
   at compositeLinkFn (http://myhost/angulartest/scripts/angular.js:6746:13)
   at compositeLinkFn (http://myhost/angulartest/scripts/angular.js:6749:13)
   at publicLinkFn (http://myhost/angulartest/scripts/angular.js:6625:30)
   at Anonymous function (http://myhost/angulartest/scripts/angular.js:1488:11)

I'm not sure why people are down voting this. The error message doesn't point to the problem and unless you know about the breaking change made in 1.3, this would be very difficult to research to find. — Matthew Green
– Matthew Green, Commented Oct 22, 2014 at 21:55

Matthew Green · Accepted Answer · 2014-10-22 21:45:38Z

3

This issue is related to a change they made in 1.3 of AngularJS.

You can read the change here at this link https://github.com/angular/angular.js/commit/3f2232b5a181512fac23775b1df4a6ebda67d018.

The idea is that global controllers were very bad form so they disabled that option by default. If you want to enable that ability you have to set $controllerProvider.allowGlobals();. Otherwise you should set up your controller like below:

app.controller("Ctrl", ["$scope", function($scope) {
    //Code
}]);

answered Oct 22, 2014 at 21:45

Matthew Green

10.4k4 gold badges40 silver badges57 bronze badges

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

1 Comment

Michael Witt Over a year ago

I marked yours as the solution, even though I commented below. The new response jumped in while I was trying it out :) Again, thanks.

PzYon · Accepted Answer · 2014-10-22 21:44:57Z

2

Everything is ok, except that the controller isn't registered correctly. You need to do as follows:

var app = angular.module('app', []);

app.controller("Ctrl", function($scope)
{
  // code..
});

answered Oct 22, 2014 at 21:44

PzYon

2,9833 gold badges19 silver badges28 bronze badges

1 Comment

Michael Witt Over a year ago

Your answer was perfect, thanks! For the downvoters, what do you expect from a newbie but newbie questions? :) Cheers.

Collectives™ on Stack Overflow

Controller not defined error in simple AngularJS example

2 Answers 2

1 Comment

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Linked

Related