AngularJS मे Data Binding Model और View Components के बीच Data के Automatic Synchronization होते है. Data Binding को Software के Development और Technologies के लिए उपयोग मे लाया जाता है. Data Binding एक बहुत ही उपयोगी सुविधा है यह Application के Visual Business और Argument के बीच एक Bridge के रूप मे कार्य करता है.
अधिकांश Templates केवल एक दिशा मे Data Bind करते है. यह एक View मे Template और Model Components को एक साथ Merge करते है Merge होने के बाद यह Model या View के संबंधित Section मे Change होता है और वह View मे स्वत दिखाई नही देते है.
यह Model मे Reflected नही होते है. इसका मतलब यह है कि Developer को Code लिखना पड़ता है जो View के साथ View और Model के साथ View को लगातार समन्वयित करता है.
Data Binding दो प्रकार के होते है
One-Way Data Binding
Two-way Data Binding
One-Way Data Binding मे View Automatic रूप से Updates नही होता है और Data Model बदल जाता है. हमको हर बार Update करने के लिए Custom Code लिखना पड़ता है . यह एक Synchronization Procedures नही है और यह एक ही तरह से Data को Processed करेगा.
Two-Way Data Binding मे Data Model बदलते समय View Automatic रूप से Update होता है. Ng-model Directive का उपयोग करते हुए हम Two-Way Data Binding को प्राप्त कर सकते है. यदि हम HTML नियंत्रण मे Ng-model Directive का उपयोग करते है तो यह Input Automatic रूप से Update हो जाता है और Data Input नियंत्रण मे बदल जाता है.
<!DOCTYPE html>
<html>
<head>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<div ng-app="" ng-init="firstName='Ali'">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="firstName"></p>
<p>You wrote: {{ firstName }}</p>
</div>
</body>
</html>
उपर्युक्त उदाहरण मे {{firstName}} Expression एक AngularJS Data Binding Expression है. AngularJS मे Data Binding AngularJS Data के साथ AngularJS Expressions का Binding है.
{{ firstName }} is bound with ng-model="firstName"
आइए एक और उदाहरण देखते है जहां दो Text Field दो Ng-model Instructions के साथ एक साथ बंधे है.
<!DOCTYPE html>
<html>
<head>
<script src =
"http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js">
</script>
</head>
<body>
<div data-ng-app="" data-ng-init="quantity=1;price=20">
<h2>Cost Calculator</h2>
Quantity: <input type="number" ng-model="quantity">
Price: <input type="number" ng-model="price">
<p><b>Total in rupees:</b> {{quantity * price}}</p>
</div>
</body>
</html>