卸载/销毁Angular延迟加载的组件 [英] unloading/destroying Angular lazy loaded components
问题描述
我的设置类似于此处的帖子 http://ify.io / lazy-loading-in-angularjs / 来处理延迟加载我在Angular中的应用程序的各个组件。
我遇到的问题是更多组件一加载，应用程序的内存占用量增长（显而易见，我知道）。是否有一种干净的方法来卸载或破坏已经延迟加载的角度服务/控制器/指令/等？
简单示例（供参考）
app.js
var app = angular.module（'parentApp' ，['ui.router']）。config（function（$ stateProvider，$ urlRouterProvider，$ controllerProvider，$ compileProvider，$ filterProvider，$ provide）{
var app = angular.module（'app '，['ui.router']）
.config（函数（$ stateProvider，$ urlRouterProvider，$ controllerProvider，$ compileProvider，$ filterProvider，$ provide）{
app.lazy = {
controller：$ controllerProvider.register，
指令：$ compileProvider.directive，
filter：$ filterProvider.register，
factory：$ provide.factory，
service ：$ provide.service
};
$ urlRouterProvider.otherwise（ /家庭）;
$ stateProvider
.state（'home'，{
url：'/ home'，
templateUrl：'views / main.html'，
controller：' MainCtrl'
}）
.state（'lazyLoad'，{
url：'/ lazyLoad'，
templateUrl：'views / lazyLoad.html'，
controller ：'lazyLoadCtrl'，
resolve：{
promiseObj：function（$ q，$ rootScope）{
var deferred = $ q.defer（）;
var dependencies = [
'scriles / controllers / lazyLoad.js'
];
$ script（dependencies，function（）{
$ rootScope。$ apply （function（）{
deferred.resolve（）;
}）;
}）;
return deferred.promise;
}
}
}）;
}）;
和延迟加载的控制器lazyLoad.js
angular.module（'app'）
.lazy.controller（'lazyLoadCtrl'，function（$ scope）{
$ scope.greeting ='hi there ';
}
）;
如果用户导航到＃/ lazyLoad ，应用程序将加载到控制器（和视图），以及它告诉它需要的其他任何东西。但是当用户离开＃/ lazyload 时，我希望所有以前加载的组件都被卸载/销毁。
如何完全取消注册/销毁/卸载（不确定这里的正确动词是什么......）'lazyLoadCtrl'控制器。如上所述，理想情况下，我希望能够在不再需要时卸载延迟加载的控制器，指令，过滤器，工厂和服务。
谢谢！
也许你可以尝试调用范围。$ destroy（）
来自angularjs范围doc https://docs.angularjs.org/api /ng/type/$rootScope.Scope
$ destroy（）;
从父作用域移除当前作用域（及其所有子作用域）。删除意味着对$ digest（）的调用将不再传播到当前范围及其子节点。删除还意味着当前范围符合垃圾收集条件。
$ destroy（）通常由指令（如ngRepeat）用于管理循环的展开。 / p>
在范围被销毁之前，在此范围内广播$ destroy事件。应用程序代码可以注册$ destroy事件处理程序，使其有机会执行任何必要的清理。
注意，在AngularJS中，还有一个$ destroy jQuery事件，可以在从DOM中删除元素之前清除DOM绑定。
I have a setup that is similar to the post found here http://ify.io/lazy-loading-in-angularjs/ to handle lazy loading various components of my app in Angular.
The problem I'm having is that the more components one loads, the memory footprint of the app grows (obvious, I know). Is there a clean way to 'unload' or 'destroy' angular services / controllers/ directives / etc that have been lazy loaded?
simple example (for reference)
app.js
var app = angular.module('parentApp', ['ui.router']).config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
var app = angular.module('app', ['ui.router'])
.config(function ($stateProvider, $urlRouterProvider, $controllerProvider, $compileProvider, $filterProvider, $provide) {
app.lazy = {
controller: $controllerProvider.register,
directive: $compileProvider.directive,
filter: $filterProvider.register,
factory: $provide.factory,
service: $provide.service
};
$urlRouterProvider.otherwise('/home');
$stateProvider
.state('home', {
url: '/home',
templateUrl: 'views/main.html',
controller: 'MainCtrl'
})
.state('lazyLoad', {
url: '/lazyLoad',
templateUrl: 'views/lazyLoad.html',
controller: 'lazyLoadCtrl',
resolve: {
promiseObj: function ($q, $rootScope) {
var deferred = $q.defer();
var dependencies = [
'scripts/controllers/lazyLoad.js'
];
$script(dependencies, function () {
$rootScope.$apply(function () {
deferred.resolve();
});
});
return deferred.promise;
}
}
});
});
and the lazy loaded controller lazyLoad.js
angular.module('app')
.lazy.controller('lazyLoadCtrl', function($scope){
$scope.greeting = 'hi there';
}
);
If a user navigates to #/lazyLoad, the app will load in the controller (and view), and what ever else it is told it needs. But when the user navigates away from #/lazyload, I want all the previously loaded components to be unloaded / destroyed.
How would I entirely de-register / destroy / unload (not sure what the correct verb would be here...) the 'lazyLoadCtrl' controller. As stated above, Ideally I'd like to be able to unload the lazy loaded controllers, directives, filters, factories and services, once they are no longer needed.
Thanks!
Maybe you can try calling scope.$destroy()
From the angularjs scope doc https://docs.angularjs.org/api/ng/type/$rootScope.Scope
$destroy(); Removes the current scope (and all of its children) from the parent scope. Removal implies that calls to $digest() will no longer propagate to the current scope and its children. Removal also implies that the current scope is eligible for garbage collection.
The $destroy() is usually used by directives such as ngRepeat for managing the unrolling of the loop.
Just before a scope is destroyed, a $destroy event is broadcasted on this scope. Application code can register a $destroy event handler that will give it a chance to perform any necessary cleanup.
Note that, in AngularJS, there is also a $destroy jQuery event, which can be used to clean up DOM bindings before an element is removed from the DOM.
这篇关于卸载/销毁Angular延迟加载的组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
