AngularJS error argument FirstCtrl is not a function got undefined

Question

I noticed the same question was asked a few times here  I tried so solve it but nothing helps    I m following this tutorial with the egghead videos   But when I get at the section of Controllers and Sharing data between controllers  I can t get it to work   When I run it with Chrome  I get this error in the console        argument  FirstCtrl  is not a function  got undefined      I really don t know what s wrong  The code is the same from in the tutorial   HTML   lt  DOCTYPE html gt   lt html ng-app gt    lt head gt       lt title gt AngularJS Tutorials  Controllers lt  title gt       lt link rel  stylesheet  href  mystyle css  gt       lt script src  http   code angularjs org 1 2 0-rc 2 angular min js  gt  lt  script gt    lt  head gt    lt body gt       lt div ng-app    gt          lt div ng-controller  FirstCtrl  gt                 lt h1 gt    data message     world    lt  h1 gt               lt div class    data message    gt                 Wrap me in a foundation component             lt  div gt          lt  div gt       lt  div gt       lt script type  text javascript  src  main js  gt  lt  script gt    lt  body gt   lt  html gt     main js  function FirstCtrl  scope       scope data     message   Hello

User · Answer

I got exactly the same error message and in my case it turned out i didn t list the controller JS file  e g  first-ctrl js  in my index html

User · Answer

I just did this tutorial and followed  gion 13 answer  Still did not work  Solved it by making my ng-app name in the index identical to the one in my js file  Exactly identical  even the quotes  So    lt div ng-app  myapp  gt       lt div ng-controller  FirstCtrl  gt    and the js    angular module  myapp        controller  FirstCtrl  function  scope         scope data   message  hello            Weird how the ng-app has to be identical but the ng-controller doesn t

User · Answer

I had two controllers with the same name defined in two different javascript files   Irritating that angular can t give a clearer error message indicating a namespace conflict

User · Answer

This can happen if you have gulp misconfigured to add your angular app code more than once  In my case  this was in index js  and it was adding it as part of the directory of js files  globbed in gulp  before and after my controller declarations  Once I added an exclusion for index js not to be minified and injected the second time  my app began to work  Another tip if any of the solutions above don t address your problem

User · Answer

Watch your letter casing too  I spent a good hour chasing this bug    lt section id  forgotpwd  ng-controller  ForgotPwdController  gt    while I name the controller  angular      module  app        controller  ForgotpwdController   ForgotpwdController     They all should be consistently named  in this case ForgotpwdController with lower case p

User · Answer

i faced this issue but i was able to correct this issue by renaming the controller  please have a try on it   ctrlSub execSummaryDocuments   function

User · Answer

In my case  this message comes from  forgotten dependency injection in main module

User · Answer

Me too faced the same issue  But the problem was I forgot to list the module in the list of modules the ng-app depends on

User · Answer

remove ng-app    from   lt div ng-app    gt    and simply make it   lt div gt

User · Answer

sometimes something wrong in the syntax of the code inside the function throws this error  Check your function correctly  In my case it happened when I was trying to assign Json fields with values and was using colon   to make the assignment instead of equal sign

User · Answer

Another nice one  Accidentally redefining modules  I copy pasted stuff a little too eagerly earlier today and ended up having a module definition somewhere  that I overrode with my controller definitions      controllers js - dependencies in one place  perfectly fine angular module  my controllers       dependencies         Then in my definitions  I was supposed to reference it like so      SomeCtrl js - grab the module  add the controller angular module  my controllers     controller  SomeCtrl   function                     What I did instead  was      Do not try this at home      SomeCtrl js angular module  my controllers           lt -- redefined module  no harm done yet    controller  SomeCtrl   function                       SomeOtherCtrl js angular module  my controllers           lt -- redefined module - SomeCtrl no longer accessible    controller  SomeOtherCtrl   function                     Note the extra bracket in the call to angular module

User · Answer

I am not sure about this tutorial but I had the same problem when I forgot to include the file into grunt gulp minimization process    grunt initConfig     uglify        my target          files             dest output min js     src input1 js    src missing controller js                           Hope that helps

User · Answer

You must name your ng-app  giving your app a namespace  simply using ng-app is not enough   Instead of    lt html ng-app gt        You will need something like this instead    lt html ng-app  app  gt        Then  like so   var app   angular module  app       controller  ActionsController   function  scope

User · Answer

You have 2 unnamed ng-app directives in your html  Lose the one in your div     Update Let s try a different approach  Define a module in your js file and assign the ng-appdirective to it  After that  define the controller like an ng component  not as a simple function      lt div ng-app  myAppName  gt     lt  -- or what s the root node of your angular app -- gt    and the js part     angular module  myAppName            controller  FirstCtrl   function  scope              scope data    message   Hello              Here s an online demo that is doing just that   http   jsfiddle net FssbL 1

User · Answer

Firstly - If the module name is not defined  in the JS you will not be able to access the module and link the controller to it   You need to provide the module name to angular module   there is a difference in using defining module as well 1  angular module  firstModule      2  angular module  firstModule    1 - one is to declare the new module  firstModule  with no dependency added in second arguments  2 - This is to use the  firstModule  which is initialized somewhere else and you re using trying to get the initialized module and make modification to it

User · Answer

I have faced this issue and it fixed with following way    first remove ng-app from    lt html ng-app gt   add name of ng-app to myApp    lt div ng-app  myApp  gt   add this line of code before function     angular module  myApp       controller  FirstCtrl  FirstCtrl      final look of script   angular module  myApp       controller  FirstCtrl  FirstCtrl    function FirstCtrl  scope        scope data    message   Hello

[javascript] AngularJS error: 'argument 'FirstCtrl' is not a function, got undefined'

Examples related to javascript

Examples related to angularjs