How to unload angularjs modules [closed]

Question

I have an application that consists of N Modules. Almost all of those modules will be loaded on demand.

Is there any good way to organize AngularJS application with dynamically loaded and unloaded modules?

Why do we need unload modules

• Number of Modules (N) can be as much as possible and I can't guarantee any maximum number of them. So I try to avoid excessive use of the memory;
• I don't think it is the best practice to leave the code inside browser that we not going to use (I don't like the idea that tab with my webapp will consume all available memory and will hangs the browser);
• I think Google is too going that way. You can work with your Gmail whole the day and it's still running properly (Google I/O 2013 - A Trip Down Memory Lane with Gmail and DevTools http://www.youtube.com/watch?v=x9Jlu_h_Lyw).

Linked

• the Nested Modules in AngularJS

Answer 1

As of Angular 1.2.16 and 1.3.0 beta, the bootstrap() method defines a specific element on the DOM as the root scope for a collection of modules. There is no corresponding method to unbind. The ng-app directive is just a shortcut for bootstrap(), so the same limitation applies.

The angular-requirejs-seed project Artemis linked to does not answer your question. It uses the NG_DEFER_BOOTSTRAP! property to suspend the bootstrap process and dynamically define which modules to add at the time the page is loaded. It does not unload anything.

The most straightforward way to overcome Angular’s inherent inability to unload modules is to destroy the DOM element where your modules are running. Unfortunately, by destroying the element, you also lose whatever markup you had. One solution to that problem is to put your app’s markup into an HTML5 <template> element and clone its contents. Here’s an example I wrote in JSBin where an ambiguously named someGuyInASuit directive loads a picture of Dr. Jekyll or Mr. Hyde depending on which module is loaded.

This work-around is not well suited to an app consisting of many modules, especially if you intend to swap them in and out frequently as the user interacts with it. For one, all your models will be destroyed. Also, all the config() and run() blocks will be re-run. You may want to either fork Angular and add your own un-bootstrap method or have a look at another framework such as React, which has a method for unloading components built in.