Course Progress 14%

AngularJS Directives

← AngularJS Modules AngularJS Model →

AngularJS Directives AngularJS की सबसे important और powerful features में से एक हैं। Directives का उपयोग HTML को extend करने के लिए किया जाता है। इनके जरिए AngularJS browser को यह बताता है कि HTML elements के साथ क्या behavior attach करना है।

AngularJS में लगभग हर feature directives के माध्यम से ही काम करता है, जैसे ng-app, ng-model, ng-repeat आदि।

Directive क्या है

Directive एक special marker होता है जो AngularJS को यह बताता है कि DOM element को कैसे handle करना है। Directive HTML element, attribute, class या comment के रूप में use किया जा सकता है।

AngularJS के built-in directives के साथ-साथ आप अपने custom directives भी बना सकते हैं।

Built-in AngularJS Directives

AngularJS में कई built-in directives मौजूद होते हैं, जिनका उपयोग रोज़ाना applications में किया जाता है।

कुछ common directives:

  • ng-app
  • ng-model
  • ng-bind
  • ng-repeat
  • ng-if
  • ng-show
  • ng-hide
  • ng-controller

ng-app Directive

ng-app directive AngularJS application को initialize करता है।

<div ng-app="myApp">
  ...
</div>

यह AngularJS को बताता है कि application कहाँ से start होगा और कौन सा module use होगा।

ng-model Directive

ng-model directive HTML form control को application data से bind करता है।

<input type="text" ng-model="username">
<p>Hello {{username}}</p>

यह two-way data binding provide करता है।

ng-bind Directive

ng-bind directive expressions का alternative है।

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

यह page load के समय uncompiled expressions दिखने से बचाता है।

ng-repeat Directive

ng-repeat directive collection को loop करके data display करता है।

<div ng-app ng-init="colors=['Red','Green','Blue']">
  <ul>
    <li ng-repeat="color in colors">
      {{ color }}
    </li>
  </ul>
</div>

ng-if Directive

ng-if directive condition के आधार पर element को DOM में add या remove करता है।

<p ng-if="isLoggedIn">Welcome User</p>

Condition false होने पर element DOM से पूरी तरह हट जाता है।

ng-show और ng-hide Directives

ये directives element को show या hide करते हैं लेकिन DOM से remove नहीं करते।

<p ng-show="isVisible">This is visible</p>
<p ng-hide="isVisible">This is hidden</p>

ng-controller Directive

ng-controller directive view को controller से connect करता है।

<div ng-controller="myCtrl">
  {{ message }}
</div>

Custom Directive क्या है

AngularJS आपको अपने custom directives बनाने की सुविधा देता है। इससे code reusable और clean बनता है।

Custom Directive बनाने का Example

var app = angular.module("myApp", []);

app.directive("myDirective", function() {
  return {
    template: "<h2>Hello from Custom Directive</h2>"
  };
});

HTML में use करना:

<div my-directive></div>

AngularJS automatically myDirective को my-directive में convert कर देता है।

Directive Restrict Options

Directive को अलग-अलग तरीकों से use किया जा सकता है।

app.directive("testDirective", function() {
  return {
    restrict: "E",
    template: "<p>Element Directive</p>"
  };
});

Restrict values:

  • E – Element
  • A – Attribute
  • C – Class
  • M – Comment

Directive और Reusability

Directives का मुख्य फायदा यह है कि:

  • Code reusable बनता है
  • HTML clean रहता है
  • Logic centralized होता है
  • Complex UI आसानी से manage होता है

Common Directive Mistakes

  • Directive name गलत होना
  • Restrict option गलत use करना
  • Module mismatch होना
  • AngularJS library load न होना

Summary

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

  • AngularJS directives क्या होते हैं
  • Built-in directives का उपयोग
  • ng-repeat, ng-if, ng-show, ng-hide
  • Custom directive कैसे बनाते हैं
  • Directive restrict options और benefits
← AngularJS Modules AngularJS Model →
  • Home