Using AngularJS Controllers created with angular.module().controller()

Question

I am still very new to AngularJS and am working through setting up my first application. I would like to be able to do the following:

angular.module('App.controllers', [])
  .controller('home', function () {
    $scope.property = true;
  }]);

angular.module('App', ['App.controllers'])
  .config(['$routeProvider', function($routeProvider) {
    $routeProvider.when('/', {templateUrl: 'partials/home.html', controller: home});
  }]);

Using this setup the following error is generated:

Uncaught ReferenceError: home is not defined from App

My question is: How can I register controllers using angular.module.controller() (or $controllerProvider.register() directly) and use the registered controller elsewhere in my app.

My motivation: I would like to avoid using either global constructor functions as my controllers (as most of the examples on angularjs.org use) or complex namespacing. If I can register and use controllers as single variable names (that are not then put in the global scope) that would be ideal.

Doykos

Answer 1

Try using a string identifier.

routeProvider.when('/', {templateUrl: 'partials/home.html', controller: 'home'});

When you use a literal, it is looking for a variable called home, but that doesn't exist in this case.

Heyerdahl

The above solution doesn't appear to work... I'm getting "Error: Argument 'PhoneListCtrl' is not a function, got string". Help! – Elfont

If you define the controller as a function (function PhoneListCtrl(){}), you have to reference it as a function. If you define it with .controller (app.controller('PhoneListCtrl', function(){}), you should reference it as a string. – Heyerdahl

I used string identifier to assign a controller from another module, and it works. very nice! – Cyclist

Using a string worked for me on the routeProvider, but now this is not working: <div ng-controller="MyCtrl"></div>. The other form works - <div class="ng-controller='MyCtrl'"></div>, but I'd prefer using the attribute form because it's simpler. Is there a way? – Carping

That should work, Joe. Could you create a plunker? plnkr.co/edit -> New -> AngularJS – Heyerdahl

Adam, I had the problem continue happening to me as well, but in the end, the problem was my controller was using a service (created with a factory) and it was the link between the module and the service that was the problem. I would try investigating there. I ended up using the same name for the module as the service because I was thinking in the mindset of module('mymodule').controller where you want the same name, but not for a service. So when including ['ngResource'] redeclares the controller and wiped out what I had for the controller. – Scuttle

What if you want to return that function as a module (export it in an object literal)? Ideally say return { main: app.controller('MainCtrl') }; // should return this function. Can you do this? – Brighten

Answer 2

If you are getting controller is not defined error you have to write your controller name within the quotes.

or define your controller like this

function controllerName()
{
   //your code here
}

refer this: Uncaught ReferenceError:Controller is not defined in AngularJS

Demurrer