用angular.bootstrap手動加載/卸載模塊？

這是我的問題：我想創建一個單頁面應用程序，當點擊菜單的不同條目時，AngularJS應用程序可以在「主要內容」部分中隨時加載/卸載。用angular.bootstrap手動加載/卸載模塊？

但我只是不知道如何做到這一點。當使用angular.bootstrap函數時，我總是得到ng:btstrpd錯誤。

我用下面的代碼加載應用程序：

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

這裏是一個的jsfiddle：http://jsfiddle.net/010b62ry/

我試圖刪除DOM元素，再重新插入，但我得到奇怪的行爲（如重複）。我認爲這些模塊並未卸載。我也有這麼多的評論。

任何人都有關於如何實現這個好主意？如果在從一個應用程序切換到另一個應用程序時釋放內存，則爲獎勵點。 PS：我真的需要引導100％獨立模塊（管理自己的路由等），因爲其中一些模塊可能由無法訪問此應用源代碼的其他人開發。我只需要將它們的模塊作爲100％自主角度應用程序啓動。

來源

2014-10-01 Erwan Swak

可能不是密切相關的，我有一個問題發佈某個時候返回一個不同的問題。它有一個演示..不知道可能會提供一些線索.. http://stackoverflow.com/questions/25537396/override-angular-services-during-config-phase-for-live-mock-feature-with-the- SAM – PSL 2014-10-01 17:09:41

我發現此線程How to destroy an angularjs app?。雖然我添加了代碼來重新創建main-content div。

HTML代碼：

<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>

JS：

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; 
     } 
    } 
}

和小提琴http://jsfiddle.net/010b62ry/5/

它的工作原理，但它看起來像一個黑魔法。我認爲擁有一個應用程序和多個控制器會更好。

來源

2014-10-02 00:42:23

用angular.bootstrap手動加載/卸載模塊？

回答

相關問題