Angularjs Error ng areq Argument HomeController is not a function got undefined

Question

This is my demo using angularjs  for creating a service file  and adding service to a controller   I have two problems with my demo    One is when I put  lt script src  HomeController js  gt  before  lt script src  MyService js  gt  I get this error       Error   ng areq  Argument  HomeController  is not a function  got undefined    The other is when I put  lt script src  MyService js  gt  before  lt script src  HomeController js  gt  I get the following error       Error    injector unpr  Unknown provider  MyServiceProvider  lt - MyService   My source   File Index html    lt  DOCTYPE html gt   lt html  gt       lt head lang  en  gt     lt  head gt       lt body ng-app  myApp  gt                       lt div ng-controller  HomeController  gt               lt div ng-repeat  item in hello  gt   item id   item name   lt  div gt           lt  div gt            lt script src  Scripts angular js  gt  lt  script gt           lt script src  Scripts angular-route js  gt  lt  script gt            lt  -- App libs -- gt           lt script src  app app js  gt  lt  script gt               lt script src  app services MyService js  gt  lt  script gt           lt script src  app controllers HomeController js  gt  lt  script gt       lt  body gt   lt  html gt    File HomeController js    function angular        use strict        var myApp   angular module  myApp            myApp controller  HomeController  function  scope MyService                scope hello              scope hello   MyService getHello               window angular     File MyService js    function angular        use strict        var myApp   angular module  myApp            myApp service  MyService   function              var hello      id 1 name  cuong                 id 2 name  nguyen             this getHello   function                return hello                         window angular

User · Answer

Also ensure that your controllers are defined within script tags toward the bottom of your index.html just before the closing tag for body.

 <!-- build:js({.tmp,app}) scripts/scripts.js -->
    <script src="scripts/app.js"></script>
    <script src="scripts/controllers/main.js"></script>
    <script src="scripts/controllers/Administration.js"></script>
    <script src="scripts/controllers/Leaderboard.js"></script>
    <script src="scripts/controllers/Login.js"></script>
    <script src="scripts/controllers/registration.js"></script>

provided everything is spelled "correctly" (the same) on your specific.html, specific.js and app.js pages this should resolve your issue.

User · Answer

I also encountered this same error and the fix for me was to include my child module in the main module array   var myApp   angular module  myApp     ngRoute    childModuleName

User · Answer

In my case  I was missing the name of the Angular application in the html file   For example  I had included this file to be start of my application code  I had assumed it was being ran  but it wasn t   app module js   function           use strict        angular          module  app                Other dependencies here                              However  when I declared the app in the html I had this   index html   lt html lang  en  ng-app gt    But to reference the Angular application by the name I used  I had to use   index html  Fixed    lt html lang  en  ng-app  app  gt

User · Answer

I had similar issue  The fix was ensure that your ctrollers are not only defined within script tags toward the bottom of your index html just before the closing tag for body but ALSO validating that they are in order of how your folder is structured    lt script src  scripts app js  gt  lt  script gt   lt script src  scripts controllers main js  gt  lt  script gt   lt script src  scripts controllers Administration js  gt  lt  script gt   lt script src  scripts controllers Leaderboard js  gt  lt  script gt   lt script src  scripts controllers Login js  gt  lt  script gt   lt script src  scripts controllers registration js  gt  lt  script gt

User · Answer

This creates a new module app   var myApp   angular module  myApp         While this accesses an already created module  notice the omission of the second argument    var myApp   angular module  myApp      Since you use the first approach on both scripts you are basically overriding the module you previously created   On the second script being loaded  use var myApp   angular module  myApp

User · Answer

Try this                      lt title gt My First Angular App lt  title gt    lt  head gt    lt body gt         lt script src  https   ajax googleapis com ajax libs angularjs 1 4 8 angular min js  gt  lt  script gt        lt h3 gt Adding Simple Controller lt h3 gt                lt div ng-controller  SimpleController  gt          Name            lt br  gt            lt input type    text  data-ng-model    name   gt    name             lt br  gt            lt ul gt                   lt li data-ng-repeat    cust in customers   filter name   orderBy  city   gt                    cust name   -   cust city                lt  li gt           lt  ul gt        lt  div gt         lt script gt           var angularApp   angular module  angularApp                angularApp controller  SimpleController       scope   SimpleController             function SimpleController  scope                          scope customers                                          name  Nikhil Mahirrao   city  Pune                                         name  Kapil Mahire   city  Pune                                         name  Narendra Mahirrao   city  Phophare                                         name  Mithun More   city  Shahada                                                        lt  script gt    lt  body gt

User · Answer

My controller file was cached as empty  Clearing the cache fixed it for me

User · Answer

I was getting the error because i had added the controller script before the script where i had defined the corresponding module in the app  First add the script   lt script src     path of module js file   gt  lt  script gt    Then only add   lt script src     path of controller js file   gt  lt  script gt    In the main file

