Jedna od ključnih karakteristika Angulara su direktive. Angular direktive predstavljaju način da se doda specifično ponašanje elementima DOM-a. Angular nudi niz ugrađenih direktiva, ali takođe omogućava kreiranje prilagođenih direktiva, što daje fleksibilnost ovom moćnom okviru.
Šta su to direktive?
Direktive su posebni blokovi koda koje Angular koristi kako bi modifikovao izgled ili ponašanje HTML elemenata. Možete koristiti direktive da biste dodali osluškivače događaja, manipulisali DOM-om ili prikazivali/sakrivali određene elemente.
U Angularu postoje dve vrste ugrađenih direktiva: strukturne i atributne. Strukturne direktive menjaju strukturu DOM-a, dok atributne direktive modifikuju izgled ili ponašanje elementa. Direktive su veoma efikasan način za proširenje mogućnosti Angular komponenti.
Prednosti upotrebe direktiva
Evo nekih od prednosti korišćenja direktiva u Angularu:
- Ponovna upotrebljivost: Direktive možete koristiti u više komponenti, čime štedite vreme i trud.
- Proširivost: Direktive se mogu proširiti dodavanjem nove funkcionalnosti, čime vaše komponente postaju moćnije.
- Fleksibilnost: Direktive omogućavaju modifikovanje ponašanja ili izgleda elementa na različite načine, pružajući veliku fleksibilnost u razvoju vaših aplikacija.
Podešavanje Angular aplikacije
Da biste podesili Angular aplikaciju, potrebno je da instalirate Angular CLI. To možete uraditi pokretanjem sledeće komande u vašem terminalu:
npm install -g @angular/cli
Nakon instalacije Angular CLI, kreirajte novi Angular projekat pomoću sledeće komande:
ng new custom-directives-app
Pokretanjem ove komande kreira se Angular projekat pod nazivom custom-directives-app.
Kreiranje prilagođene direktive
Sada kada imate Angular projekat, možete početi sa kreiranjem prilagođenih direktiva. Napravite TypeScript datoteku i definišite klasu koja je dekorisana dekoratorom @Directive.
Dekorator @Directive je TypeScript dekorator koji se koristi za kreiranje prilagođenih direktiva. Kreirajte datoteku highlight.directive.ts u direktorijumu src/app. U ovoj datoteci ćete definisati prilagođenu direktivu za isticanje.
Na primer:
import { Directive } from "@angular/core";@Directive({
selector: "[myHighlight]",
})
export class HighlightDirective {
constructor() {}
}
Gornji kod importuje dekorator direktive iz modula @angular/core. Dekorator @Directive se primenjuje na klasu HighlightDirective. On uzima objekat kao argument sa svojstvom selector.
U ovom slučaju, svojstvo selector je postavljeno na [myHighlight], što znači da ovu direktivu možete primeniti na šablon tako što ćete dodati atribut myHighlight elementu.
Evo primera kako da koristite direktivu u šablonima:
<main>
<p myHighlight>Neki tekst</p>
</main>
Dodavanje ponašanja direktivi
Sada kada ste uspešno kreirali direktivu, sledeći korak je da joj dodate ponašanje kako bi mogla da manipuliše DOM-om. Biće vam potreban ElementRef iz @angular/core da biste dodali ponašanje direktivi.
Ubacićete ElementRef u konstruktor direktive. ElementRef predstavlja omotač oko osnovnog elementa u okviru prikaza.
Primer kako da dodate ponašanje direktivi:
import { Directive, ElementRef } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
constructor(private element: ElementRef) {
this.element.nativeElement.style.backgroundColor="lightblue";
}
}
U ovom primeru, konstruktor klase HighlightDirective prima parametar ElementRef, koji Angular automatski ubacuje. ElementRef pruža pristup osnovnom DOM elementu.
Korišćenjem svojstva this.element.nativeElement pristupate originalnom DOM elementu parametra element. Zatim, postavljate boju pozadine komponente na svetloplavu koristeći svojstvo style. To znači da će svaki element na koji primenite direktivu myHighlight imati svetloplavu pozadinu.
Da bi direktiva bila funkcionalna, importujte je i deklarišite u datoteci app.module.ts.
Na primer:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { HighlightDirective } from './highlight.directive';
@NgModule({
declarations: [
AppComponent,
HighlightDirective,
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Sada možete primeniti direktivu myHighlight na elemente u vašim Angular komponentama.
<main>
<p myHighlight>Neki tekst</p>
</main>
Pokrenite aplikaciju na razvojnom serveru da biste testirali da li direktiva radi. To možete učiniti pokretanjem sledeće komande u terminalu:
ng serve
Nakon pokretanja komande, idite na http://localhost:4200/ u vašem web pretraživaču i videćete interfejs sličan onome na slici ispod.
Angular ugrađene direktive prihvataju vrednosti za promenu izgleda elementa, ali prilagođena direktiva myHighlight to ne čini. Možete konfigurisati direktivu da prihvata vrednost koju će koristiti za dinamičko podešavanje boje pozadine šablona.
Da biste to uradili, zamenite kod u datoteci highlight.directive.ts ovim:
import { Directive, ElementRef, Input } from "@angular/core";@Directive({
selector: "[myHighlight]"
})
export class HighlightDirective {
@Input() set myHighlight(color: string) {
this.element.nativeElement.style.backgroundColor = color;
}
constructor(private element: ElementRef) {
}
}
U gornjem bloku koda, klasa HighlightDirective sadrži metodu za postavljanje pod nazivom myHighlight. Ova metoda prima parametar color tipa string. Metoda za postavljanje je ukrašena dekoratorom @Input, što vam omogućava da prosledite vrednost boje direktivi iz roditeljske komponente.
Sada možete specificirati boju pozadine tako što ćete proslediti vrednost direktivi myHighlight.
Na primer:
<main>
<p myHighlight="pink">Neki tekst</p>
</main>
Kreiranje prilagođene strukturne direktive
U prethodnim odeljcima ste naučili kako da kreirate, dodate ponašanje i primenite prilagođene atributne direktive na vaš šablon. Atributne direktive modifikuju izgled DOM elemenata, dok strukturne direktive dodaju, uklanjaju ili premeštaju elemente u DOM-u.
Angular pruža dve strukturne direktive: ngFor i ngIf. Direktiva ngFor prikazuje šablon za svaku stavku u kolekciji (nizu), dok ngIf upravlja uslovnim prikazivanjem.
U ovom odeljku ćete kreirati prilagođenu strukturnu direktivu koja radi slično kao ngIf. Za početak, kreirajte datoteku condition.directive.ts.
U datoteci condition.directive.ts upišite sledeći kod:
import { Directive, Input, TemplateRef, ViewContainerRef } from '@angular/core'@Directive({
selector: "[condition]"
})
export class ConditionDirective {
@Input() set condition(arg: boolean) {
if(arg) {
this.viewContainer.createEmbeddedView(this.template)
} else {
this.viewContainer.clear();
}
}
constructor(
private template: TemplateRef<unknown>,
private viewContainer: ViewContainerRef
) {}
}
Ovaj blok koda vam omogućava uslovno prikazivanje elemenata primenom direktive condition na element i prosleđivanjem logičke vrednosti iz roditeljske komponente.
U konstruktoru klase ConditionDirective ubacujete instancu TemplateRef i ViewContainerRef. TemplateRef predstavlja šablon koji je povezan sa direktivom, a ViewContainerRef predstavlja kontejner u kojem aplikacija prikazuje prikaze.
Metoda za postavljanje klase ConditionDirective koristi if-else naredbu da proveri parametar arg. Direktiva kreira ugrađeni prikaz koristeći dati šablon ako je parametar tačan. Metoda createEmbeddedView klase ViewContainerRef kreira i prikazuje pogled u DOM-u.
Ako je parametar netačan, direktiva briše kontejner pogleda pomoću metode clear klase ViewContainerRef. Ovo uklanja sve prethodno prikazane poglede iz DOM-a.
Nakon kreiranja direktive, registrujte je u vašem projektu tako što ćete je importovati i deklarisati u datoteci app.module.ts. Nakon što to uradite, možete početi da koristite direktivu u vašim šablonima.
Evo primera kako je koristiti u šablonima:
<main>
<p *condition="true">Zdravo!!!</p>
</main>
Sada možete kreirati prilagođene direktive
Prilagođene direktive u Angularu predstavljaju moćan način za manipulisanje DOM-om i dodavanje dinamičkog ponašanja vašim šablonima. Naučili ste kako da kreirate i primenite prilagođene atributne i strukturne direktive u vašim Angular aplikacijama. Razumevanje kako se kreiraju i koriste prilagođene direktive vam omogućava da u potpunosti iskoristite potencijal Angulara.