Angular error: 'argument 'Controller' is not a function, got undefined'

Question

I'm guessing there must be something obvious I have missed, this is the second angular app I am building and I have never had this issue before..

Seems both of my controllers are receiving this error. I have confirmed that controllers.js gets loaded and console.log(angcomControllers) does return an object. Other than that I am lost.

index.html:

<!doctype html>
<html class="no-js" lang="en" data-ng-app="angcomApp">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Foundation</title>
    <link rel="stylesheet" href="stylesheets/app.css" />

    <!--Library/Framework JS-->
    <script src="bower_components/jquery/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>

    <!--script src='https://cdn.firebase.com/v0/firebase.js'></script>
    <script src='https://cdn.firebase.com/libs/angularfire/0.5.0/angularfire.min.js'></script-->

    <!--App JS-->
    <script src="js/app.js"></script>
    <script src="js/animations.js"></script>
    <script src="js/controllers.js"></script>
    <script src="js/filters.js"></script>
    <script src="js/services.js"></script>
     <script src="js/directives.js"></script>
  </head>
  <body>

    <div ng-view class="view-frame"></div>

  </body>
</html>

app.js

'use strict';

var angcomApp = angular.module('angcomApp',[
    'ngResource',
    'ngRoute',

    'angcomControllers',
    'angcomServices',
]);

angcomApp.config(['$routeProvider', function($routeProvider) {

        $routeProvider.when('/items', {
            templateUrl: 'partials/items.html',
            controller: 'itemsController'
        }).when('/categories', {
            templateUrl: 'partials/categories.html',
            controller: 'categoriesController'
        });
}]);

controllers.js

var angcomControllers = angular.module('angcomControllers', ['angcomServices']);

angcomControllers.controller('itemsController' ['$scope', 'Items', function($scope, Items) {

}]);

angcomControllers.controller('categoriesController' ['$scope', function($scope) {

}]);

items.html

<div data-ng-controller="itemsController"></div>

If I need to post any more code please let me know, thanks!

karaxuna · Accepted Answer · 2014-01-11 11:45:48Z

6

You are missing ,:

angcomControllers.controller('itemsController', ['$scope', 'Items', function($scope, Items){

}]);

answered Jan 11, 2014 at 11:45

karaxuna

26.9k13 gold badges86 silver badges120 bronze badges

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

5 Comments

Michael Scheper Over a year ago

There are a lot of commas there. Could you please clarify which one was missing?

karaxuna Over a year ago

@MichaelScheper commas are missing when declaring controllers, after controller name

Michael Scheper Over a year ago

Thanks. It turned out to be quite a different problem in my case.

alukach Over a year ago

@MichaelScheper What was the actual problem (aside from the comma)?

Michael Scheper Over a year ago

@alukach: Sorry; I'm afraid I can't remember, otherwise I would've specified. It might've been a typo in my controller name, or I might've forgotten to put something in quotation marks. More web searching helped make it clear just how vague this error is and how many possible causes there are. I eventually found the problem just by looking at my code for the fifth or sixth time, and saying 'd'oh!!' ;-)

Collectives™ on Stack Overflow

Angular error: 'argument 'Controller' is not a function, got undefined'

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related