AngularJS DOM

📌 DOM क्या होता है?

DOM (Document Object Model) HTML का programming version होता है।
Browser HTML page को DOM में बदलता है ताकि JavaScript जैसे languages उससे interact कर सकें।

आसान भाषा में: HTML को JavaScript के लिए “ज़िंदा और interactive” बनाने का नाम है — DOM.

---

📌 AngularJS DOM के साथ कैसे काम करता है?

AngularJS DOM को control करने के लिए:

• Special directives देता है
• Conditions, loops, events और animations handle करता है
• DOM elements को create, hide, repeat, या modify करता है — बिना सीधे document.getElementById() जैसी traditional JS के

---

🎯 DOM को Control करने वाले कुछ Common AngularJS Directives

Directive	काम
ng-show	Element को दिखाता है जब condition true हो
ng-hide	Element को छुपाता है जब condition true हो
ng-if	Element को DOM में add/remove करता है
ng-repeat	List से multiple elements बनाता है
ng-click	किसी element पर click event trigger करता है
ng-disabled	Button या input को disable करता है

---

✅ Example 1: ng-show, ng-hide

<div ng-app="" ng-init="isVisible=true">
  <button ng-click="isVisible = !isVisible">Toggle</button>
  <p ng-show="isVisible">This is visible when isVisible is true.</p>
</div>

Output: बटन से paragraph शो/हाइड होता है।

---

✅ Example 2: ng-if (DOM से completely remove/add)

<div ng-app="" ng-init="showMsg=true">
  <button ng-click="showMsg = !showMsg">Toggle Message</button>
  <p ng-if="showMsg">Hello, I exist only in DOM when true!</p>
</div>

ng-if जब false होता है तो DOM से element हट जाता है (inspect में नहीं दिखेगा)

---

✅ Example 3: ng-repeat (Dynamic Elements in DOM)

<div ng-app="" ng-init="fruits=['Apple','Banana','Mango']">
  <ul>
    <li ng-repeat="fruit in fruits">{{ fruit }}</li>
  </ul>
</div>

Output: List DOM में dynamic तरीके से बनेगी।

---

✅ Example 4: ng-click (User Event से DOM बदलना)

<div ng-app="" ng-init="count=0">
  <button ng-click="count = count + 1">Click Me</button>
  <p>You clicked: {{ count }} times</p>
</div>

DOM में count update होता रहेगा।

---

🔧 AngularJS में Direct DOM Access कब करें?

AngularJS का philosophy है — “Don’t touch the DOM directly”
लेकिन अगर ज़रूरत हो, तो $element, directive, या $compile का use करके आप DOM access कर सकते हैं (Advanced topic).

---

📦 AngularJS vs Traditional JS DOM Handling

Traditional JS	AngularJS
document.getElementById	ng-model, ng-bind
onclick	ng-click
innerHTML	{{ data }}
show/hide via CSS	ng-show, ng-hide, ng-if
loops via JS	ng-repeat

AngularJS code छोटा, readable और HTML-friendly होता है।

---

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

1. ng-show और ng-if में क्या फर्क है?
2. DOM को modify करने के लिए AngularJS कौन-कौन से directives देता है?
3. ng-repeat का क्या काम है DOM में?

---

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

• DOM क्या होता है और AngularJS उसमें कैसे काम करता है
• ng-show, ng-hide, ng-if, ng-click, ng-repeat जैसे directives
• AngularJS के DOM interaction JavaScript से कैसे अलग हैं
• Realtime examples और practical use cases

---

🎯 अब आप AngularJS से DOM को साफ़, structured और interactive तरीके से manage कर सकते हैं — बिना लंबा JavaScript code लिखे!