AngularJS Uncaught ReferenceError: controller is not defined from module

Question

I have the following code;

var app =
    angular.
        module("myApp",[]).
        config(function($routeProvider, $locationProvider) {
            $routeProvider.when('/someplace', {
                templateUrl: 'sometemplate.html',
                controller: SomeControl
             });
             // configure html5 to get links working on jsfiddle
             $locationProvider.html5Mode(true);
        });

app.controller('SomeControl', ...);

I get the following error

Uncaught ReferenceError: SomeControl is not defined from myApp

Is the problem just that I can not use app.controller('SomeControl', ...) syntax? when using $routeProvider? is the only working syntax:

function SomeControl(...)

Answer 1

Use quotes:

            controller: 'SomeControl'

Answer 2

Like Foo L said, you need to put quotes around SomeControl. If you don't use quotes, you are referring to the variable SomeControl, which is undefined because you did not use a named function to represent the controller.

When you use the alternative that you mentioned, function SomeControl(...), you define that named function. Otherwise, Angular needs to know that it needs to look up the controller in the myApp module.

Using the app.controller('SomeControl', ...) syntax is better because it does not pollute the global namespace.

Answer 3

The above answers are correct however, this error can also happen :

1. If the name of the controller in you html or jsp etc page is not matching the actual cotnroller

<div ng-controller="yourControllerName as vm">

2. Also if the name of the function controller does not match the controller definition then this error can happen too.

angular.module('smart.admin.vip') .controller('yourController', yourController); function yourController($scope, gridSelections, gridCreationService, adminVipService) { var vm = this; activate();