How to do inversion of dependency injection in angular?

Question

JavaScript

There is an awesome code: plnkr.co/edit/lnijKg?p=info that convinces me that the week has not been spent in vain.
But in this code there is one not very beautiful place:

angular.module('main', ['ui.router', 'foo'])
    .config(function($stateProvider){
        $stateProvider
            .state('foo', { url: "/foo", 'abstract': true })
            .state('foo.bar', { url: "/bar", directive: 'foo-bar' })
            .state('foo.baz', { url: "/baz/:id", directive: 'foo-baz', closable: true })
        ;
    })

And this is practically the only place where the main module intersects with foo. However, in a real application there will be 7 such foo. Of course, I will not die to write 21 important lines, but somehow not comme il faut.
0. In principle, these lines can be reduced by an order of magnitude by putting state configs inside modules as constants:

angular.module('main', ['ui.router', 'foo', 'bar','baz'])
.config(function($stateProvider, fooStateConfs, barStateConfs, bazStateConfs){
  function setup_states(modname, stateconfigs) {
    $stateProvider.state(modname, { url: "/"+modname, abstract: true});
    anguar.forEach(stateconfigs, function(name, params) { $stateProvider.state(modname+'.'+name, params }); });
  }
  setup_states('foo', 'fooStateConfigs');
  setup_states('bar', 'barStateConfigs');
  setup_states('baz', 'bazStateConfigs');
})

The catch is that these modules should be disabled like plugins, depending on the configuration or user rights. The required layout is determined on the server before the entire application is loaded or reloaded.
1. a flat-minded solution to
generate a metaconf module on the server with a description of which modules are enabled.

if( metaConf.enabled_mods.foo )  setup_states('foo', 'fooStateConfigs');
if( metaConf.enabled_mods.bar )  setup_states('bar', 'barStateConfigs');

2. It seems to me that the angular solution should look something like this:

angular.module('foo',['main'])
.config(function(mainTabsProvider) {  
  mainTabsProvider.tabs('foo');
  mainTabsProvider.tab('foo.bar', params);
  mainTabsProvider.tab('foo.baz', params);
});

angular.module('main',[])
.provider('mainTabs', function() { ... })

That is, each module itself registers all its states.
Configuring the presence of modules is solved simply by enabling / disabling the script line in the start page. Beauty is!
But if main doesn't have a dependency on foo/bar/baz, these modules won't be initialized at all unless they're plugged into html ng-app="foo".
How to be?
Seems to smell like future states from ui-router-extra.
But I'm still afraid of him.

Answer 1

I think you need to look towards https://github.com/ocombe/ocLazyLoad