How to reduce/remove memory leaks in Angular application

by

  1. Remove bindings to avoid memory leaks, Use Scopes
    $destroy() Method.

    Note:

    The most likely culprit of memory leak in Angular is JQuery used in
    your directives. If you attach an event-listener in your directive
    using a JQuery plugin, the latter would keep a reference to your DOM
    even after Angular deletes its own reference to the DOM, which means
    it would never be garbage-collected by the browser, which in turn
    means “Detached DOM tree” in your memory

    In your Directive keep practice for unbinding the jQuery Event.
    $destory Method which can be used to clean up DOM bindings before an
    element is removed from the DOM.

     $scope.$on("$destroy",function() {
    $( window ).off( "resize.Viewport" );
 });

  2. Don’t Forget To Cancel $timeout Timers In Your $destroy Events In
    AngularJS

    $scope.$on("$destroy",function( event ) {
    $timeout.cancel( timer );
});

Leave a Comment