mnishihan/app.foomodule.bar.js

## app.foomodule.bar.js
App.module("FooModule.Bar", {
  startWithApp: false,

  define: function() {
    // Code of submodule
  }
});

## app.foomodule.js
App.module("FooModule", {
  startWithApp: false,

  define: function(Module, App, Backbone, Marionette, $, _) {

    var Controller = function() {};

    _.extend(Controller.prototype, {

      index: function() {},

      showItem: function(id) {}
    });


    Module.addInitializer(function(options) {
      var controller = new Controller();
      Module.controller = controller;

      App.vent.on("foo-module:index", controller.index, controller);
      App.vent.on("foo-module:show-item", controller.showItem, controller);
    });

    Module.addFinalizer(function() {
      var controller = Module.controller;

      App.vent.off("foo-module:index", controller.index, controller);
      App.vent.off("foo-module:show-item", controller.showItem, controller);

      delete Module.controller;
    });
  }
});

## app.js
App = new Backbone.Marionette.Application();

(function(App) {
  var currentModule;

  // Handles the event to stop previous module to release resources
  App.vent.on("module:start", function(module) {
    if (currentModule && currentModule !== module) {
      currentModule.stop();
    }

    currentModule = module;
  });
})(App);

## app.modulemanager.js
App.ModuleManager = (function(App, _) {

  var config = {};

  return {
    registerResource: function(moduleName, src) {
      if (!_.has(config, moduleName)) {
        config[moduleName] = {
          resources: []
        };
      }

      config[moduleName].resources.push(src);
    },

    getModule: function(moduleName) {
      var moduleConfig = config[moduleName];

      if (!moduleConfig.promise) {
        var deferred = $.Deferred();

        yepnope({
          load: moduleConfig.resources,
          complete: function() {
            deferred.resolve(App.module(moduleName));
          }
        });

        moduleConfig.promise = deferred.promise();
      }

      return moduleConfig.promise;
    }
  };

})(App, jQuery, _, yepnope);

## app.modulerouter.js
App.ModuleRouter = (function(App, Backbone, $) {

  // "routes": A hash of urls and event names

  return Backbone.Router.extend({
    _bindRoutes: function() {
      var routes = [];

      for (var route in this.routes) {
        if (this.routes.hasOwnProperty(route)) {
          routes.push([route, this.routes[route]]);
        }
      }

      for (var i = 0, l = routes.length; i < l; i++) {
        this.route(routes[i][0], routes[i][1], this.createTrigger(routes[i][1]));
      }
    },

    createTrigger: function(eventName) {
      var that = this;

      return function() {
        var args = _.toArray(arguments);
        args.unshift(eventName);

        that.trigger.apply(that, args);
      }
    },

    trigger: function() {
      var that = this;
      var args = arguments;

      $.when(App.ModuleManager.getModule(this.moduleName)).then(function(module) {
        module.start(that.moduleOptions);

        App.vent.trigger("module:start", module);
        App.vent.trigger.apply(App.vent, args);
      });
    }
  });

})(App, Backbone, jQuery);

## app.routing.foomodule.js
App.module("Routing.FooModule", function(Module, App, Backbone, Marionette, $, _) {

  var Router = App.ModuleRouter.extend({
    moduleName: "FooModule",
    routes: {
      "": "foo-module:index",
      "item/:id": "foo-module:show-item"
    },

    initialize: function(options) {
      this.moduleOptions = options.moduleOptions;
    }
  });

  App.addInitializer(function(options) {
    new Router({ moduleOptions: options });
  });
});

## index.html
<!DOCTYPE html>
<html>
  <head></head>
  <body>
    <script type="text/javascript" src="/assets/js/vendor/backbone.js"></script>
    <script type="text/javascript" src="/assets/js/vendor/backbone.marionette.js"></script>
    <script type="text/javascript" src="/assets/js/app.js"></script>
    <script type="text/javascript" src="/assets/js/app.modulemanager.js"></script>
    <script type="text/javascript" src="/assets/js/app.modulerouter.js"></script>
    <script type="text/javascript" src="/assets/js/app.routing.foomodule.js"></script>

    <script type="text/javascript">
      App.ModuleManager.registerResource("FooModule", '/assets/js/app.foomodule.js');
      App.ModuleManager.registerResource("FooModule", '/assets/js/app.foomodule.bar.js');
    </script>

    <script type="text/javascript">
      App.start();
    </script>
  </body>
