. Advertisement .
..3..
. Advertisement .
..4..
If you are creating any files in angularjs and facing the warning message “Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined”, don’t close the file or leave it there. We will share effective tips on how to correct this issue and hope you have a good useful lesson for this subject. Click the below to explore this information in the angularjs function.
When does the problem “Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined” happen?
AngularJS is considered as a framework and distributes a file in JavaScript. It also can be added with a script tag to a webpage. AngularJS increases the attributes of HTML with directives and ties up data to HTML by expressions. So, why do you add a file and services to the controller by applying angularjs and the problem occurs. Let’s see the details of this error.
You have 2 issues with the demo: the first problem when you add <script src=”HomeController.js”, this command is added before the <script src=”MyService.js”>.
The warning message is running as follow:
Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined
The second is when you insert <script src=”MyService.js”>, then <script src=”HomeController.js”>. So, the problem is appears here:
Error: [$injector:unpr] Unknown provider: MyServiceProvider <- MyService
When you see the error, you check the source with the binder Index.html below:
<!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>
(function(angular){
'use strict';
var myApp = angular.module('myApp',[]);
myApp.controller('HomeController',function($scope,MyService){
$scope.hello=[];
$scope.hello = MyService.getHello();
});
})(window.angular);
And final is MyService.js command:
(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);
This error is frequently the result of neglecting to declare a Controller or repeatedly declaring a module, which will cause the application to fail to locate the defined component because the prior module definition information will be removed.
Simple solution to deal with the “Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined” problem.
Solution 1: Add the service or file there
To get the right value in angularjs by adding the service or file there, creating a new app or module like:
var myApp = angular.module('myApp',[]);
Note for this module is ignoring the second argument because the designed module already.
var myApp = angular.module('myApp');
When you apply the first method on both of the scripts, you put the previous created module on it. After the first line, insert var myApp = angular.module(‘myApp’); for loading.
Solution 2: Your controllers are specified within script tags
Excepting the solution mentioned above, there is another solution for you to solve the error “Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined”.
At the bottom of index.html, just before the body closing tag, you have to make sure that your controllers are specified within script tags. Look at the following example:
<!-- 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>This should solve your problem, provided that everything is spelled “properly” (the same) on your specific.html, specific.js, and app.js pages.
Conclusion
In general, settling the issue “Error: [ng:areq] Argument ‘HomeController’ is not a function, got undefined” isn’t hard as you thought. That’s right? Because the above way is suggested to you and we are confident you can complete your project promptly. Please let us know if you have any questions or need more assistance. Have an amazing day!
Read more
Leave a comment