AngularJS Digest Cycle Deep Dive

अब हम आ गए हैं AngularJS के core engine के सबसे ज़रूरी और कम समझे गए हिस्से में — जो हर AngularJS developer को जरूर समझना चाहिए:

🧠 AngularJS Digest Cycle Deep Dive

(Data binding, watchers और UI updates कैसे internally काम करते हैं — पूरी गहराई से!)

---

📌 Digest Cycle क्या होता है?

AngularJS का digest cycle एक internal process है जो यह सुनिश्चित करता है कि:

आपके model (JavaScript variables) और view (HTML) हमेशा synchronized रहें।

जैसे ही data बदलता है (e.g., ng-model, $scope.name = 'Rahul'), AngularJS digest cycle शुरू करता है और DOM में उस बदलाव को reflect करता है।

---

🎯 Digest Cycle का Core Purpose:

• $scope variables की निगरानी (watching)
• Model और View को sync करना
• Change detection करना
• DOM को update करना

---

✅ Digest Cycle कैसे काम करता है?

1. AngularJS हर binding ({{ }}, ng-model, आदि) के लिए एक watcher बनाता है।
2. जब कोई event होता है (जैसे user input, $http, या function call), तो AngularJS:
   • $digest() या $apply() call करता है
   • सभी watchers को loop में check करता है
3. अगर कोई value बदली हो, तो उसे DOM में update करता है
4. यह loop तब तक चलता है जब तक कोई भी value change न हो (max 10 iterations)

---

🔄 Diagram (Simplified)

User Input / Code Change
        ↓
   $apply() Trigger
        ↓
   $digest() Start
        ↓
  Loop through Watchers
        ↓
Compare old vs new values
        ↓
Update DOM if changed
        ↓
Repeat until stable (max 10 times)

---

✅ Watchers कैसे बनते हैं?

हर बार जब आप HTML में AngularJS binding use करते हैं — एक watcher बनता है:

<p>{{ name }}</p>  <!-- यह एक watcher create करता है -->

AngularJS internally:

$scope.$watch('name', function(newVal, oldVal) {
  // runs during each digest cycle
});

---

✅ $digest() vs $apply() — फर्क क्या है?

Method	काम	Use Case
$digest()	सिर्फ current scope और उसके children के watchers चेक करता है	internal use mostly
$apply()	पहले $digest() को trigger करता है, लेकिन किसी outside function से Angular को aware करता है	timers, jQuery events, 3rd-party code

---

Example: $apply() के बिना change update नहीं होता

setTimeout(function() {
  $scope.name = "Rahul";  // DOM में show नहीं होगा
}, 1000);

✅ सही तरीका:

setTimeout(function() {
  $scope.$apply(function() {
    $scope.name = "Rahul";  // अब digest cycle trigger होगा
  });
}, 1000);

---

✅ Manual $watch() Example

$scope.counter = 0;

$scope.$watch('counter', function(newVal, oldVal) {
  console.log("Counter changed from", oldVal, "to", newVal);
});

AngularJS automatically watches counter, और जैसे ही उसकी value बदलती है, watcher run होता है।

---

✅ Nested $digest() Loop

AngularJS 10 बार तक re-check करता है कि कहीं कोई watcher दूसरे watcher को तो change नहीं कर रहा।

Watcher → triggers change → other watcher → again change

📛 अगर change loop बार-बार चलता रहा — तो AngularJS देगा:

10 $digest() iterations reached. Aborting!

---

✅ Performance Tip:

हर watcher एक cost जोड़ता है। जितने ज्यादा watchers, उतना ज्यादा digest time।

• Avoid unnecessary ng-repeat
• Avoid deep object watches
• Use track by in ng-repeat
• Minimize $watch usage

---

🧠 अभ्यास प्रश्न (Exercise)

1. $digest() और $apply() में क्या फर्क है?
2. AngularJS कितने maximum digest iterations चलाता है?
3. एक custom $watch() कब useful होता है?

---

✅ आपने क्या सीखा?

• AngularJS Digest Cycle कैसे data binding को sync करता है
• Internal Watchers क्या हैं और कैसे trigger होते हैं
• $apply() कब use करना चाहिए
• DOM updates behind the scenes
• Performance को optimize कैसे करें

---

🎯 अब आप AngularJS को सिर्फ ऊपर से नहीं, core level पर समझते हैं — जिससे आप bugs को debug करना, performance optimize करना, और behavior समझना सीख गए हैं।