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

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

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






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

Solutions/Answers:

Solution 1:

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

Solution 2:

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>

Solution 3:

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.

Solution 4:

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

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

}]);

Solution 5:

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.

Solution 6:

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