Manual Triggering: $apply() vs $digest() in AngularJS

(AngularJS को manually बताना कि हमने model में बदलाव किया है – और अब DOM update करो)

---

📌 क्यों ज़रूरी है Manual Triggering?

AngularJS का digest cycle स्वतः (automatically) तब चलता है जब:

• ng-model से input बदलता है
• Angular के $http, $timeout, etc. से callback आता है
• कोई directive Angular को internally update बताता है

लेकिन अगर आप AngularJS के बाहर से कोई code चला रहे हों (जैसे: setTimeout, jQuery, 3rd-party JS) — तब Angular को manually बताना पड़ता है कि:

“Model बदल गया है, अब digest चलाओ और DOM update करो।”

---

✅ $apply() क्या है?

$apply() AngularJS को बताता है कि:

एक ऐसा external function चला है जिसमें कुछ model variables बदले गए हैं — अब please digest cycle चलाओ।

Syntax:

$scope.$apply(function() {
  $scope.name = "Rahul";
});

यह internally $rootScope.$digest() को trigger करता है।

---

✅ $digest() क्या है?

$digest() सिर्फ AngularJS के scope के अंदर के watchers को check करता है।

• यह तब use होता है जब आपको full $apply() की ज़रूरत नहीं
• यह खुद $apply() द्वारा call होता है
• ज्यादातर cases में आप इसे direct use नहीं करेंगे, जब तक कि performance-critical या niche case न हो

---

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

Feature	$apply()	$digest()
Scope	पूरे $rootScope से starts	सिर्फ current scope और उसके children
Triggering	Automatically calls $digest()	खुद कोई function wrap नहीं करता
Use When	AngularJS के बाहर से कुछ run हो रहा हो	Already inside AngularJS context
Example Use	setTimeout, jQuery, WebSocket	Custom manual performance tweak
Error-safe	हाँ (try/catch से wrap होता है)	नहीं

---

✅ Practical Example Without $apply() — (Will Not Work)

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

✅ Correct Way Using $apply():

setTimeout(function() {
  $scope.$apply(function() {
    $scope.name = "Anita"; // अब DOM में update होगा
  });
}, 1000);

---

✅ जब सिर्फ $digest() Use करें?

• जब आप जानते हैं कि आप पहले से AngularJS context में हैं
• और performance critical है (e.g., कई updates fast loop में हो रहे हैं)
• या $apply() recursive digest trigger कर रहा है

Example (Not recommended for beginners):

$scope.name = "Raj";
$scope.$digest();  // Only current scope

⚠️ ध्यान दें: अगर आप $digest() के दौरान और model बदलते हैं — infinite loop हो सकता है।

---

✅ Common Gotchas

• $apply() को कभी-कभी AngularJS खुद ही चला देता है (e.g., $http, $timeout)
• $apply() के अंदर फिर से $apply() नहीं चला सकते (error आएगा)
• अगर unsure हैं — $apply() use करें, वो safer है

---

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

1. $apply() और $digest() में execution scope का क्या अंतर है?
2. क्या आप $digest() को $apply() के बाहर use कर सकते हैं?
3. अगर आप 3rd-party JS से model बदलते हैं तो क्या होगा?

---

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

• AngularJS में model changes DOM में कब reflect होते हैं
• $apply() का काम है: outside-in update notify करना
• $digest() का काम है: only watchers run करना
• कब कौन-सा use करना safe है
• Real-world performance और safety considerations

---

🎯 अब आप AngularJS में confidently manual change detection trigger कर सकते हैं — और bugs या unresponsive UI से बच सकते हैं।