Current AngularJS Module Organization Requires Circular Module References

I have a SPA that uses ngTable and ui-bootstrap. The page references a top-level controller defined in a top-level module, and several nested controllers that are defined in other

Solution 1:

I guess the obvious and reasonable advice would be to have a top-level module that loads all the other required modules for the page, along with any configuration settings for that module, but which has nothing directly needed by any of the other modules.

In this example, that would mean separating out some pieces of the top-level "DiagApp" module into a "DiagMod" module. This would include any components that the other modules need to use. If the top-level module doesn't need any configuration settings, then the top-level module would just have the single line specifying all the modules used on the page, including the new "DiagMod" module.