{"id":72360,"date":"2020-01-13T17:54:14","date_gmt":"2020-01-13T12:24:14","guid":{"rendered":"https:\/\/www.vskills.in\/certification\/tutorial\/?p=72360"},"modified":"2024-04-12T14:22:53","modified_gmt":"2024-04-12T08:52:53","slug":"processing-dom-elements","status":"publish","type":"page","link":"https:\/\/www.vskills.in\/certification\/tutorial\/processing-dom-elements\/","title":{"rendered":"Processing DOM Elements"},"content":{"rendered":"

DOM stands for Document Object Model. AngularJS\u2019s directives are used to bind application data to the attributes of HTML DOM elements. The directives are listed below.<\/p>\n

ng-disabled<\/h4>\n

It disables the attribute of HTML elements. e.g.<\/p>\n

<! DOCTYPE html><\/p>\n

<html><\/p>\n

<script src= “http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js”><\/script><\/p>\n

<body><\/p>\n

<div ng-app=””><\/p>\n

<p><\/p>\n

<button ng-disabled=”disabledbutton”>Click Me!<\/button><\/p>\n

<\/p><\/p>\n

<p><\/p>\n

<input type=”checkbox” ng-model=”disabledbutton”\/>Disable Button<\/p>\n

<\/p><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

ng-show Directive<\/h4>\n

It shows or hides an HTML element.\u00a0 e.g.<\/p>\n

<! DOCTYPE html><\/p>\n

<html><\/p>\n

<script src= “http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js”><\/script><\/p>\n

<body><\/p>\n

<div ng-app=””><\/p>\n

<input type = “checkbox” ng-model = “showhidebutton”>Show Button<\/p>\n

<button ng-show = “showhidebutton”>Click Me!<\/button><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

ng-hide Directive<\/h4>\n

It hides or shows an HTML element. e.g.<\/p>\n

<!DOCTYPE html><\/p>\n

<html><\/p>\n

<script src= “http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js”><\/script><\/p>\n

<body><\/p>\n

<div ng-app=””><\/p>\n

<input type = “checkbox” ng-model = “shbutton”>Hide Button<\/p>\n

<button ng-hide = “shbutton”>Click Me!<\/button><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

ng-click directive<\/h4>\n

It represents a AngularJS click event. e.g.<\/p>\n

<!DOCTYPE html><\/p>\n

<html><\/p>\n

<script src= “http:\/\/ajax.googleapis.com\/ajax\/libs\/angularjs\/1.3.14\/angular.min.js”><\/script><\/p>\n

<body><\/p>\n

<div ng-app=””><\/p>\n

<p>Total Number of Clicks: {{ ClickCount }}<\/p><\/p>\n

<button ng-click = “ClickCount = ClickCount + 1”>Click Me!<\/button><\/p>\n

<\/div><\/p>\n

<\/body><\/p>\n

<\/html><\/p>\n

JQuery vs Angular<\/h4>\n

One of the difficulties many newcomers to Angular face is that they\u2019re used to \u201cthinking in jQuery.\u201d Angular requires a new way of thinking about building applications, a more systematic approach than the patchy\/hacky style that jQuery promotes.<\/p>\n

Clicking a button<\/strong> – We\u2019ll start with a really simple example: reacting to a click event on an element.<\/p>\n

In jQuery, the thought process would go like this:<\/p>\n

\"\"<\/p>\n

The code would probably look something like this:<\/p>\n

$(‘.btn.fire-ze-missiles’).click(function() {<\/p>\n

\/\/ perform missile launch sequence<\/p>\n

});<\/p>\n

In Angular, we should think about it differently. It\u2019s not that the jQuery approach won\u2019t work \u2013 there\u2019s nothing in either framework that\u2019ll stop you from pasting that same code into a controller or something. But you miss out on the cleaner, more declarative (and more reusable) style that Angular is good at. So with Angular, the thought process is more like this:<\/p>\n

\"\"<\/p>\n

This code is split across a couple files: the HTML file with the button, and the JS file with the controller + click handler.<\/p>\n

<div ng-controller=”MissileController as mc”><\/p>\n

<button ng-click=”mc.fireZeMissiles()”>Fire Ze Missiles<\/button><\/p>\n

<\/div><\/p>\n

angular.controller(‘MissileController’, function() {<\/p>\n

var ctrl = this;<\/p>\n

ctrl.fireZeMissiles = function() {<\/p>\n

\/\/ perform missile launch sequence<\/p>\n

}<\/p>\n

});<\/p>\n

The difference might be subtle, and Angular actually requires more lines of code to accomplish the same feat. But there are advantages to the Angular approach:<\/p>\n