0

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?

Improve this question
3
  • is HeaderController.js included in your html ? Commented Jun 10, 2015 at 13:41
  • the question says that the file is included Commented Jun 10, 2015 at 13:42
  • You should check dependencies in both controller. I think you should remove that dependencies one by one & check which dependency is causing the problem, in this way you get proper solution or either you can upload full code here to review. Commented Jun 10, 2015 at 14:30

3 Answers 3

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

7 Comments

Update my question with PostController.js header. PostServices shouldn't be a problem. But despite that I tried that to make sure and I still get the error
there is a module called postServices and it has a service called PostServices
So the PostController is working with the service injected, but the header controller isn't?
yes exactly. I don't even change the files included just adding ng-controller="HeaderController" to the div tag
What happens if you change the order of including? e.g, header controller in front of postcontroller?
|
0

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

Improve this answer

Comments

0

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.

Improve this answer

4 Comments

I didn't. I've double checked it. and also checked the source of the page. the file is included just fine
The question says that the file is included. If you want to clarify that, please do it in a comment and not in an answer.
Is it included after the module is created?
yes. includes goes as follow: MyApp.js PostController.js HeaderController.js and other services files.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.