Controller not a function, got undefined, while defining controllers globally
Solution 1
With Angular 1.3+ you can no longer use global controller declaration on the global scope (Without explicit registration). You would need to register the controller using module.controller
syntax.
Example:-
angular.module('app', [])
.controller('ContactController', ['$scope', function ContactController($scope) {
$scope.contacts = ["[email protected]", "[email protected]"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}]);
or
function ContactController($scope) {
$scope.contacts = ["[email protected]", "[email protected]"];
$scope.add = function() {
$scope.contacts.push($scope.newcontact);
$scope.newcontact = "";
};
}
ContactController.$inject = ['$scope'];
angular.module('app', []).controller('ContactController', ContactController);
It is a breaking change but it can be turned off to use globals by using allowGlobals
.
Example:-
angular.module('app')
.config(['$controllerProvider', function($controllerProvider) {
$controllerProvider.allowGlobals();
}]);
Here is the comment from Angular source:-
- check if a controller with given name is registered via
$controllerProvider
- check if evaluating the string on the current scope returns a constructor
- if $controllerProvider#allowGlobals, check
window[constructor]
on the globalwindow
object (not recommended)
.....
expression = controllers.hasOwnProperty(constructor)
? controllers[constructor]
: getter(locals.$scope, constructor, true) ||
(globals ? getter($window, constructor, true) : undefined);
Some additional checks:-
Do Make sure to put the appname in
ng-app
directive on your angular root element (eg:-html
) as well. Example:- ng-app="myApp"If everything is fine and you are still getting the issue do remember to make sure you have the right file included in the scripts.
You have not defined the same module twice in different places which results in any entities defined previously on the same module to be cleared out, Example
angular.module('app',[]).controller(..
and again in another placeangular.module('app',[]).service(..
(with both the scripts included of course) can cause the previously registered controller on the moduleapp
to be cleared out with the second recreation of module.
Solution 2
I got this problem because I had wrapped a controller-definition file in a closure:
(function() {
...stuff...
});
But I had forgotten to actually invoke that closure to execute that definition code and actually tell Javascript my controller existed. I.e., the above needs to be:
(function() {
...stuff...
})();
Note the () at the end.
Solution 3
I am a beginner with Angular and I did the basic mistake of not including the app name in the angular root element. So, changing the code from
<html data-ng-app>
to
<html data-ng-app="myApp">
worked for me. @PSL, has covered this already in his answer above.
Solution 4
I had this error because I didn't understand the difference between angular.module('myApp', [])
and angular.module('myApp')
.
This creates the module 'myApp' and overwrites any existing module named 'myApp':
angular.module('myApp', [])
This retrieves an existing module 'myApp':
angular.module('myApp')
I had been overwriting my module in another file, using the first call above which created another module instead of retrieving as I expected.
More detail here: https://docs.angularjs.org/guide/module
Solution 5
I had this problem when I accidentally redeclared myApp
:
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller1', ...);
var myApp = angular.module('myApp',[...]);
myApp.controller('Controller2', ...);
After the redeclare, Controller1
stops working and raises the OP error.
Comments
-
yokks about 4 years
I am writing a sample application using angularjs. i got an error mentioned below on chrome browser.
Error is
Error: [ng:areq] http://errors.angularjs.org/1.3.0-beta.17/ng/areq?p0=ContactController&p1=not%20a%20function%2C%20got%20undefined
Which renders as
Argument 'ContactController' is not a function, got undefined
Code
<!DOCTYPE html> <html ng-app> <head> <script src="../angular.min.js"></script> <script type="text/javascript"> function ContactController($scope) { $scope.contacts = ["[email protected]", "[email protected]"]; $scope.add = function() { $scope.contacts.push($scope.newcontact); $scope.newcontact = ""; }; } </script> </head> <body> <h1> modules sample </h1> <div ng-controller="ContactController"> Email:<input type="text" ng-model="newcontact"> <button ng-click="add()">Add</button> <h2> Contacts </h2> <ul> <li ng-repeat="contact in contacts"> {{contact}} </li> </ul> </div> </body> </html>
-
geckob over 9 yearsHow to check this as suggested? check if a controller with given name is registered via $controllerProvider
-
morph85 over 8 yearsapp.register.controller('TheController', TheController); did the trick for me.
-
papergodzilla over 8 years+1 Interestingly, it seems like visual studio sometimes automatically removes the invocation. I copied an existing js file containing this code; the original had the invocation, the copied file did not.
-
gm2008 over 8 yearsThis is bad practice. As mentioned in PSL's answer, you can do this way:
angular.module('app') .config(['$controllerProvider', function($controllerProvider) { $controllerProvider.allowGlobals(); }]);
-
Thomas over 8 yearsIn my case, I added the module, I added the controller, but I forgot to add the module in the list of module for the app. ` angular.module("app", [HEREYOURMODULE] ...`
-
Phillip Copley about 8 years-1. This is also a great way to ensure that (a) you overwrite this as soon as you upgrade, which will generate needless (and incorrect) reports that "upgrading 1.4.3 to 1.4.4 broke my application!" and/or (b) you don't upgrade your app because "it's hard."