Angular JS에서 DOM에 마법 같은 힘을 부여하세요

내 멘티 중 한 명이 HTML을 사용하여 동일한 것을 만들 수 있는데 왜 Angular를 사용하는지 물었습니다. 그래서 나는 그에게 성능, 유지 관리 및 코드 구성에 대해 설명했지만 그는 확신하지 못했습니다. 그래서 나는 그에게 각도의 마법의 힘을 설명해야 합니다. 나는 그에게 Angular는 모든 요소에 마법의 힘을 부여할 수 있는 마법사라고 말했습니다.



모든 요소에 새로운 힘을 부여하려면 "지시"라고 하는 마법 주문이 필요합니다. 기본적으로 디렉티브는 템플릿의 요소에 새로운 동작을 추가하거나 기존 동작을 수정하는 클래스입니다.

따라서 두 가지 유형의 마법의 힘이나 동작을 요소에 추가할 수 있습니다. 하나는 요소에 복잡한 스타일을 넣을 수 있는 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 video 시리즈에서도 실제로 설명했습니다. 그것도 확인할 수 있습니다.
자신만의 주문을 만들 수도 있습니다. 즉, 자신만의 지시문도 만들 수 있습니다.
가장 간단한 사용자 지정 지시문은 다음과 같습니다.

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

이 지시문은 단순히 요소의 색상을 빨간색으로 업데이트하지만 사용자 지정 지시문을 만드는 방법에 대한 아이디어를 얻을 수 있습니다.

이 짧은 블로그는 Angular, Happy Koding 모두의 지시문이 무엇인지에 대한 아이디어를 제공합니다!!!