AngularJS Digest Cycle

AngularJS Digest Cycle AngularJS framework का सबसे core और critical concept है। यही mechanism decide करता है कि model में हुए changes view में कब और कैसे reflect होंगे। Two-way data binding इसी digest cycle पर based होती है।

इस chapter में आप समझेंगे:

• Digest Cycle क्या है
• यह कब और कैसे run होता है
• $watch, $digest और $apply का role
• Performance impact और best practices

Digest Cycle क्या है

Digest Cycle एक loop है जिसमें AngularJS:

• Scope variables को observe करता है
• पुराने और नए values को compare करता है
• Change मिलने पर view को update करता है

यह cycle तब तक चलती है जब तक सभी values stable न हो जाएँ।

Digest Cycle क्यों जरूरी है

AngularJS automatically नहीं जानता कि data कब change हुआ।
Digest cycle यह responsibility लेता है कि:

• Data change detect हो
• UI sync रहे
• Expressions updated रहें

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

AngularJS हर scope पर watchers register करता है।

Digest cycle में:

1. Watcher expressions evaluate होती हैं
2. Old value और new value compare होती है
3. Change मिलने पर listener execute होता है
4. Cycle repeat होती है जब तक कोई नया change न मिले

Simple Digest Example

$scope.name = "Angular";

AngularJS internally watcher बनाता है:

$scope.$watch("name", function(newVal, oldVal) {
});

Explanation

• Watcher variable change detect करता है
• Change होते ही view update हो जाती है

$watch() Method

$watch() manually watcher create करता है।

$scope.$watch("count", function(newVal, oldVal) {
  if (newVal !== oldVal) {
    console.log("Count changed");
  }
});

Explanation

• First parameter expression होता है
• Second parameter callback function
• Performance cost होती है, इसलिए limited use करें

$watchCollection()

$watchCollection() shallow watch करता है।

$scope.$watchCollection("items", function(newVal) {
});

Explanation

• Array या object structure watch करता है
• Deep watch से faster होता है

Deep Watch (Third Parameter)

$scope.$watch("user", function() {
}, true);

Explanation

• Third parameter true deep watch enable करता है
• Performance expensive होता है

$digest() Method

$digest() manually digest cycle start करता है।

$scope.$digest();

Explanation

• Current scope और child scopes तक limited
• Rare cases में use किया जाता है

$apply() Method

$apply() AngularJS के बाहर से changes inform करता है।

$scope.$apply(function() {
  $scope.value = 100;
});

Explanation

• External code (setTimeout, jQuery) के लिए जरूरी
• $apply() internally $digest() call करता है

$apply() vs $digest()

Feature	$apply()	$digest()
Scope	Whole app	Current + children
Use Case	External changes	Internal use
Safety	Safer	Risky

Digest Cycle कब run होती है

Digest cycle automatically run होती है जब:

• ng-click
• ng-model
• $http
• $timeout
• $interval

Explanation

• AngularJS aware events automatically digest trigger करते हैं

Infinite Digest Error

10 $digest() iterations reached

Explanation

• Circular changes होने पर error आता है
• Watcher listener new changes create करता है

Performance Impact of Digest Cycle

• More watchers = slower app
• Complex expressions expensive होती हैं
• Deep watch performance degrade करता है

Performance Optimization Techniques

• Watchers कम रखें
• One-time binding :: use करें
• track by use करें in ng-repeat
• DOM manipulation avoid करें

One-Time Binding Example

<p>{{::username}}</p>

Explanation

• First digest के बाद watcher remove हो जाता है
• Performance improve होती है

Best Practices

• $watch limited रखें
• $rootScope watchers avoid करें
• $apply unnecessarily call न करें
• Services से data manage करें

Common Mistakes

• हर variable पर $watch लगाना
• $apply multiple times call करना
• jQuery events में digest ignore करना
• Digest errors ignore करना

Summary

इस chapter में आपने सीखा:

• AngularJS Digest Cycle क्या है
• $watch, $digest और $apply
• Digest lifecycle
• Performance impact
• Optimization techniques और best practices