Angular Dynamically Inject Module Dependency

Question

I've developed a commenting plugin for Umbraco that uses angular. As such the main angular app for the site has to inject the comment systems module for it to work.

E.g.

var theirSite = angular.module('someApp', []);

Injected

var theirSite = angular.module('someApp', ['theCommentSystemModule'];

In my comment system,

   angular.module('theCommentSystemModule']....;

Is there any way my module can automatically detect the angular app and inject itself without the code for the site having to be updated? I want it to just work with nothing but the script link.

For Example: say these are the scripts

<script src="...angular.js">
<script src="...services.js">
<script src="...directives.js">
<script src="...commentsPlugin.js">
<script src="...theirApp.Js">

So what I basically need, is some kind of callback from angular when the app is being bootstrapped, so I can inject the comment systems module into the app as a depedency module so that it will initialize in their bootstrap layer.

Or maybe, alternatively, I bootstrap the page myself in the plugin for itself? Can there be two apps running at once, e.g. if I bootstrap and their app also bootstrap's .

Answer 1

It can be done by using undocumented requires module property. This way new dependencies can be added to the module after it was defined but before it was bootstapped.

Since 'ng' is the only known and defined module ATM (it also has already defined requires array), tamper it:

angular.module('ng').requires.push('theCommentSystemModule');

Though it is more appropriate to let the users load the module by themselves.