composing modules provided by different servers (SOA-style)

[Tristan Slominski]

Hi,

I've scoured the forums (although I'm sure I missed some information) about how to compose AngularJS modules from multiple servers. CORS is not a problem, I know how to deal with that, but how do I make the app register modules coming from other servers asynchronously?

Here is an example architecture I'm attempting that should describe my goals:

1. "composer" module, (this is the app from the user's perspective) the sole responsibility of which is to provide a template layout for services to insert their UIs into

2. all the other service modules

 a) "s3ControlPanel" module (hosted on s3.foo.com for example)

 b) "dynamoControlPanel" module (hosted on dynamo.foo.com for example)

 c) etc..

The "composer" module would provide a template that (for the purpose of this inquiry) would have a list of divs, each of them corresponding to a service module. For example: <div id="s3ControlPanel"></div><div id="dynamoControlPanel"></div>... etc. 

The "composer" should go to s3.foo.com, grab the AngularJS module from there, and tell it "div with id='s3ControlPanel' is yours".

Similarly, the "composer" should go to dynamo.foo.com, grab the AngularJS module from there, and tell it "div with id='dynamoControlPanel' is yours".

The service modules make a few assumptions, such as a common naming convention, common style/css convention, and also common services that they can inject (for example $eventBus service for communication between modules). However, aside from this limited common protocol, no information is exchanged. This is important from the perspective of decoupling services/teams, so that the "dynamoControlPanel" team can change their UI/capabilities as desired without having to coordinate with any other module, and, most importantly, _without_ the "composer" module having to change code!

Is there a canonical way to do what I described here in AngularJS?

Thanks,

Tristan