Is it possible to hand-load/unload modules using angular.bootstrap?

Question

Is it possible to hand-load/unload modules using angular.bootstrap?

My dilemma lies in creating a dynamic single page application that can load and unload AngularJS apps on demand within a designated "main content" section when selecting different menu options.

Despite my efforts, I am consistently encountering the ng:btstrpd error whenever attempting to utilize the angular.bootstrap function.

The apps are loaded using the following code snippet:

var mainContent = document.getElementById('main-content');
window.loadApp = function(modules) {
    angular.bootstrap(mainContent, modules);
}

For reference, here is a jsfiddle link: http://jsfiddle.net/010b62ry/

I have experimented with removing and reinserting the DOM element, but encountered unexpected results such as duplicates. It appears that the modules are not being properly unloaded, as indicated by the presence of numerous  comments.

Do you have any insights on how to implement this functionality successfully? Bonus points if the memory is effectively released when transitioning between applications.

Additionally, it is crucial for the modules to operate independently and manage their own routes, especially since some may be developed by external parties with no access to the source code of the main application. The goal is to initiate these modules as self-sufficient Angular applications.

javascript angularjs

Answer 1

Answer №1

After stumbling upon a discussion on How to destroy an angularjs app?, I decided to experiment with code to recreate the main-content div.

Here is the HTML code snippet:

<nav>
    <a onclick="loadApp(['app1'])">Load app n°1</a>
    <a onclick="loadApp(['app2'])">Load app n°2</a> 
</nav>
<div id="main-content-wrap">
    <div id="main-content" class="app">
        <div ng-view></div>
    </div>
</div>

Here is the JavaScript code snippet:

angular.module('app1', ['ngRoute']);
angular.module('app1')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .otherwise({
        template: 'hello app n°1'
    });
}]);
angular.module('app2', ['ngRoute']);
angular.module('app2')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .otherwise({
        template: 'hello app n°2'
    });
}]);

var mainContent = document.getElementById('main-content');
var mainContentWrap = document.getElementById('main-content-wrap');
var mainContentHTML = mainContentWrap.innerHTML;
window.loadApp = function(modules) {
    if (window.currentApp) {
        destroyApp(window.currentApp);
        mainContentWrap.removeChild(mainContent);
        mainContentWrap.innerHTML = mainContentHTML;
        mainContent = document.getElementById('main-content');
    }
    window.currentApp = angular.bootstrap(mainContent, modules);
}

function destroyApp(app) {
    /*
* Iterate through the child scopes and kill 'em
* all, because Angular 1.2 won't let us $destroy()
* the $rootScope
*/
    var $rootScope = app.get('$rootScope');
    var scope = $rootScope.$$childHead;
    while (scope) {
        var nextScope = scope.$$nextSibling;
        scope.$destroy();
        scope = nextScope;
    }

    /*
* Iterate the properties of the $rootScope and delete 
* any that possibly were set by us but leave the 
* Angular-internal properties and functions intact so we 
* can re-use the application.
*/
    for(var prop in $rootScope){
        if (($rootScope[prop]) 
            && (prop.indexOf('$$') != 0) 
            && (typeof($rootScope[prop]) === 'object')
           ) {
            $rootScope[prop] = null;
        }
    }
}

To see it in action, check out the Fiddle http://jsfiddle.net/010b62ry/5/

Although the solution works, it feels like performing black magic. My suggestion would be to have one app with multiple controllers for a cleaner approach.

Answer 2

After stumbling upon a discussion on How to destroy an angularjs app?, I decided to experiment with code to recreate the main-content div.

Here is the HTML code snippet:

<nav>
    <a onclick="loadApp(['app1'])">Load app n°1</a>
    <a onclick="loadApp(['app2'])">Load app n°2</a> 
</nav>
<div id="main-content-wrap">
    <div id="main-content" class="app">
        <div ng-view></div>
    </div>
</div>

Here is the JavaScript code snippet:

angular.module('app1', ['ngRoute']);
angular.module('app1')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .otherwise({
        template: 'hello app n°1'
    });
}]);
angular.module('app2', ['ngRoute']);
angular.module('app2')
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .otherwise({
        template: 'hello app n°2'
    });
}]);

var mainContent = document.getElementById('main-content');
var mainContentWrap = document.getElementById('main-content-wrap');
var mainContentHTML = mainContentWrap.innerHTML;
window.loadApp = function(modules) {
    if (window.currentApp) {
        destroyApp(window.currentApp);
        mainContentWrap.removeChild(mainContent);
        mainContentWrap.innerHTML = mainContentHTML;
        mainContent = document.getElementById('main-content');
    }
    window.currentApp = angular.bootstrap(mainContent, modules);
}

function destroyApp(app) {
    /*
* Iterate through the child scopes and kill 'em
* all, because Angular 1.2 won't let us $destroy()
* the $rootScope
*/
    var $rootScope = app.get('$rootScope');
    var scope = $rootScope.$$childHead;
    while (scope) {
        var nextScope = scope.$$nextSibling;
        scope.$destroy();
        scope = nextScope;
    }

    /*
* Iterate the properties of the $rootScope and delete 
* any that possibly were set by us but leave the 
* Angular-internal properties and functions intact so we 
* can re-use the application.
*/
    for(var prop in $rootScope){
        if (($rootScope[prop]) 
            && (prop.indexOf('$$') != 0) 
            && (typeof($rootScope[prop]) === 'object')
           ) {
            $rootScope[prop] = null;
        }
    }
}

To see it in action, check out the Fiddle http://jsfiddle.net/010b62ry/5/

Although the solution works, it feels like performing black magic. My suggestion would be to have one app with multiple controllers for a cleaner approach.

Is it possible to hand-load/unload modules using angular.bootstrap?

Answer №1

Similar questions

What is the best way to append data to the end of an object using ReactJS Hooks?

Determine whether a subdomain is present within an ajax file in php

Explore how to set up Express with React without resorting to using create-react

A guide to showcasing tabs as a navigation menu based on media size using AngularJS

Node.js Application with Role-Based Login

Getting an error message of 'Unable to locate Firebase Storage Default Bucket on the server?

What is the best way to retrieve data from app.post within react.js?

Using ExpressJS and Jade to submit a form using the POST method and redirecting to a specified path

angular establish Header when an image is loaded

Manipulating the value of an array obtained from an API alters its data when trying to log it in the render function of a React TSX component

Activate the bootstrap modal display using PHP code

Tips for creating a partial matching filter on an array using elements from a separate array

Encountering the error message: "TypeError [ERR_INVALID_ARG_TYPE]: The initial parameter should either be a string, Buffer instance, or Uint8Array."

PHP code cannot be outputted to JavaScript due to a syntax error

Ensure you always achieve Infinity by accurately calculating the bounding box of objects in A-Frame

Accessing Ionic rootScope within the config stateprovider - A step-by-step guide

Web page experiencing "increased magnification during loading"

Navigating to a different page in the app following a document update: a step-by-step guide

Using Puppeteer-cluster along with cheerio in an express router API results in an unexpectedly blank response

Navigating through tabs in a Meteor application: How to maintain the active tab when using the back button