User · Answer

Yes  As many have previously pointed out   I have added the src path to all the controller files in the index html     x000D   x000D   lt script src  controllers home js  gt  lt  script gt  x000D   lt script src  controllers detail js  gt  lt  script gt  x000D   lt script src  controllers login js  gt  lt  script gt  x000D   lt script src  controllers navbar js  gt  lt  script gt  x000D   lt script src  controllers signup js  gt  lt  script gt  x000D   x000D   x000D    This fixed that error

User · Answer

Obviously that previous posts are useful  but any of above are not helpful in my case  The reason was in wrong sequence of loading scripts  For example  in my case  controller editCtrl js depends on  uses  ui-bootstrap-tpls js  so it should be loaded first  This caused an error    lt script src  scripts app station editCtrl js  gt  lt  script gt   lt script src  scripts angular-ui ui-bootstrap-tpls js  gt  lt  script gt    This is right  works    lt script src  scripts angular-ui ui-bootstrap-tpls js  gt  lt  script gt   lt script src  scripts app station editCtrl js  gt  lt  script gt    So  to fix the error you need first declare all scripts without dependencies  and then scripts that depends on previously declared

User · Answer

Error  ng areq Bad Argument has gotten me a couple times because I close the square bracket too soon   In the BAD example below it is closed incorrectly after   state  when it should actually go before the final parenthese    BAD   sampleApp controller  sampleApp      scope     state    function  scope   state          GOOD   sampleApp controller  sampleApp      scope     state   function  scope   state

User · Answer

Check if your HTML page includes      angular min script app js   controller JavaScript page     The order the files are included is important  It was my solution to this problem   Hope this helps

User · Answer

In my situation this error appeared when I didn t declare function within an array argument    The one with error   taskAppControllers controller  MainMenuCtrl          The fixed one   taskAppControllers controller  MainMenuCtrl    function

User · Answer

I experienced this error once  My problem was that I wasn t adding the FILE NAME WHERE IS MY FUNCTION js   so my file html never found where my function was     Once I add the  file js  I resolved the problem    lt html ng-app  myApp  gt       lt body ng-controller  TextController  gt                                  lt script src     file js  gt  lt  script gt       lt  body gt   lt  html gt

User · Answer

I also experienced this error but in my case it was because of controller naming convention  I declared controller   QuestionController  in  state but in controller definition I declared it like   yiiExamApp controller  questionController        but it should be  yiiExamApp controller  QuestionController        hope that helps to people facing this error because of this stupid mistake I wasted 4hour in identifying it

User · Answer

sampleApp controller  sampleApp      scope     state   function  scope   state     Same thing for me  comma     before function helped me in fixing the issue -- Error  ng areq Bad Argument

User · Answer

I also got this error    I had to add my new controller to routing information    src js app js  angular module  Lillan        ngRoute      mobile-angular-ui      Lillan controllers Main       I added my controller to make it look like   angular module  Lillan        ngRoute      mobile-angular-ui      Lillan controllers Main      Lillan controllers Growth       Cheers

User · Answer

Also check for spelling mistakes   var MyApp   angular module  AppName       MyApp controller  WRONG SPELLING MyCtrl      scope   MyControllerCtrl   function MyControllerCtrl  scope       var vm    scope     vm Apple    Android       lt div ng-controller  ACTUAL SPELLING MyCtrl  gt        Apple    lt  div gt

User · Answer

If ALL ELSE fails and your running locally on the MEAN stack like me with gulp   just stop and serve again  I was pulling my hear out meticulously checking everything from all of your posts to no avail till I simply re-ran gulp serve

User · Answer

I got the same error  I defined java script like this   lt script src  controllers home js    gt    then I changed to the this   lt script src  controllers home js  gt  lt  script gt    After this my problem is solved

User · Answer

I accidentally moved my HomeController js out of the directly  where it was expected   Putting it again on original location   After that my website started to load pages automatically every second  I was even unable to look at the error  So i cleared the browser cache  It solved the problem

User · Answer

I had the same problem  but 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

Happened to me few times whenever I miss     between list of injections and function  app controller  commonCtrl      scope     filter  function  scope  filter

User · Answer

I also encountered this problem in my project  It eventually worked after I inserted the my-controller js into my karma conf js file  with the  lt script gt  tag     Hope this will help  There are quite many reasons that can lead to this problem

User · Answer

For me the solution was to add a semicolon after one of the functions declared in my HomeController js  x000D   x000D    Corrected code is   app controller  HomeController   function  scope   http   log        scope demo1   function          console log  In demo          Here i forgot to add the semicolon       scope demo2   function          console log  In demo                x000D   x000D   x000D

[javascript] Angularjs: Error: [ng:areq] Argument 'HomeController' is not a function, got undefined

Examples related to javascript

Examples related to angularjs

Examples related to angularjs-service