CODEWITHSUNDEEP
angularjs
Ian Richards
Ian Richards

Reputation: 1618

AngularJS controllers causing errors

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

Error: Argument 'UserCtrl' is not a function, got undefined at Error () at bb (http://www.testapp.com/js/angular/angular.min.js:17:68) at ra (http://www.testapp.com/js/angular/angular.min.js:17:176) at http://www.testapp.com/js/angular/angular.min.js:53:60 at k (http://www.testapp.com/js/angular/angular.min.js:151:401) at Object.e.$broadcast (http://www.testapp.com/js/angular/angular.min.js:90:517) at http://www.testapp.com/js/angular/angular.min.js:83:6 at h (http://www.testapp.com/js/angular/angular.min.js:78:207) at h (http://www.testapp.com/js/angular/angular.min.js:78:207) at http://www.testapp.com/js/angular/angular.min.js:78:440

Also:

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

Upvotes: 1

Views: 1060

Answers (2)

Thomas Pons
Thomas Pons

Reputation: 7729

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 ...

Upvotes: 0

Ian Richards
Ian Richards

Reputation: 1618

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.

Upvotes: 1

Related Questions