AngularJS $watch, $digest & $apply

अब हम सीखेंगे AngularJS का एक internal और थोड़ा advanced लेकिन बहुत ही ज़रूरी चैप्टर, जिससे आप समझ पाएँगे कि AngularJS two-way binding असल में कैसे काम करती है:

🧠 AngularJS $watch, $digest और $apply

(Scope के अंदर Data Change को Track और Update करने की प्रक्रिया)

---

📌 Overview

AngularJS की सबसे ताकतवर चीज़ है: Two-Way Data Binding
लेकिन इसके पीछे जो magic होता है वो है —
👉 $watch() + $digest() + $apply() का सिस्टम

---

🎯 3 Concepts की एक-लाइन में समझ:

Term	आसान परिभाषा
$watch()	“मैं देख रहा हूँ ये variable कब बदलता है”
$digest()	“मैं सारे watchers को check करता हूँ कि कुछ बदला या नहीं”
$apply()	“कुछ बाहर से बदला है? चलो Angular को बता देते हैं”

---

✅ 1. $scope.$watch()

क्या करता है?

• किसी variable या expression को “watch” करता है
• अगर उसमें कोई बदलाव आता है, तो callback function run होता है

Syntax:

$scope.$watch('expression', function(newVal, oldVal) {
  // बदलाव होने पर ये code चलेगा
});

Example:

$scope.name = "Amit";

$scope.$watch('name', function(newValue, oldValue) {
  console.log("Name changed from", oldValue, "to", newValue);
});

जैसे ही $scope.name बदलेगा, callback trigger होगा।

---

✅ 2. $scope.$digest()

क्या करता है?

• सभी $watch() को manually check करता है कि कोई बदलाव हुआ या नहीं
• AngularJS internally इसे हर event या input के बाद call करता है

कब use करें?

• जब आप AngularJS के बाहर से DOM या data बदलें (जैसे setTimeout, jQuery आदि से)

Example (Without $digest()):

setTimeout(function() {
  $scope.name = "Rahul"; // Angular को पता नहीं चलेगा
}, 2000);

इस case में Angular binding update नहीं होगी।

Example (With $digest()):

setTimeout(function() {
  $scope.name = "Rahul";
  $scope.$digest(); // Angular अब detect करेगा
}, 2000);

---

✅ 3. $scope.$apply()

क्या करता है?

• किसी external function को Angular के digest cycle में wrap करता है
• Internally यह $digest() को trigger करता है

Recommended: हमेशा $apply() use करें — $digest() से safe रहता है

Example:

setTimeout(function() {
  $scope.$apply(function() {
    $scope.name = "Suman";
  });
}, 2000);

अब AngularJS को मालूम पड़ेगा कि name बदल गया है।

---

✅ Example Scenario Summary:

Situation	क्या करें?
Input से value बदली	Angular auto handle करेगा
JS से DOM बदला (jQuery)	$scope.$apply() या $digest() manually लगाएँ
Complex logic के बाद model update	$apply() से wrap करें
Variable change पर कुछ event trigger करना है	$watch() use करें

---

🚨 Warning:

• बार-बार $digest() या $apply() manually use करना गलत design माने जाते हैं
• AngularJS खुद इसे mostly handle करता है — ज़रूरत होने पर ही use करें
• Wrong use से “digest already in progress” जैसे errors आ सकते हैं

---

💡 Real-world Use Case:

$scope.$watch('user.score', function(newScore) {
  if (newScore >= 90) {
    $scope.rank = "Gold";
  }
});

जैसे ही user का score बदलेगा, rank auto update होगी।

---

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

1. $watch() और $digest() में क्या अंतर है?
2. AngularJS के बाहर से data update किया जाए तो कौन-सी method use करनी चाहिए?
3. नीचे दिए गए code में क्या गड़बड़ी है?

setTimeout(function() {
  $scope.name = "Anil";
});

---

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

• $watch() से variable को observe करना
• $digest() से manually changes detect करना
• $apply() से external updates को Angular में लाना
• Two-way data binding के पीछे का core mechanism
• Safe usage और errors से बचाव

---

🎯 अब आप AngularJS के internal change detection system को अच्छे से समझ चुके हैं — जिससे आप बना सकते हैं responsive और controlled apps।