CODEWITHSUNDEEP
angularjs
Michael Witt
Michael Witt

Reputation: 1712

Controller not defined error in simple AngularJS example

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)

Upvotes: 1

Views: 1652

Answers (2)

Matthew Green
Matthew Green

Reputation: 10401

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

Upvotes: 3

PzYon
PzYon

Reputation: 2993

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

Upvotes: 2

Related Questions