AngularJS Includes

📌 AngularJS ng-include क्या है?

AngularJS में ng-include directive का इस्तेमाल हम किसी external HTML file को अपने page में include करने के लिए करते हैं।

आसान भाषा में: आप अपने पेज के एक हिस्से (header, footer, sidebar) को अलग HTML फाइल में बना सकते हैं और फिर main पेज में लाकर reuse कर सकते हैं — जैसे PHP की include.

---

✅ Syntax:

<div ng-include="'filename.html'"></div>

ध्यान दें: File name quotes में देना जरूरी है (' ' या " ")

---

🔄 कब और क्यों इस्तेमाल करें?

Situation	Benefit
Header, Footer बार-बार चाहिए	एक बार बनाकर हर पेज में include कर सकते हैं
Code Reusability	Same HTML बार-बार copy नहीं करना पड़ता
Modular Design	बड़े projects में छोटे-छोटे हिस्सों में बाँटना आसान
Maintainability	बदलाव सिर्फ एक file में करना पड़ता है

---

✅ Example 1: Static Include

👉 header.html

<div class="w3-blue w3-padding">
  <h2>Welcome to AngularJS Site</h2>
</div>

👉 main page:

<div ng-app="">
  <div ng-include="'header.html'"></div>
  <p>This is the main content area.</p>
</div>

Output: Header top पर include हो जाएगा।

---

✅ Example 2: Dynamic Include (Variable से)

<div ng-app="myApp" ng-controller="mainCtrl">
  <select ng-model="template">
    <option value="'home.html'">Home</option>
    <option value="'about.html'">About</option>
  </select>

  <div ng-include="template"></div>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("mainCtrl", function($scope) {
  $scope.template = "'home.html'";
});
</script>

अब dropdown से template बदलने पर अलग-अलग content दिखेगा।

---

⚠️ Important Notes:

• Include करने वाली फाइल में सिर्फ HTML होना चाहिए (script, style को avoid करें)
• Path सही होना चाहिए (relative या absolute)
• CORS या security error न आए इसलिए file अपने ही server से serve होनी चाहिए

---

✅ Practical Use Cases:

Use Case	File
Header	header.html
Footer	footer.html
Sidebar	sidebar.html
User Profile	profile.html
Tabs / Pages	about.html, contact.html, etc.

---

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

1. ng-include का काम क्या है AngularJS में?
2. क्या हम dynamic file भी include कर सकते हैं? कैसे?
3. नीचे दिए गए code का output क्या होगा?

<div ng-include="'footer.html'"></div>

---

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

• AngularJS में external HTML file कैसे include करते हैं
• ng-include static और dynamic दोनों तरीकों से काम करता है
• Code reuse, modularity और maintainability का फायदा
• Practical examples: header, footer, tabs आदि

---

🎯 अब आप AngularJS में अपना HTML code smart तरीक़े से manage और reuse कर सकते हैं — जिससे आपका app बन जाएगा professional और maintainable!