loose coupling in AngularJS?

[Stu Salsbury]

This is not a practical, answerable question, but a hope for discussion.

I think Angular is great.  So great that I'd like to see it possible to use in large sites.  There seem to be some challenges.  I'm looking for and contemplating building solutions.  What I've identified so far is what seems like tight-coupling.  Despite the insistence that the dependency injection of angular provides for loose coupling, the opposite seems to be the case.

1) Everything should be specified at configuration time.  In other words, don't define routes or register any components at runtime.

I'm working around this and plan to share code that allows for configuration of routes, controllers, directives, filters, and services at runtime.  For routes, I'm basing my work on ui-router and making its routes editable at the service level.  For everything else, I'm basing it on various examples of runtime registration of components which all seem to stem from https://github.com/tnajdek/angular-requirejs-seed . My changes there are to enable the functionality as a provider/service and to enable AMD-based dependency resolution.

So, while the configuration-time concern is a nut that is crackable, it feels like I'm working against the grain to do this.  Statements in the docs about "preventing configuration at runtime" suggest that for some reason this is seen as a no-no, when in fact a large site isn't going to be very popular if its entire application needs to load before page 1 can be viewed.

2) This one I haven't tackled, nor have I seen any examples of it:  Angular requires all dependencies of a module to be specified when the module is specified.

Again, this seems antithetical to the spirit of loose coupling that I think drives the dependency injection.  If it's something that's in the works for later, then great.  If it's just never foreseen to be possible to load a module at runtime and interact with it from another module, then it seems like a real problem for a big site.

Has anyone tackled this?  Specifically, I'd want to:

a) load the module at run time based on user action (say, navigation to a specific URL, for example)

b) have that module present itself as "component" within the larger application

c) have the module interact with its parent module and possibly even other modules that are not in its "module hierarchy".

Essentially, I want components that can be loaded at runtime without depending on their modules when the main application is configured.

I can see working around the whole thing with jQuery or something like that, and forcing the presentational relationships with absolute positioning, but wouldn't it be nice if the framework allowed and supported this architecture.  In big teams and with big sites, it seems like a prerequisite.

Granted, great apps can be built as monolithic modules.  So this thought is primarily just relevant for cases where the workflow of the organization can't handle a monolithic app or the size of the site demands late-binding/loading.

Anyone have thoughts/ideas/samples of tackling loosely coupled components?