angular.js modular controller "undefined" when using $routeParams

Question

the following returns an error in the console "ReferenceError: ThingCtrl is not defined"

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

myApp.config(['$routeProvider', function($routeProvider) {
$routeProvider.
    when('/things', {templateUrl: 'partial.html', controller: ThingCtrl}).
    when('/things/:id', {templateUrl: 'detail.html', controller: ThingCtrl}).
otherwise({redirectTo: '/things'});
 }]);

myApp.controller('ThingCtrl', ['$scope', '$routeParams', function($scope, $routeParams) {
$scope.thing = [
    {
        'title':'first thing',
        'first':'one',
        'second': 'two',
        'third': 'three'
    }
];

}]);

however it works fine when the controller is defined like:

function ThingCtrl($scope, $routeParams) {
        $scope.thing = [
    {
        'title':'first thing',
        'first':'one',
        'second': 'two',
        'third': 'three'
    }
  ]
};

Why does it not work using the modular syntax?

possible duplicate of stackoverflow.com/questions/11211999/… — Ranadheer Reddy
– Ranadheer Reddy, Commented Jul 24, 2013 at 11:20

jncraton · Accepted Answer · 2013-01-28 15:40:58Z

11

I believe that the issue is here:

when('/things', {templateUrl: 'partial.html', controller: ThingCtrl})

This is telling Angular to point at the ThingCtrl object, which is undefined and causes an error.

Try enclosing the controller name in quotes like this:

when('/things', {templateUrl: 'partial.html', controller: 'ThingCtrl'})

This should allow Angular to properly use dependency injection.

answered Jan 28, 2013 at 15:40

jncraton

9,2024 gold badges37 silver badges52 bronze badges

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

Collectives™ on Stack Overflow

angular.js modular controller "undefined" when using $routeParams

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related