Avoiding memory leaks in AngularJS applications

What You’ll Learn

What causes memory leaks in AngularJS
Best practices to prevent memory leaks
How to clean up event listeners, watchers, and DOM references
Tools for detecting and fixing memory leaks

---

1️⃣ Understanding Memory Leaks in AngularJS

What is a Memory Leak?

A memory leak occurs when an application fails to release memory that is no longer needed. Over time, this can cause performance issues and eventually crash the browser.

Common Causes of Memory Leaks in AngularJS

Unremoved $watch and $watchCollection bindings
Uncleaned event listeners ($on, window.addEventListener)
Unused DOM elements retained in memory
Circular references in services or factories
Not destroying $interval or $timeout functions

---

2️⃣ Best Practices to Avoid Memory Leaks

1. Unregister $watch and $watchCollection

Problem:

Each $watch adds a new watcher to AngularJS’s digest cycle. If not removed, they remain in memory forever.

Bad Practice (Leads to Memory Leak):

$scope.$watch('data', function(newVal, oldVal) {
    console.log("Data changed:", newVal);
});

This never gets removed, causing performance issues.

Good Practice (Clean Up $watch)

var unbindWatcher = $scope.$watch('data', function(newVal, oldVal) {
    console.log("Data changed:", newVal);
});

// Unregister when the scope is destroyed
$scope.$on('$destroy', function() {
    unbindWatcher();
});

Why? It removes the watcher when the controller is destroyed.

---

2. Unbind $on Event Listeners

Problem:

If you use $on to listen for events and forget to unbind, the event listener stays in memory even after navigating away.

Bad Practice (Event Listener Memory Leak):

$scope.$on('customEvent', function(event, data) {
    console.log("Received event:", data);
});

Good Practice (Unregister $on)

var eventListener = $scope.$on('customEvent', function(event, data) {
    console.log("Received event:", data);
});

$scope.$on('$destroy', function() {
    eventListener(); // Unregister the event
});

Why? Prevents the event listener from persisting after the scope is destroyed.

---

3. Remove $timeout and $interval

Problem:

If you use $timeout or $interval and forget to cancel them, they keep running even after leaving the page.

Bad Practice (Causes Memory Leak):

$scope.timer = $interval(function() {
    console.log("Running...");
}, 1000);

Good Practice (Destroy $interval and $timeout)

$scope.timer = $interval(function() {
    console.log("Running...");
}, 1000);

$scope.$on('$destroy', function() {
    $interval.cancel($scope.timer);
});

Why? Prevents unnecessary timers from running after the component is destroyed.

---

4. Clean Up window.addEventListener

Problem:

Event listeners attached to window or document remain even after the controller is destroyed.

Bad Practice (Event Listener Leak):

jsCopyEditwindow.addEventListener('resize', function() {
    console.log("Window resized");
});

Good Practice (Remove Event Listener on $destroy)

function resizeHandler() {
    console.log("Window resized");
}

window.addEventListener('resize', resizeHandler);

$scope.$on('$destroy', function() {
    window.removeEventListener('resize', resizeHandler);
});

Why? It ensures the event listener is removed when the scope is destroyed.

---

5. Avoid Direct DOM Manipulation

Problem:

Manually selecting and manipulating elements using document.getElementById or jQuery can lead to dangling references, causing memory leaks.

Bad Practice (Retains DOM Elements in Memory):

var element = document.getElementById("myDiv");
element.innerHTML = "Updated Text";

Good Practice (Use AngularJS Directives Instead)

app.directive('updateText', function() {
    return {
        link: function(scope, element) {
            element.text("Updated Text");
        }
    };
});

Why? AngularJS directives manage the DOM more efficiently.

---

6. Use One-Time Binding for Static Data (::)

Problem:

By default, AngularJS keeps watching for changes even when data never changes.

Bad Practice (Creates Unnecessary Watchers):

<h1>{{ user.name }}</h1>

Good Practice (Use One-Time Binding)

<h1>{{ ::user.name }}</h1>

Why? Prevents unnecessary watchers for static values, improving performance.

---

7. Use $scope.$destroy() for Manually Created Scopes

Problem:

If you create a new scope manually, you must destroy it manually, or it will stay in memory forever.

Bad Practice (Memory Leak)

var childScope = $scope.$new();
childScope.name = "John";

Good Practice (Destroy the Scope Manually)

var childScope = $scope.$new();
childScope.name = "John";

// Destroy manually when done
childScope.$destroy();

Why? Ensures proper memory cleanup.

---

3️⃣ Tools to Detect Memory Leaks in AngularJS

Chrome DevTools – Heap Snapshot

1️⃣ Open Chrome DevTools (F12 → Memory tab)
2️⃣ Click Take Heap Snapshot
3️⃣ Look for Detached DOM Nodes
4️⃣ Identify Large Retained Objects

---

AngularJS Batarang Extension

1️⃣ Install Batarang from Chrome Web Store
2️⃣ Open DevTools → AngularJS Tab
3️⃣ Monitor $watchers, $scopes, and memory usage

---

4️⃣ Final Summary

Issue	Fix
Unremoved $watch	Unregister in $destroy
Persistent $on events	Unbind in $destroy
Running $timeout & $interval	Cancel in $destroy
Unremoved window.addEventListener	Remove in $destroy
Direct DOM Manipulation	Use AngularJS directives
Too many watchers	Use one-time binding (::)
Manually created $scope.$new()	Call $destroy() manually