Course Progress 73%

AngularJS Built-in Directives Reference

← AngularJS Custom Directives AngularJS $scope vs $rootScope →

AngularJS Built-in Directives AngularJS framework का core हिस्सा हैं। ये directives HTML को dynamic और powerful बनाती हैं। AngularJS application का लगभग हर feature किसी न किसी directive के जरिए ही implement होता है।

इस chapter में AngularJS की सबसे ज़्यादा use होने वाली built-in directives को reference style में, लेकिन easy Hindi explanation और clear examples के साथ समझाया गया है।

ng-app Directive

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

<div ng-app="myApp">
  {{5 + 5}}
</div>

Explanation

  • AngularJS application का starting point होता है
  • AngularJS compiler को बताता है कि app कहाँ से start होगी

ng-init Directive

ng-init scope variables initialize करने के लिए use होता है।

<div ng-init="count=10">
  {{count}}
</div>

Explanation

  • Simple initialization के लिए useful
  • Complex logic के लिए recommend नहीं किया जाता

ng-model Directive

ng-model input elements को model से bind करता है।

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

Explanation

  • Two-way data binding provide करता है
  • Forms और inputs के लिए core directive है

ng-bind Directive

ng-bind expression का output element में bind करता है।

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

Explanation

  • {{ }} का alternative है
  • Page load पर flicker issue avoid करता है

ng-repeat Directive

ng-repeat list या collection को repeat करने के लिए use होता है।

<li ng-repeat="item in items">
  {{item}}
</li>

Explanation

  • Array या object iterate करता है
  • Dynamic lists बनाने के लिए essential

ng-repeat Advanced (track by)

<li ng-repeat="item in items track by $index">
  {{item}}
</li>

Explanation

  • Performance improve करता है
  • Duplicate items handle करता है

ng-if Directive

ng-if condition true होने पर element को DOM में add करता है।

<p ng-if="isVisible">Visible Text</p>

Explanation

  • False होने पर element DOM से remove हो जाता है
  • Real DOM manipulation करता है

ng-show Directive

<p ng-show="isVisible">Shown Text</p>

Explanation

  • CSS display:none apply करता है
  • Element DOM में बना रहता है

ng-hide Directive

<p ng-hide="isHidden">Hidden Text</p>

Explanation

  • ng-show का opposite behavior
  • CSS based visibility control

ng-if vs ng-show vs ng-hide

  • ng-if DOM add/remove करता है
  • ng-show / ng-hide visibility control करते हैं
  • Performance और animation के लिए difference important है

ng-switch Directive

ng-switch multiple conditions handle करता है।

<div ng-switch="color">
  <p ng-switch-when="red">Red Color</p>
  <p ng-switch-when="blue">Blue Color</p>
  <p ng-switch-default>Other Color</p>
</div>

Explanation

  • Switch-case जैसा behavior
  • Clean conditional rendering

ng-class Directive

<p ng-class="{active:isActive}">Text</p>

Explanation

  • CSS classes dynamically apply करता है
  • Conditional styling के लिए useful

ng-style Directive

<p ng-style="{color:textColor}">Styled Text</p>

Explanation

  • Inline styles dynamically set करता है
  • JavaScript object से styling

ng-click Directive

<button ng-click="count = count + 1">Click</button>

Explanation

  • Click event handle करता है
  • Controller function भी call कर सकता है

ng-change Directive

<input ng-model="name" ng-change="update()">

Explanation

  • Input value change होते ही trigger होता है
  • Real-time updates के लिए useful

ng-submit Directive

<form ng-submit="save()">
</form>

Explanation

  • Form submit handle करता है
  • Page reload नहीं होता

ng-disabled Directive

<button ng-disabled="isDisabled">Save</button>

Explanation

  • Condition के आधार पर disable करता है

ng-readonly Directive

<input ng-readonly="isReadOnly">

Explanation

  • Input readonly state control करता है

ng-selected Directive

<option ng-selected="isSelected">Option</option>

Explanation

  • Option select state manage करता है

ng-checked Directive

<input type="checkbox" ng-checked="isChecked">

Explanation

  • Checkbox state control करता है

ng-include Directive

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

Explanation

  • External HTML include करता है
  • Code reuse के लिए best

ng-controller Directive

<div ng-controller="mainCtrl">
</div>

Explanation

  • Controller attach करता है
  • Scope provide करता है

ng-view Directive

<div ng-view></div>

Explanation

  • Routing view placeholder
  • SPA navigation के लिए essential

ng-href Directive

<a ng-href="{{url}}">Link</a>

Explanation

  • Dynamic URLs safely bind करता है
  • Broken links avoid करता है

ng-src Directive

<img ng-src="{{imgUrl}}">

Explanation

  • Image loading issue prevent करता है

ng-cloak Directive

<div ng-cloak>{{name}}</div>

Explanation

  • Uncompiled expressions hide करता है
  • Clean UI experience देता है

ng-non-bindable Directive

<div ng-non-bindable>{{notAngular}}</div>

Explanation

  • AngularJS compilation skip करता है
  • Code examples दिखाने के लिए useful

Summary

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

  • AngularJS built-in directives का overview
  • Most commonly used directives
  • Conditional, event और form directives
  • Rendering और binding directives
  • Reference-style usage examples
← AngularJS Custom Directives AngularJS $scope vs $rootScope →
  • Home