CODEWITHSUNDEEP
javascriptangularjs
Einius
Einius

Reputation: 1382

AngularJS Controller is not a function error

I'm getting error when adding ng-controller="HeaderController" to a div.

Error: ng:areq
Bad Argument
Argument 'HeaderController' is not a function, got undefined

my HTML looks like that:

<div ng-app="myApp">
    <div ng-controller="HeaderController">
    </div>
    <div ng-controller="PostController">
    </div>
</div>

Also I include following files:

MyApp.js

var myApp = angular.module('myApp', ['postServices', 'angularFileUpload', 'ngSanitize', 'ui.date', 'bootstrapLightbox', 'profileServices']);

HeaderController.js

myApp.controller('HeaderController', ['$scope', 'PostServices', '$http', function($scope, PostServices, $http) {
    $scope.getBookmarksCount = function() {
        PostServices.getBookmarksCount().then(function(response) {
            if (response.data.status == 'success') {
                $scope.bookmarksCount = response.data.bookmarksCount;
            } else {
                $scope.errorMessage = response.data.message;
            }
        })
    };
}]);

PostController.js beggining of this file looks like:

   myApp.controller('PostController', ['$scope', 'PostServices', '$http', 'FileUploader', 'Lightbox',function($scope, PostServices, $http, FileUploader, Lightbox) {

PostService.js contains a module named postServices and it contains a service PostServices:

angular.module('postServices', [])
    .service('PostServices', ['$http', function($http) {

if I delete ng-controller="HeaderController" everything works fine.

Does anyone knows what could be the problem?

Upvotes: 0

Views: 594

Answers (3)

Ismapro
Ismapro

Reputation: 120

I don't know which version of Angular you use , I took 1.4.0 for my plunk example and try just to limit to the code you provide to see if I recreated the error.

I had to deal more with scripts inclusion order. It created error. The right order in order to make it work is

<link rel="stylesheet" href="style.css">
<script src="//code.angularjs.org/1.4.0/angular.js"></script>
<script src="MyApp.js"></script>  
<script src="PostController.js"></script>
<script src="PostService.js"></script>
<script src="HeaderController.js"></script>

http://plnkr.co/edit/NhzQFmI1s9r98uAMZwYg

So Main point was to defined PostService.js before HeaderController

Upvotes: 0

Guinn
Guinn

Reputation: 1385

In your module you add the postServices without a capital at the start, while you add it in your headercontroller as PostServices. This might mess with the forming of your headercontroller.

Either one of those could be a typo, but it is very important that you inject the service precisely as it is defined (in your .service or .factory) in the ['PostService', bit. So if the service is called: postService, you should inject it in your controller as: ['postService, function(someNameThatDoesntMatter) if its called PostService, inject it as ['PostService', function(someNameThatDoesntMatter)

As I just shown, how you call it afterwards in the function parameter is up to you.

Update

You could create a module for your controllers to fix this. Make sure to inject your postServices in this module aswell. Then inject the controllers module in your myApp module :-) The benefit of working in a structured way like this, is that you can create a structure of including your JS which you can apply on every project you work on.

Upvotes: 1

Raja Jaganathan
Raja Jaganathan

Reputation: 36127

It seems likes

you forget include that HeaderController.js file in index.html.

Make sure your HeaderController.js is loaded properly.

Missing some where in gulp/grunt process.

Upvotes: 0

Related Questions