unloading/destroying Angular lazy loaded components

Question

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!

Answer 1

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.