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

Answer 1

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.