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

25

112

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 <script src="HomeController.js"> before <script src="MyService.js"> I get this error,

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

  • The other is when I put <script src="MyService.js"> before <script src="HomeController.js"> I get the following error,

Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService

My source:

File Index.html:

<!DOCTYPE html>
<html >
    <head lang="en">…</head>
    <body ng-app="myApp">
        …
        <div ng-controller="HomeController">
            <div ng-repeat="item in hello">{{item.id + item.name}}</div>
        </div>

        <script src="Scripts/angular.js"></script>
        <script src="Scripts/angular-route.js"></script>

        <!-- App libs -->
        <script src="app/app.js"></script>    
        <script src="app/services/MyService.js"></script>
        <script src="app/controllers/HomeController.js"></script>
    </body>
</html>

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);
Opuscule answered 17/9, 2014 at 15:58 Comment(1)
Confirm whether you have added your *.controller.js is added in BundleConfig.cs file. This fixes mine.Sublet
U
213

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');.

Ushas answered 17/9, 2014 at 16:6 Comment(1)
This fixed my error too. I mistakenly left angular.module('myApp', ['ui.router']) in 2 different files (app.js and routes.js). Once I removed the array from routes.js it fixed the unit tests.Pressroom
T
64

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

<html ng-app='myApp'>
    <body ng-controller='TextController'>
    ....
    ....
    ....
    <script src="../file.js"></script>
    </body>
</html>
Tetrarch answered 15/1, 2015 at 12:31 Comment(2)
Helped big time. Yeoman tucks the script tags down at the bottom of the index.html of the angular generator... very easy to miss. Thanks for this!Oxalate
ran the same prob. Had to add the corresponding controller.js file in my index page along with other controllersForamen
L
21

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.

Lancelot answered 23/3, 2015 at 16:9 Comment(0)
M
11

Happened to me few times whenever I miss "," between list of injections and function

app.controller('commonCtrl', ['$scope', '$filter',function($scope,$filter) {

}]);
Maulstick answered 30/6, 2015 at 22:28 Comment(1)
Same thing happened to me when missing the "," between the controller name and the list of injections, i.e app.controller('commonCtrl' ['$scope', '$filter',function($scope,$filter) { }]);Fog
M
6

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.

Mcrae answered 7/3, 2015 at 4:5 Comment(0)
S
5

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']);
Shopkeeper answered 26/6, 2015 at 20:10 Comment(0)
V
5

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.

Varitype answered 29/10, 2015 at 9:57 Comment(1)
This happens also with grunt serveScottie
L
5

I got the same error. I defined java script like this

<script src="controllers/home.js" />

then I changed to the this

<script src="controllers/home.js"></script>

After this my problem is solved.

Lesseps answered 10/12, 2015 at 17:47 Comment(0)
C
2

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.

<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>
Conidium answered 3/5, 2017 at 4:4 Comment(0)
T
2

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 <script> tag.

Hope this will help. There are quite many reasons that can lead to this problem.

Turgot answered 11/7, 2017 at 6:33 Comment(0)
M
1

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!

Misconduct answered 6/7, 2015 at 3:41 Comment(0)
F
1

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:

<script src="scripts/app/station/editCtrl.js"></script>
<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>

This is right, works:

<script src="scripts/angular-ui/ui-bootstrap-tpls.js"></script>
<script src="scripts/app/station/editCtrl.js"></script>

So, to fix the error you need first declare all scripts without dependencies, and then scripts that depends on previously declared.

Felice answered 13/7, 2015 at 15:10 Comment(0)
C
1

Try this

    <title>My First Angular App</title>

</head>

<body>

     <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>

    <h3>Adding Simple Controller<h3>        

    <div ng-controller="SimpleController">
        Name:

        <br/>

        <input type = "text" data-ng-model = "name"/> {{name}}

        <br/>

        <ul>    
            <li data-ng-repeat = "cust in customers | filter:name | orderBy:'city'">
                {{cust.name}} - {{cust.city}}
            </li>
        </ul>

    </div>


    <script>

        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'}

                                ]; 
        }

    </script>

</body>

Commotion answered 22/11, 2015 at 13:35 Comment(0)
W
1

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

<html lang="en" ng-app>

But to reference the Angular application by the name I used, I had to use:

index.html (Fixed)

<html lang="en" ng-app="app">
Waugh answered 1/12, 2015 at 21:32 Comment(0)
G
1

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

<script src = "(path of module.js file)"></script>

Then only add

<script src = "(path of controller.js file)"></script>

In the main file.

Gree answered 26/4, 2016 at 0:53 Comment(0)
S
1

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){

}]);
Snoopy answered 13/3, 2017 at 19:15 Comment(0)
S
0

Yes. As many have previously pointed out, I have added the src path to all the controller files in the index.html.

<script src="controllers/home.js"></script>
<script src="controllers/detail.js"></script>
<script src="controllers/login.js"></script>
<script src="controllers/navbar.js"></script>
<script src="controllers/signup.js"></script>

This fixed that error.

Salomesalomi answered 5/6, 2015 at 21:30 Comment(0)
L
0

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.

Langston answered 23/2, 2016 at 12:10 Comment(0)
S
0

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(){

}]);
Serving answered 24/3, 2016 at 16:53 Comment(0)
D
0

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';
}

<div ng-controller="ACTUAL_SPELLING_MyCtrl">
    {{Apple}}
</div>
Deathtrap answered 3/5, 2016 at 21:22 Comment(0)
B
0

Check if your HTML page includes:

  1. angular.min script
  2. app.js
  3. controller JavaScript page

The order the files are included is important. It was my solution to this problem.

Hope this helps.

Bowsprit answered 20/12, 2016 at 16:16 Comment(0)
P
0
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

Pitchstone answered 13/2, 2017 at 5:8 Comment(0)
G
0

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

Gharry answered 29/7, 2018 at 12:32 Comment(0)
U
0

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

Unceremonious answered 5/10, 2018 at 11:59 Comment(0)
H
0

For me the solution was to add a semicolon after one of the functions declared in my HomeController.js

//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");
  };
  
});
Hershel answered 4/1, 2021 at 8:48 Comment(0)

© 2022 - 2024 — McMap. All rights reserved.