angular.bootstrap을 사용하여 모듈을 수동으로로드/언로드합니까?

Question

내 문제는 다음과 같습니다. AngularJS 앱을 메뉴의 다른 항목을 클릭 할 때 "기본 콘텐츠"섹션에서 바로로드/언로드 할 수있는 단일 페이지 응용 프로그램을 만들고 싶습니다.

하지만이 방법을 알아낼 수 없습니다. angular.bootstrap 기능을 사용할 때 항상 ng:btstrpd 오류가 발생합니다.

나는 다음과 같은 코드를 사용하여 응용 프로그램을로드 : http://jsfiddle.net/010b62ry/

내가 DOM 요소를 제거하고 다시 다시 삽입을 시도하지만 (중복 같은) 이상한 행동을 얻을 : 여기

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

것은 jsfiddle입니다 . 나는 모듈이 언로드되지 않았다고 생각한다. 나는 또한 이렇게하는 동안 <!-- ngView: --> 톤의 의견을 가지고 있습니다.

누구든지이 기능을 구현하는 방법에 대해 좋은 생각이 있습니까? 한 응용 프로그램에서 다른 응용 프로그램으로 전환 할 때 메모리가 해제되면 보너스 포인트.

추신 :이 응용 프로그램의 소스 코드에 액세스 할 수없는 다른 사람들이 개발할 수있는 모듈이 있기 때문에 100 % 독립적 인 모듈 (자신의 경로를 관리하는 사람)을 실제로 부트 스트랩해야합니다. 모듈을 100 % 자율 응용 프로그램으로 시작하면됩니다.

Answer 1

이 스레드를 발견했습니다. How to destroy an angularjs app?. 주 콘텐츠 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/

그것은 작동하지만 검은 마법처럼 보인다. 나는 하나의 앱과 여러 개의 컨트롤러를 갖는 것이 훨씬 낫다고 생각한다.