AngularJS controllers causing errors

Question

I have a very simple application that does nothing really other than display two different views depending on user selection. This application is a stepping stone to learning how routes work in AngularJS.

My issue is this.

The application when run in the browser navigates to the index view with no issues. This is because the index view does not reference a controller. However the user view does reference (require) a controller. This causes an issue where the exception thrown is Arguement 'XCtrl' is not a function, got undefined.

My main index is:

<html>
<head><title></title></head>
<body>
<div ng-view></div>
</body>
</html>

My main app.js is:

angular.module('app.controllers', []);

var controllers = angular.module('app.controllers', []);

angular.module('app', ['app.controllers'])
.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/', {
            templateUrl: 'views/index.html'
        })
    $routeProvider.when('/users', {
            templateUrl: 'views/users.html',
            controller: 'UserCtrl'
        }).
        otherwise({ redirectTo: '/' });
}]);

My controller is:

appControllers.controller('UserCtrl', ['$scope', function ($scope) {
    $scope.users = {
        user: {name: "Ian", age: 30 },
        user: {name: "Paul", age: 37 }
    };
}]);

user.html

<div ng-repeat="user in users">{{user.name}} {{ user.age }}</div>

index.html

<h1>index</h1>

can anybody see where I am going wrong. Any help would be great

EDIT:

Here s the stack trace from the browser, if this helps any

Also:

www.testapp.com is a locally hosted server with no external access, just in case someone tries it and can not access.

2 things: First, like Thomas points out below, drop the [] brackets from the controllers assignment call. Second, not sure if it's just a copy/paste thing but you're assigning the module to a variable called controllers but defining the controller on a variable called appControllers. Maybe create a JSFiddle to demonstrate your issue? — bmceldowney, Sep 18 at 19:26
yeah the appController is a copy paste thing. I tried the suggestion but this still did not work. I have never used jSFiddle but having had a look I am unsure how to add the multiple files required to generate the same result that I am having. — Ian Richards, Sep 18 at 19:35

Ian Richards · Answer 1 · 2013-09-18 19:47:31Z

up vote 1 down vote

After see a related question I noticed that I had not added the UserCtrl.js to my main index.html. After adding this it worked. However, I believe there is a way to add controllers, directives, services and filters dynamically. If someone knows how to do this it would be very helpful.

answered Sep 18 at 19:47

Ian Richards
856

Anyway use bracket on module juste for déclaration or you ll have two differents modules – Thomas Pons Sep 18 at 20:01

Thomas Pons · Answer 2 · 2013-09-19 06:12:06Z

up vote 0 down vote

Delete the brackets during assignments

angular.module('app.controllers', []);

var controllers = angular.module('app.controllers');

Or simpler do just htis:

var controllers = angular.module('app.controllers', []);

If you put the brackets you'll have two modules ...

edited Sep 19 at 6:12

answered Sep 18 at 19:14

Thomas Pons
803215

asked	1 month ago
viewed	63 times
active	1 month ago

AngularJS controllers causing errors

2 Answers

Your Answer

Not the answer you're looking for? Browse other questions tagged angularjs or ask your own question.

AngularJS controllers causing errors

2 Answers

Your Answer

Sign up or login

Post as a guest

Not the answer you're looking for? Browse other questions tagged angularjs or ask your own question.

Related