How to reduce/remove memory leaks in Angular application

Question

I am optimizing my large Angular App. As I found a that Google DevTools is very good to detect problems. As I just have started learning about De

Answer 1

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