Course Progress 43%

AngularJS HTML DOM

← AngularJS SQL AngularJS Events →

AngularJS HTML DOM का मतलब है HTML elements को AngularJS के through control और manipulate करना। AngularJS direct DOM manipulation को avoid करता है और data binding, directives और expressions के जरिए DOM को automatically update करता है।

AngularJS का main focus यह है कि developer को manually DOM update न करना पड़े, बल्कि Model change होने पर View खुद update हो जाए।

HTML DOM क्या है

HTML DOM एक programming interface है जो HTML document को tree structure में represent करता है। हर HTML element DOM node होता है।

AngularJS में:

  • DOM update automatically होता है
  • Data binding से View update होती है
  • Direct DOM access minimal रखा जाता है

AngularJS में DOM Control कैसे होता है

AngularJS DOM को control करने के लिए mainly इन चीजों का उपयोग करता है:

  • Directives
  • Data Binding
  • Expressions
  • Built-in DOM related directives

ng-show और ng-hide

ng-show और ng-hide का उपयोग elements को show या hide करने के लिए किया जाता है।

<div ng-app="myApp" ng-controller="domCtrl">
  <button ng-click="show = !show">Toggle</button>
  <p ng-show="show">This text is visible</p>
  <p ng-hide="show">This text is hidden</p>
</div>

app.controller("domCtrl", function($scope) {
  $scope.show = true;
});

Code Explanation

  • show boolean value element visibility control करती है
  • ng-show true होने पर element दिखता है
  • ng-hide true होने पर element hide हो जाता है
  • DOM automatically update होता है

ng-if Directive

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

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

Code Explanation

  • Condition true होने पर element DOM में add होता है
  • False होने पर element पूरी तरह DOM से remove हो जाता है
  • Performance sensitive cases में useful है

ng-class Directive

ng-class का उपयोग CSS classes dynamically add/remove करने के लिए किया जाता है।

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

$scope.isActive = true;

Code Explanation

  • active class condition true होने पर apply होती है
  • Styling DOM manipulation के बिना होती है
  • Code clean और maintainable रहता है

ng-style Directive

ng-style inline styles dynamically apply करता है।

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

$scope.textColor = "blue";
$scope.fontSize = "20px";

Code Explanation

  • CSS properties JavaScript object की तरह define होती हैं
  • Scope values change होते ही style update होती है

ng-disabled Directive

ng-disabled element को enable या disable करता है।

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

$scope.isDisabled = true;

Code Explanation

  • Condition true होने पर button disabled हो जाता है
  • Form validation और user control में useful है

ng-readonly Directive

Input field को readonly बनाने के लिए use होता है।

<input type="text" ng-readonly="isReadonly">

Code Explanation

  • True होने पर user value change नहीं कर सकता
  • Data फिर भी model में bind रहता है

ng-checked Directive

Checkbox या radio button की checked state control करता है।

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

Code Explanation

  • Condition true होने पर checkbox checked रहता है
  • Mostly static check state के लिए use होता है

ng-focus और ng-blur

DOM focus events handle करने के लिए use होते हैं।

<input type="text" ng-focus="onFocus()" ng-blur="onBlur()">

$scope.onFocus = function() {
  $scope.message = "Input focused";
};

$scope.onBlur = function() {
  $scope.message = "Input blurred";
};

Code Explanation

  • Focus मिलने पर onFocus() call होता है
  • Focus हटने पर onBlur() call होता है
  • User interaction track किया जा सकता है

ng-click (DOM Event)

AngularJS DOM events handle करने के लिए directives देता है।

<button ng-click="count = count + 1">Click</button>
<p>Count: {{count}}</p>

Code Explanation

  • Click event model update करता है
  • DOM update automatically होता है
  • Manual event listeners की ज़रूरत नहीं पड़ती

Direct DOM Manipulation क्यों Avoid करें

AngularJS में:

  • document.getElementById() avoid करना चाहिए
  • jQuery direct DOM access कम use करना चाहिए

Reason:

  • AngularJS digest cycle break हो सकता है
  • Two-way binding issues आ सकते हैं

Directive के जरिए DOM Manipulation

अगर DOM manipulation ज़रूरी हो तो custom directive बनानी चाहिए।

app.directive("focusMe", function() {
  return {
    link: function(scope, element) {
      element[0].focus();
    }
  };
});

<input type="text" focus-me>

Code Explanation

  • Directive DOM access safely provide करता है
  • AngularJS lifecycle के अंदर DOM modify होता है
  • Best practice follow होती है

HTML DOM Best Practices

  • Data binding से DOM update करें
  • Direct DOM access minimize रखें
  • Styling के लिए ng-class और ng-style use करें
  • Complex DOM logic directive में रखें

Common DOM Mistakes

  • Controller में DOM manipulation करना
  • jQuery पर ज़्यादा depend करना
  • ng-if और ng-show का गलत use
  • Performance issues ignore करना

Summary

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

  • AngularJS DOM कैसे handle करता है
  • DOM related built-in directives
  • Events और dynamic styling
  • Direct DOM manipulation से बचना क्यों ज़रूरी है
  • Custom directive से safe DOM control
← AngularJS SQL AngularJS Events →
  • Home