angularjs route to controllers from different modules

Question

At the moment we are in the process of creating a new web application infrastructure.

We initially load a dashboard which is esentially the top bar displaying the logged in user and the set of menus along with it. Clicking on each menu would load a screen (mostly crud screens) in the main section. We areplanning to put each of the crud screens and their components (services, controllers and such) in a seperate module which will encapsulate all the screens from each other, so for example if there is 78 screens there will be 78 seperate modules for each screen. We are also using planing on using Requirejs to load these dependencies dynamically.

The problem however occurs that we need to link the menu with each of the modules for each screen. Typically in a single module based app it would be done like this.

config(function($routeProvider, $locationProvider) {
  $routeProvider
   .when('/Book/load', {
    templateUrl: 'book.html',
    controller: 'BookController'
  })
  .when('/Screen/load', {
    templateUrl: 'chapter.html',
    controller: 'ChapterController'
  });

Where the BookController and ChapterController will be in the SAME module.

However in our case the BookController will be in a BookModule for the book screen and the same applies for the ChapterController. And the routes would be in the initial main module for example AppModule which loads the dashboard initially during startup then.

How would we say for example link the AppModule and the routes with each module for each screen (for example in this case BookController and ChapterController) keeping in mind that we need to load the modules dynamically when NEEDED using requirejs.

(PS : We are essentially segmenting our application based on feature where feature in our system usually equals screen)

Also any suggestions on any other way we could best structure our app including an answer to the above problem would be very much appreciated.

Regards, Milinda

Answer 1

Why do you have the route configuration in the initial main module? This creates unnecessary coupling between your modules (ie. your initial module has to know all the possible routes of every module), sort of defeating the purpose of moving your code into modules in the first place.

Each of your modules can have their own route configuration, which will take effect when the modules are loaded. (A consistent naming convention can help avoiding clashes between routes of unrelates modules)

While configuring the routeProvider, you can use lazy loading mechanisms using the resolve attribute of routes: resources referenced here will be resolved before the routeChange event happens, which enables you to wait for any promise resolution or a requireJS loading of a file. This blogpost might help in that regard.

Answer 2

As of this moment, there is no mechanism as far as I am aware for dynamically loading modules at runtime and then incorporating them in an AngularJS app. You can breakdown your app into 78 individual modules loaded via requirejs, but you will still need a single primary module which has all those other 78 as dependencies. It is this primary module which you will then configure all the routes.

There is work going on into a new AngularJS router which borrows from other more flexible routers (ie ui-router, etc) which will allow exactly the sort of dynamic loading of modules you are speaking about but as far as I know it won't be available until AngularJS 1.4.