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 .

this maybe something for you try out ocLazyLoad oclazyload.readme.io/docs/dependency-injection — stackg91
– stackg91, Commented Sep 18, 2015 at 10:06
Would be nice if there was a callback you could use, like angular.appInitializing(function(app) { app.modules('myCommentPlugin'); }); — Ryan Mann
– Ryan Mann, Commented Sep 18, 2015 at 10:25
Is there a reason why plugin users shouldn't modify their app to inject the module by themselves? ocLazyLoad is good but is intended to be used by app owner, not to hack into somebody's app. — Estus Flask
– Estus Flask, Commented Sep 18, 2015 at 13:42
@estus, It's not the end of the world to make plugin users add it. But it's an Umbraco Plugin that has an Umbraco Macro that automatically includes it on the page, so ideally I would like it to automatically work as long as they have angular on the page. Even having it inject it's own script tag or require load itself. — Ryan Mann
– Ryan Mann, Commented Sep 18, 2015 at 15:16

Estus Flask · Accepted Answer · 2015-09-18 16:28:16Z

11

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.

answered Sep 18, 2015 at 16:28

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user1776573 Over a year ago

If that is the case,I am assuming we will not be able to use this approach if we use ng-app.Is the assumption right ?

Estus Flask Over a year ago

@user1776573 Not really. To be accepted by ng-app bootstrapping, the script should be performed before document 'ready' event fires . The same limitation applies to regular application scripts.

Collectives™ on Stack Overflow

Angular Dynamically Inject Module Dependency

1 Answer 1

2 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Linked

Related