Придайте магическую силу вашему DOM в Angular JS

Один из моих подопечных спросил меня, почему мы используем angular, когда то же самое можно сделать с помощью html, я объяснил ему про производительность, обслуживание и организацию кода, но он не был убежден. Тогда мне пришлось объяснить ему магическую силу angular. Я сказал ему, что angular — это волшебник, который может наделить магической силой любой элемент.

Чтобы придать новую силу любому элементу, нам нужны магические заклинания, которые мы называем «директивами». По сути, директивы — это классы, которые добавляют новое поведение или изменяют существующее поведение элементов в шаблоне.

Таким образом, вы можете добавить два типа магической силы или поведения к элементу, один из них — директива атрибутов, в которой вы можете изменить поведение атрибутов элемента, как вы можете изменить атрибут style с помощью ngSTyle, где вы можете поместить сложный стиль в элемент. Есть много встроенных директив атрибутов, таких как ngClass или ngModel.

<div [ngStyle]="{'background-image': 'url(' + value ? image : otherImage + ')'}"></div>

Другим видом магической силы или поведения является директива Structural, с помощью которой вы можете полностью изменить поведение элемента, например, вы можете установить видимость элемента с помощью директивы ngIf или показать список элементов с помощью ngFor.

<div *ngIf="condition">Content to render when condition is true.</div>

Эти две директивы я практически объяснил в моей серии видео на YT, вы также можете ознакомиться с ними.
Вы также можете создать свое собственное заклинание, то есть создать свою собственную директиву.
Самой простой пользовательской директивой может быть:

import { Directive, ElementRef } from '@angular/core';
@Directive({
selector: '[appHighlight]'
})
export class HighlightDirective {
   constructor(private eleRef: ElementRef) {
      eleRef.nativeElement.style.background = 'red';
   }
}

Эта директива просто обновит цвет элемента на красный, но вы можете иметь представление о том, как создать пользовательскую директиву.

Этот краткий блог дал вам представление о том, что такое директивы в Angular, счастливого кодинга всем!!!