Creating a single page app with multiple modules using requirejs

Question

I have created a Single Page Application with routing to different modules say Module A and Module B. My current structure looks like

1. index.html -- home page
2. index.html/#ModuleA -- Module A
3. index.html/#ModuleB -- Module B

I have used requirejs and made code AMD ready. Now when app loads for the first time, a big fat app.js file is loaded and then I use Almond for loading dependencies as needed in modules.

Now I would like to break this big app.js file into 3 parts 1. app1.js -- loads when user opens index.html page. 2. ModuleA.js -- loads when user navigates from index.html to ModuleA 3. ModuleB.js -- loads when user navigates from index.html to ModuleB

I know I can create different modules using config file but that does not seem to be able to do what I want to achieve.

Is it possible to achieve what I am trying to, using require. Comment in RequireJS: Multiple main.js? says this is not requirejs philosophy.

Answer 1

If you have a single page application, you are using backbone or something i guess, so you can require different modules on your router when they are needed. Take a look at this example https://github.com/BenjaminAdams/RedditJS/blob/master/public/js/app/router/app-router.js#L107