</html>
	App.module("FooModule.Bar", {
	startWithApp: false,

	define: function() {
	// Code of submodule
	}
	});
	App.module("FooModule", {
	startWithApp: false,

	define: function(Module, App, Backbone, Marionette, $, _) {

	var Controller = function() {};

	_.extend(Controller.prototype, {

	index: function() {},

	showItem: function(id) {}
	});


	Module.addInitializer(function(options) {
	var controller = new Controller();
	Module.controller = controller;

	App.vent.on("foo-module:index", controller.index, controller);
	App.vent.on("foo-module:show-item", controller.showItem, controller);
	});

	Module.addFinalizer(function() {
	var controller = Module.controller;

	App.vent.off("foo-module:index", controller.index, controller);
	App.vent.off("foo-module:show-item", controller.showItem, controller);

	delete Module.controller;
	});
	}
	});
	App = new Backbone.Marionette.Application();

	(function(App) {
	var currentModule;

	// Handles the event to stop previous module to release resources
	App.vent.on("module:start", function(module) {
	if (currentModule && currentModule !== module) {
	currentModule.stop();
	}

	currentModule = module;
	});
	})(App);
	App.ModuleManager = (function(App, _) {

	var config = {};

	return {
	registerResource: function(moduleName, src) {
	if (!_.has(config, moduleName)) {
	config[moduleName] = {
	resources: []
	};
	}

	config[moduleName].resources.push(src);
	},

	getModule: function(moduleName) {
	var moduleConfig = config[moduleName];

	if (!moduleConfig.promise) {
	var deferred = $.Deferred();

	yepnope({
	load: moduleConfig.resources,
	complete: function() {
	deferred.resolve(App.module(moduleName));
	}
	});

	moduleConfig.promise = deferred.promise();
	}

	return moduleConfig.promise;
	}
	};

	})(App, jQuery, _, yepnope);
	App.ModuleRouter = (function(App, Backbone, $) {

	// "routes": A hash of urls and event names

	return Backbone.Router.extend({
	_bindRoutes: function() {
	var routes = [];

	for (var route in this.routes) {
	if (this.routes.hasOwnProperty(route)) {
	routes.push([route, this.routes[route]]);
	}
	}

	for (var i = 0, l = routes.length; i < l; i++) {
	this.route(routes[i][0], routes[i][1], this.createTrigger(routes[i][1]));
	}
	},

	createTrigger: function(eventName) {
	var that = this;

	return function() {
	var args = _.toArray(arguments);
	args.unshift(eventName);

	that.trigger.apply(that, args);
	}
	},

	trigger: function() {
	var that = this;
	var args = arguments;

	$.when(App.ModuleManager.getModule(this.moduleName)).then(function(module) {
	module.start(that.moduleOptions);

	App.vent.trigger("module:start", module);
	App.vent.trigger.apply(App.vent, args);
	});
	}
	});

	})(App, Backbone, jQuery);
	App.module("Routing.FooModule", function(Module, App, Backbone, Marionette, $, _) {

	var Router = App.ModuleRouter.extend({
	moduleName: "FooModule",
	routes: {
	"": "foo-module:index",
	"item/:id": "foo-module:show-item"
	},

	initialize: function(options) {
	this.moduleOptions = options.moduleOptions;
	}
	});

	App.addInitializer(function(options) {
	new Router({ moduleOptions: options });
	});
	});
	<!DOCTYPE html>
	<html>
	<head></head>
	<body>
	<script type="text/javascript" src="/assets/js/vendor/backbone.js"></script>
	<script type="text/javascript" src="/assets/js/vendor/backbone.marionette.js"></script>
	<script type="text/javascript" src="/assets/js/app.js"></script>
	<script type="text/javascript" src="/assets/js/app.modulemanager.js"></script>
	<script type="text/javascript" src="/assets/js/app.modulerouter.js"></script>
	<script type="text/javascript" src="/assets/js/app.routing.foomodule.js"></script>

	<script type="text/javascript">
	App.ModuleManager.registerResource("FooModule", '/assets/js/app.foomodule.js');
	App.ModuleManager.registerResource("FooModule", '/assets/js/app.foomodule.bar.js');
	</script>

	<script type="text/javascript">
	App.start();
	</script>
	</body>
	</html>