Controller not a function got undefined while defining controllers globally

Question

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 amp p1 not 20a 20function 2C 20got 20undefined   Which renders as      Argument  ContactController  is not a function  got undefined   Code   lt  DOCTYPE html gt   lt html ng-app gt   lt head gt       lt script src     angular min js  gt  lt  script gt       lt script type  text javascript  gt          function ContactController  scope                 scope contacts     abcd gmail com    abcd yahoo co in                  scope add   function                      scope contacts push  scope newcontact                    scope newcontact                                                          lt  script gt       lt  head gt    lt body gt           lt h1 gt   modules sample  lt  h1 gt        lt div ng-controller  ContactController  gt          Email  lt input type  text  ng-model  newcontact  gt           lt button ng-click  add    gt Add lt  button gt            lt h2 gt  Contacts  lt  h2 gt           lt ul gt               lt li ng-repeat  contact in contacts  gt    contact    lt  li gt           lt  ul gt           lt  div gt   lt  body gt    lt  html gt

User · Answer

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.

User · Answer

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     abcd gmail com    abcd yahoo co in              scope add   function                  scope contacts push  scope newcontact                scope newcontact                              index html     lt html gt       lt body ng-app  thisApp  ng-controller  ContactController gt                        lt script type  text javascript  src  assets js angular js  gt  lt  script gt           lt script src  app js  gt  lt  script gt       lt  body gt       lt  html gt

User · Answer

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

User · Answer

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

User · Answer

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   lt script src    ordersController js  gt  lt  script gt    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

User · Answer

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

User · Answer

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     abcd gmail com    abcd yahoo co in              scope add   function                  scope contacts push  scope newcontact                scope newcontact                              or  function ContactController  scope         scope contacts     abcd gmail com    abcd yahoo co in          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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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   lt html data-ng-app gt     to    lt html data-ng-app  myApp  gt     worked for me   PSL  has covered this already in his answer above

User · Answer

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    to  function  ControllerProvider       var controllers             globals   true    and just follow the tutorial as-is  and the deprecated global functions just work as controllers

[javascript] Controller not a function, got undefined, while defining controllers globally

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-directive

Examples related to angularjs-scope