Angular + RequireJS app gives error "mainController not a function"

Question

Okay this is the situation. I'm trying to build an AngularJS app from scratch, and I'm combining it with RequireJS. This is where it all goes down hill.

What happens is that I get an error saying that mainController is not a function got undefined. But some time, just for a second I can see a message in my Console.log in the browser telling me some informations from the controller, just before the error shows.

How can this be?

As I said I'm in uncharted territory and I have no idea where to look, so I'm just gonna give you guys what files I have ^^

Brace yourself code is coming

File tree

app/modules/main.js

require.config({
    paths: {
        //  Load dependencies
        'angular': '../lib/Angular-1.4.7/angular.min',
        'angular-route': '../lib/Angular-1.4.7/angular-route.min',

        //  Load modules
        'app': '../app/modules/core/app'
    },
    shim: {
        'angular-route': {
            deps: ['angular']
        },
        'app': {
            deps: ['angular-route']
        }
    }
});

require(['app'], function () {
    //  The application has been loaded
});

app/modules/core/app.js

define(function () {
    var app = angular.module('app', ['ngRoute']);

    app.config(['$routeProvider', function ($routeProvider) {
        $routeProvider
            .when('/', {
                templateUrl: 'app/modules/core/views/home.html',
                controller: 'homeController'
            })
            .when('/home', {
                templateUrl: 'app/modules/core/views/home.html',
                controller: 'homeController'
            });
    }]);

    require(['../app/modules/core/controllerReferences'], function (references) {
        require(references, function () { 
            angular.bootstrap(document, ['app']);
        });
    })
});

app/modules/core/controllerReferences.js

define(function () {
    return [
        'modules/core/controllers/mainController',
        'modules/core/controllers/homeController'
    ];
});

app/modules/core/controllers/mainController.js

define(function () {
    var app = angular.module('app', []);

    app.controller('mainController', ['$scope', function ($scope) {
        console.log('mainController at your service');
    }]);
});

EDIT

The error which I recieve

Error: [ng:areq] http://errors.angularjs.org/1.4.7/ng/areq?p0=mainController&p1=not%20a%20function%2C%20got%20undefined
    at Error (native)
    at http://localhost:3644/lib/Angular-1.4.7/angular.min.js:6:416
    at qb (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:22:131)
    at Sa (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:22:218)
    at http://localhost:3644/lib/Angular-1.4.7/angular.min.js:80:81
    at O (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:59:501)
    at K (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:60:338)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:410)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:433)
    at g (http://localhost:3644/lib/Angular-1.4.7/angular.min.js:54:433)    
(anonymous function) @ angular.min.js:107
(anonymous function) @ angular.min.js:80
n.$apply @ angular.min.js:133
(anonymous function) @ angular.min.js:20
e @ angular.min.js:39
d @ angular.min.js:19
zc @ angular.min.js:20
(anonymous function) @ app.js:18
context.execCb @ require.js:1678
Module.check @ require.js:878
(anonymous function) @ require.js:1128
(anonymous function) @ require.js:131
(anonymous function) @ require.js:1178
each @ require.js:56
Module.emit @ require.js:1177
Module.check @ require.js:929
Module.enable @ require.js:1165
Module.init @ require.js:783
callGetModule @ require.js:1192
context.completeLoad @ require.js:1571
context.onScriptLoad @ require.js:1699

Hm, could you provide more information on the error? Usually if an error is being thrown you'll get the file, line number, and stack trace. — nick
– nick, Commented Oct 17, 2015 at 22:01
Done. Originally I had thought you had a reference (in your HTML) to an undefined controller, but obviously that made no sense seeing as the names matched and you had output in the console. Was an interesting problem :) — nick
– nick, Commented Oct 17, 2015 at 23:24

nick · Accepted Answer · 2015-10-17 23:19:52Z

3

Your error is in your controller definitions.

var app = angular.module('app', []); creates a new module
var app = angular.module('app'); retrieves an existing module

So your mainController.js should look like this:

define(function () {
    var app = angular.module('app');

    app.controller('mainController', ['$scope', function ($scope) {
        console.log('mainController at your service');
    }]);
});

Basically, what you were doing was creating your app module three times- once in the beginning, and twice more when you included your controllers.

See this question for more info.

answered Oct 17, 2015 at 23:19

nick

20.1k2 gold badges26 silver badges31 bronze badges

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

Collectives™ on Stack Overflow

Angular + RequireJS app gives error "mainController not a function"

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related