AngularJS Data Binding

📌 Data Binding क्या होता है?

Data Binding एक technique है जिससे आपके App का UI (View) और Data (Model) एक-दूसरे से connected रहते हैं।

आसान भाषा में: जब आप डेटा बदलते हैं, तो UI अपने-आप बदल जाता है। और जब UI में कुछ input देते हैं, तो डेटा भी अपने-आप अपडेट हो जाता है।

🔁 AngularJS में कौन-सा Data Binding होता है?

✅ Two-Way Data Binding

AngularJS का सबसे बड़ा feature है इसका two-way data binding, मतलब:

Model (data) में change ⇒ View automatic update
View (UI) में change ⇒ Model automatic update

✍️ Basic Syntax

<input type="text" ng-model="name">
<p>Hello, {{ name }}!</p>

ng-model="name" → Data को View से bind करता है
{{ name }} → View में data को show करता है

🎯 Example: Real-Time Data Binding

<!DOCTYPE html>
<html ng-app="">
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
</head>
<body>

<h2>AngularJS Data Binding</h2>

<p>Enter your name: <input type="text" ng-model="yourName"></p>
<p>Welcome, {{ yourName }}!</p>

</body>
</html>

🔍 Output:

जैसे ही आप name टाइप करेंगे, नीचे automatic live update होगा।

🔍 Data Binding के प्रकार (Types of Binding in AngularJS)

प्रकार	Description
Two-Way Binding	Model और View दोनों जुड़े रहते हैं (`ng-model`)
One-Way Binding (View to Model)	View में expression के ज़रिए data show (`{{ }}`)
One-Way Binding (Model to View)	Input में सिर्फ readonly value show (`ng-bind`)

🔄 `ng-bind` vs `{{ expression }}`

`{{ name }}`	`ng-bind="name"`
Expression format	Directive format
कभी-कभी “flashing” दिखता है	ज़्यादा smooth और fast

<p ng-bind="yourName"></p>

🧠 एक और Example: Calculator

<div ng-app="">
  <input type="number" ng-model="num1">
  +
  <input type="number" ng-model="num2">
  =
  {{ num1 + num2 }}
</div>

Output में जैसे ही आप num1 और num2 change करेंगे, sum भी automatic change होगा।

💡 Why is Two-Way Binding Powerful?

कोई भी manual DOM update नहीं करना पड़ता
Real-time data reflection
Code कम और साफ़
Forms को बनाना बहुत आसान

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

AngularJS में ng-model क्या करता है?
Two-way और one-way data binding में क्या अंतर है?
नीचे दिए गए code में क्या होगा?

<input ng-model="a">
<input ng-model="b">
<p>{{ a * b }}</p>

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

AngularJS Data Binding क्या होता है
Two-Way vs One-Way Binding
ng-model, ng-bind, और {{ }} कैसे काम करते हैं
Real-life examples और अभ्यास

🎯 अब आपका UI और Data दोनों आपस में गहराई से जुड़ चुके हैं!

← Previous Next →

Angular JS Tutorial