Question

I am writing a small app (initApp.js, initApp.routinj.js, initApp.controller.js) which modules needs to be loaded using requires.
Here’s my code (*).
Using console.log in each modules I see that the sequence how the modules are loaded is the following:

1) initController 
2) initRouting 
3) initApp 

Is this the right order?

Now another question.
In initApp.controller.js I need to access the function like initHeader and initSidebar (defined in initApp.js).
But as you can see from my code (initApp.controller.js), console.log('initController', app); returns undefined.
In order to fix this issue I defined the function getApp in initApp.controller.js.
But for sure there is a better way to accomplish this task.
Any idea?
Thanks

(*)

---

** main.js **

define([
    'js/app',
    'js/init/initApp',
//    'js/tasks/tasksApp'
],
function (App)
{
    "use strict";
    App.initialize();
});

---

** initApp.js **

/*global define*/
define([
    'backbone',
    'js/app',
    'js/init/initApp.routing',
    'js/init/views/sidebarView',
    'js/init/views/headerView',
],
function (Backbone, App, Router, SidebarView, HeaderView)
{
    "use strict";
    console.log('initApp', Router)
    var initApp = new Backbone.Marionette.Application({

        initHeader: function ()
        {
            var headerView = new HeaderView();
            App.header.show(headerView);
        },

        initSidebar: function ()
        {
            var sidebarView = new SidebarView();
            App.sidebar.show(sidebarView);
        }

    });

    return initApp;
});

---

** initApp.routin,js **

/*global define*/
define([
    'backbone',
    'marionette',
    'js/init/initApp.controller'
],
function(Backbone, Marionette, controller)
{
    "use strict";
    console.log('initRouting', controller)
    var Router = Backbone.Marionette.AppRouter.extend({

        appRoutes: {
            '*defaults': 'index'
        }

    });
    return new Router({
        controller: controller
    });

});

---

** initApp.controller.js **

/*global define*/
define([
    'js/init/initApp'
],
function(app)
{
    "use strict";
    console.log('initController', app); // undefined
    var getApp = function () {
        var initApp;
        require(['js/init/initApp'], function (app) {
            initApp = app;
        });
        return initApp;
    };

    var controller = {
        index: function ()
        {
            var app = getApp();
            app.initHeader();
            app.initSidebar();
        }
    }

    return controller;

});

Answer 1

Not sure if it will be the right way to implement things, but, in your case, if you load the modules in this order it will be work.

1) initApp
2) initController
3) initRouting

So it means your main.js should be:

define([
    'js/app',
    'js/init/initApp.routing'
],
function (App)
{
    "use strict";
    App.initialize();
});