Controller not a function, got undefined, while defining controllers globally

Javascript Angularjs Angularjs Directive Angularjs Scope

Javascript Problem Overview

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>

Javascript Solutions

Solution 1 - Javascript

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 = "";

        };
    }]);

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 global window 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 place angular.module('app',[]).service(.. (with both the scripts included of course) can cause the previously registered controller on the module app to be cleared out with the second recreation of module.

Solution 2 - Javascript

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 - Javascript

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>

<html data-ng-app="myApp">

worked for me. @PSL, has covered this already in his answer above.

Solution 4 - Javascript

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 - Javascript

I just migrate to angular 1.3.3 and I found that If I had multiple controllers in different files when app is override and I lost first declared containers.

I don't know if is a good practise, but maybe can be helpful for another one.

var app = app;
if(!app) {
	app = angular.module('web', ['ui.bootstrap']);
}
app.controller('SearchCtrl', SearchCtrl);

Solution 6 - Javascript

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.

Solution 7 - Javascript

Really great advise, except that the SAME error CAN occur simply by missing the critical script include on your root page

example:

page: index.html

   np-app="saleApp"

Missing

<script src="./ordersController.js"></script>

When a Route is told what controller and view to serve up:

 .when('/orders/:customerId', {
     controller: 'OrdersController',
     templateUrl: 'views/orders.html'
 })

So essential the undefined controller issue CAN occur in this accidental mistake of not even referencing the controller!

Solution 8 - Javascript

This error might also occur when you have a large project with many modules. Make sure that the app (module) used in you angular file is the same that you use in your template, in this example "thisApp".

app.js

angular
.module('thisApp', [])
    .controller('ContactController', ['$scope', function ContactController($scope) {
        $scope.contacts = ["[email protected]", "[email protected]"];

        $scope.add = function() {
            $scope.contacts.push($scope.newcontact);
            $scope.newcontact = "";

        };
    }]);

index.html

  <html>
    <body ng-app='thisApp' ng-controller='ContactController>
         ...
        <script type="text/javascript" src="assets/js/angular.js"></script>
        <script src="app.js"></script>
    </body>
    </html>

Solution 9 - Javascript

If all else fails and you are using Gulp or something similar...just rerun it!

I wasted 30mins quadruple checking everything when all it needed was a swift kick in the pants.

Solution 10 - Javascript

If you're using routes (high probability) and your config has a reference to a controller in a module that's not declared as dependency then initialisation might fail too.

E.g assuming you've configured ngRoute for your app, like

angular.module('yourModule',['ngRoute'])
.config(function($routeProvider, $httpProvider) { ... });

Be careful in the block that declares the routes,

.when('/resourcePath', { 
templateUrl: 'resource.html',
controller: 'secondModuleController' //lives in secondModule
});

Declare secondModule as a dependency after 'ngRoute' should resolve the issue. I know I had this problem.

Solution 11 - Javascript

I was getting this error because I was using an older version of angular that wasn't compatible with my code.

Solution 12 - Javascript

These errors occurred, in my case, preceeded by syntax errors at list.find() fuction; 'find' method of a list not recognized by IE11, so has to replace by Filter method, which works for both IE11 and chrome. refer https://github.com/flrs/visavail/issues/19

Solution 13 - Javascript

This error, in my case, preceded by syntax error at find method of a list in IE11. so replaced find method by filter method as suggested https://github.com/flrs/visavail/issues/19

then above controller not defined error resolved.

Solution 14 - Javascript

I got the same error while following an old tutorial with (not old enough) AngularJS 1.4.3. By far the simplest solution is to edit angular.js source from

function $ControllerProvider() {
  var controllers = {},
      globals = false;

function $ControllerProvider() {
  var controllers = {},
      globals = true;

and just follow the tutorial as-is, and the deprecated global functions just work as controllers.

Content Type	Original Author	Original Content on Stackoverflow
Question	yokks	View Question on Stackoverflow
Solution 1 - Javascript	PSL	View Answer on Stackoverflow
Solution 2 - Javascript	rogueleaderr	View Answer on Stackoverflow
Solution 3 - Javascript	Prakash Tiwari	View Answer on Stackoverflow
Solution 4 - Javascript	Jake Stewart	View Answer on Stackoverflow
Solution 5 - Javascript	Franzi	View Answer on Stackoverflow
Solution 6 - Javascript	Daniel Flippance	View Answer on Stackoverflow
Solution 7 - Javascript	Tom Stickel	View Answer on Stackoverflow
Solution 8 - Javascript	Patrick	View Answer on Stackoverflow
Solution 9 - Javascript	sigmapi13	View Answer on Stackoverflow
Solution 10 - Javascript	H.Rabiee	View Answer on Stackoverflow
Solution 11 - Javascript	Dean Sha	View Answer on Stackoverflow
Solution 12 - Javascript	HydTechie	View Answer on Stackoverflow
Solution 13 - Javascript	HydTechie	View Answer on Stackoverflow
Solution 14 - Javascript	MKaama	View Answer on Stackoverflow