AngularJS Beginner is not a function, got undefined

Question

<html>
    <head>
    <script type="text/javascript" src="resources/js/angular.js"></script>
    <script type="text/javascript" src="resources/js/app.js"></script>
    </head>
    <body ng-app>

    <div ng-controller="DatumCtrl">
        <p>{{datum}}</p>
    </div>
    </body>
    </html>

app.js:

var DatumCtrl = function($scope) {
    $scope.datum = new Date();
};

With this I get an error:

"Error: [ng:areq] Argument 'DatumCtrl' is not a function, got undefined.

I have copied tis code from an introductory articel on AngularJS and have no prior experience with AngularJS.

http://stackoverflow.com/questions/26646941/getting-an-error-when-using-ng-controller-in-angularjs-ver-1-3-0/26647015#26647015 this may helps you — Kalhan.Toress, Dec 17 '14 at 09:18
Seems you have almost nothing in your code, did you follow any angular tutorial ? — sam, Dec 17 '14 at 09:18
Since angular v1.3 you can't have global controllers. So I guess you downloaded the latest angular-version but your tutorial uses some 1.2.x version where your code would work just fine. Tip: Drop that tutorial and find an *up-to-date* one. — Yoshi, Dec 17 '14 at 09:31

score 2 · Answer 1 · answered Dec 17 '14 at 09:17

2

To have the controller you need to have the module first:

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

And use : ng-app="MyApp"

answered Dec 17 '14 at 09:17

Bhojendra Rauniyar

83,432
35
168
231

score 1 · Answer 2 · answered Dec 17 '14 at 10:17

This code example goes from Controller Basics Tutorial by Scot Allen and it will throw exception like

"Error: [ng:areq] Argument 'MainController' is not a function, got undefined

So the reason of this that since v1.3 you can't have global controllers

index.html

<!DOCTYPE html>
<html ng-app>

<head>
  <script data-require="angular.js@1.3.6" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular.js"></script>
  <link href="style.css" rel="stylesheet" />
  <script src="script.js"></script>
  <title>{{ 55 * 2}}</title>
</head>

<body ng-controller="MainController">
  <h1> {{message}}</h1>
</body>

</html>

script.js before v1.3

var MainController = function($scope){
  $scope.message = "Hello I am Angular";
};

script.js after v1.3

angular.module('controllerExample', [])
  .controller('MainController', ['$scope', MainController]);

function MainController($scope){
  $scope.message = "Hello I am Angular";
}

and in your index.html

<html ng-app="controllerExample">

see Plunker with solved example

AngularJS Beginner is not a function, got undefined

2 Answers2