angularjs inject module after app initialization

Question

Hello everyone I've been trying to do this with no luck for a few days.

is there anyway to load asynchronously some js scripts(which contain angular modules) and inject them to the running app after it has been initialized.

Basically I have a container DOM element that will be populated with some HTML requested from the server, based on this HTML code I will decide which js files (modules) will be required, then load them asynchronously inject the modules to the angular app and compile the content with the new injected modules.

I tried but every time I do the bootstrap method injecting the module the Main Controller fires up and erases all my scope state. :(

Any help around here?

Can you provide a fiddle with what you are attempting to do? — Ganaraj
– Ganaraj, Commented Jun 7, 2012 at 8:49
Here is the fiddle jsfiddle.net/MForce/WVz8r/32 take a look as well at the version jsfiddle.net/MForce/WVz8r/31 31 version works because I'm loading the modules together with the app initialization. But that it's exactly what I do not want to do, since I do not know what kind of directives will my template contain, and I will be loading the directives modules in separate scripts asynchronously. So basically once the App module starts, is there any way to add/inject additional modules to make it aware of new directives? — MForce22
– MForce22, Commented Jun 7, 2012 at 21:22
Currently, there is no "nice" way of doing this. Although, it's definitely on our list to do. Search mailing list for some ideas how to hack it :-D — Vojta
– Vojta, Commented Jun 10, 2012 at 6:56
Still no luck I created my own version of the bootstrap method from the angularjs source passing it in the rootScope to avoid it to create a new scope but it still creates it screwing all my bindings on the new directives. Do you know how do I inject a module directive into the App module? — MForce22
– MForce22, Commented Jun 12, 2012 at 18:59

Community · Accepted Answer · 2017-05-23 12:08:44Z

3

It's ugly, but it works: http://jsfiddle.net/MzseV/7/

It basically works by iterating the module's _invokeQueue member and applying functions within using the providers used for registering services, controllers and directives (NOTE: these need to be captured before bootstrapping AFAIK). This will probably also re-register anything you've previously registered so you might want some heuristic to only pick the ones you want, although I'm not sure if there's any damage in re-registring.

Again, it's fairly hideous and hacky so I'd only use as a last resort.

Here's the question I asked and later answered about this.

EDIT: just noticed how old this question is, hope it still helps someone.

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Aug 21, 2013 at 18:49

Jussi Kosunen

8,2973 gold badges30 silver badges34 bronze badges

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

1 Comment

Nate Anderson Over a year ago

Important: NOTE: these need to be captured before bootstrapping AFAIK

Community · Accepted Answer · 2017-05-23 12:08:44Z

3

Perhaps this can help?

app.requires.push("myModule");

injecting module when you have access only to a module variable

edited May 23, 2017 at 12:08

CommunityBot

11 silver badge

answered Aug 11, 2016 at 8:04

Rasmus-E

8621 gold badge8 silver badges18 bronze badges

Collectives™ on Stack Overflow

angularjs inject module after app initialization

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related