Course Progress 19%

AngularJS Data Binding

← AngularJS Model AngularJS Controllers →

AngularJS Data Binding एक core concept है जो Model और View के बीच automatic synchronization प्रदान करता है। इसका मतलब है कि जब भी data change होता है, UI अपने आप update हो जाता है और जब user UI में कोई change करता है, तो Model भी अपने आप update हो जाता है।

AngularJS में data binding के कारण application reactive और dynamic बनता है।

Data Binding क्या है

Data Binding वह process है जिसके जरिए application data (Model) और HTML UI (View) आपस में जुड़े रहते हैं। AngularJS इस binding को internally manage करता है, जिससे developer को manual DOM manipulation नहीं करनी पड़ती।

AngularJS में Data Binding के Types

AngularJS मुख्य रूप से दो प्रकार की data binding provide करता है:

  • One-Way Data Binding
  • Two-Way Data Binding

One-Way Data Binding

One-Way Data Binding में data सिर्फ Model से View की तरफ flow करता है।

<div ng-app ng-init="message='Hello AngularJS'">
  <p>{{message}}</p>
</div>

यहाँ अगर Model change होगा तो View update होगा, लेकिन View से Model update नहीं होगा।

Two-Way Data Binding

Two-Way Data Binding AngularJS की सबसे बड़ी ताकत है। इसमें Model और View दोनों एक-दूसरे को update करते हैं।

<div ng-app ng-init="name='AngularJS'">
  <input type="text" ng-model="name">
  <p>Hello {{name}}</p>
</div>

इस example में:

  • Input बदलने पर Model change होता है
  • Model change होने पर View update होता है

ng-model और Data Binding

ng-model directive Two-Way Data Binding को implement करता है। यह form controls को data से bind करता है।

<input type="text" ng-model="username">

ng-model के बिना Two-Way Data Binding possible नहीं है।

Data Binding with Controller

Real applications में data binding controller के data के साथ होती है।

<div ng-app="myApp" ng-controller="myCtrl">
  <input type="text" ng-model="city">
  <p>City: {{city}}</p>
</div>

<script>
  var app = angular.module("myApp", []);
  app.controller("myCtrl", function($scope) {
    $scope.city = "Mumbai";
  });
</script>

Data Binding और Expressions

AngularJS expressions data binding का visual हिस्सा होते हैं।

<p>Total: {{price * quantity}}</p>

Expressions automatically Model से values लेकर calculate करते हैं।

Data Binding और Filters

Filters data binding के साथ data को format करने के लिए use होते हैं।

<div ng-app ng-init="amount=5000">
  <p>Amount: {{amount | currency}}</p>
</div>

Model value वही रहती है, सिर्फ View में format change होता है।

Digest Cycle क्या है

AngularJS data binding internally Digest Cycle के जरिए काम करता है। जब कोई event होता है:

  • AngularJS changes detect करता है
  • Watchers check होते हैं
  • View update होती है

यह पूरा process automatically होता है।

Data Binding के Benefits

AngularJS data binding के फायदे:

  • Manual DOM update की जरूरत नहीं
  • Code clean और readable रहता है
  • UI हमेशा data के साथ sync में रहता है
  • Development speed बढ़ जाती है

Performance Considerations

Large applications में:

  • बहुत ज़्यादा watchers performance impact कर सकते हैं
  • Unnecessary bindings avoid करनी चाहिए
  • Proper scope management जरूरी है

Common Data Binding Mistakes

  • Controller में variable define न करना
  • ng-model को गलत जगह use करना
  • Scope confusion (parent-child scope)
  • Overbinding जिससे performance slow हो जाती है

Summary

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

  • AngularJS Data Binding क्या है
  • One-Way और Two-Way Data Binding
  • ng-model का role
  • Controller के साथ data binding
  • Digest cycle का basic concept
  • Data binding के benefits और common mistakes
← AngularJS Model AngularJS Controllers →
  • Home