Course Progress 57%

AngularJS Includes

← AngularJS API AngularJS Animations →

AngularJS Includes का उपयोग external HTML files को current page में load करने के लिए किया जाता है। इसका main purpose यह है कि common parts जैसे header, footer, sidebar, menu आदि को अलग-अलग files में रखकर reuse किया जा सके। इससे code clean, maintainable और scalable बनता है।

AngularJS में includes के लिए ng-include directive का उपयोग किया जाता है।

ng-include Directive क्या है

ng-include एक built-in AngularJS directive है जो किसी external HTML file को fetch करके DOM में insert करता है।

Key points:

  • External HTML dynamically load होती है
  • Same content multiple pages में reuse किया जा सकता है
  • SPA structure बनाने में मदद मिलती है

Basic ng-include Example

<div ng-app="myApp">
  <div ng-include="'header.html'"></div>
</div>

Code Explanation

  • ng-include attribute में file path दिया गया है
  • 'header.html' external HTML file है
  • Page load होते ही AngularJS उस file को fetch करके यहाँ render करता है

Complete Example with Header and Footer

index.html

<div ng-app="myApp">
  <div ng-include="'header.html'"></div>

  <h2>Main Content Area</h2>
  <p>This is page content</p>

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

header.html

<h1>My Website Header</h1>
<nav>
  <a href="#">Home</a> |
  <a href="#">About</a>
</nav>

footer.html

<p>Copyright 2026</p>

Code Explanation

  • Header और footer अलग files में रखे गए हैं
  • ng-include उन्हें main page में load करता है
  • Layout change करना आसान हो जाता है

ng-include with Controller

ng-include को controller के साथ भी use किया जा सकता है।

<div ng-app="myApp" ng-controller="mainCtrl">
  <div ng-include="template"></div>
</div>

var app = angular.module("myApp", []);
app.controller("mainCtrl", function($scope) {
  $scope.template = "content.html";
});

Code Explanation

  • Include file का path controller से आता है
  • $scope.template change करने पर include content भी change हो जाता है
  • Dynamic template loading possible होती है

Conditional Include

Condition के आधार पर different files include की जा सकती हैं।

<select ng-model="page">
  <option value="home.html">Home</option>
  <option value="about.html">About</option>
</select>

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

Code Explanation

  • Dropdown selection के आधार पर page change होता है
  • ng-include automatically selected file load करता है
  • Simple SPA behavior मिलता है

ng-include और Scope

ng-include अपना child scope create करता है।

<div ng-controller="parentCtrl">
  <p>{{title}}</p>
  <div ng-include="'child.html'"></div>
</div>

$scope.title = "Parent Title";

child.html

<p>{{title}}</p>

Code Explanation

  • Child include parent scope access कर सकता है
  • Child scope parent data read कर सकता है
  • Scope inheritance AngularJS rule follow करती है

Include के साथ Data Binding

Included file में AngularJS bindings normally काम करती हैं।

<div ng-controller="dataCtrl">
  <div ng-include="'profile.html'"></div>
</div>

$scope.user = { name: "Rahul", age: 25 };

profile.html

<p>Name: {{user.name}}</p>
<p>Age: {{user.age}}</p>

Code Explanation

  • Included file parent controller का data access करती है
  • Binding fully functional रहती है

ng-include Events

AngularJS ng-include के lifecycle events भी provide करता है।

<div ng-include="'content.html'"
     onload="loaded()">
</div>

$scope.loaded = function() {
  $scope.message = "Content Loaded";
};

Code Explanation

  • Include file load होते ही onload trigger होता है
  • Post-load logic handle करने में useful है

Common Use Cases of ng-include

  • Header / Footer reuse
  • Sidebar menus
  • Layout templates
  • Dynamic content loading

Performance Considerations

  • Too many includes avoid करें
  • Frequently used includes cache होते हैं
  • Small reusable components के लिए best है

ng-include Best Practices

  • File paths correct रखें
  • Small and reusable templates बनाएँ
  • Business logic included files में न रखें
  • Controllers main page पर manage करें

Common ng-include Mistakes

  • Relative path गलत देना
  • Heavy logic included HTML में लिखना
  • Too many nested includes use करना
  • Scope behavior को ignore करना

Summary

इस chapter में आपने सीखा:

  • AngularJS Includes क्या है
  • ng-include directive का उपयोग
  • External HTML files load करना
  • Dynamic और conditional includes
  • Scope behavior और best practices
← AngularJS API AngularJS Animations →
  • Home