AngularJS में डेटा बाइंडिंग मॉडल और view घटकों के बीच डेटा के automatic synchronization है डेटा बाइंडिंग को सॉफ्टवेयर के विकास और technologies के लिए उपयोग में लाया जाता है data binding एक बहुत ही उपयोगी सुविधा है यह एप्लिकेशन के दृश्य व्यवसाय और तर्क के बीच एक पुल के रूप में कार्य करता है
अधिकांश templates सिस्टम केवल एक दिशा में डेटा बाइंड करते हैं ये एक दृश्य में template और मॉडल घटकों को एक साथ मर्ज करते हैं मर्ज होने के बाद, मॉडल या दृश्य के संबंधित section में change होता है और वह दृश्य में स्वतः दिखाई नहीं देते है
यह मॉडल में reflected नहीं होते है इसका मतलब यह है कि developer को कोड लिखना पड़ता है जो view के साथ दृश्य और मॉडल के साथ दृश्य को लगातार समन्वयित करता है
डेटा बाइंडिंग दो प्रकार के होते है
One-Way Data Binding
Two-way Data Binding
One-Way डेटा बाइंडिंग में, दृश्य automatic रूप से अद्यतन नहीं होता है और डेटा मॉडल बदल जाता है हमको हर बार update करने के लिए कस्टम कोड लिखना पड़ता है यह एक synchronization प्रक्रियाओं नहीं है और यह एक ही तरह से डेटा को संसाधित करेगा
Two-Way डेटा बाइंडिंग में, डेटा मॉडल बदलते समय दृश्य automatic रूप से अपडेट होता है एनजी-मॉडल directive का उपयोग करते हुए हम Two-Way डेटा बाइंडिंग को प्राप्त कर सकते हैं यदि हम एचटीएमएल नियंत्रण में एनजी-मॉडल directive का उपयोग करते हैं, तो यह इनपुट automatic रूप से अपडेट हो जाता है और डेटा इनपुट नियंत्रण में बदल जाता है
<!DOCTYPE html> <html> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> <body> <div ng-app="" ng-init="firstName='Ram'"> <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>
Input something in the input box:
Name:
You wrote: {{ firstName }}