CODEWITHSUNDEEP
javascriptangularjs
Melbourne2991
Melbourne2991

Reputation: 11797

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

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!

Upvotes: 4

Views: 17083

Answers (1)

karaxuna
karaxuna

Reputation: 26940

You are missing ,:

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

}]);

Upvotes: 6

Related Questions