Datoteka sa klasom komponente u Angularu
Osnovni deo svake komponente je njen funkcionalitet, odnosno sama njena programa. U Angularu, funkcionalnost komponente se piše na programskom jeziku TypeScript i predstavlja OOP klasu.
U svakoj komponenti se ova klasa nalazi
u datoteci sa ekstenzijom .ts. U našoj
osnovnoj komponenti to će biti datoteka
app.component.ts.
Hajde da se upoznamo sa sadržajem ove datoteke. Za početak obratite pažnju na klasu naše komponente:
export class AppComponent {
title: string = 'test';
}
Na ovu klasu se primenjuje dekorator @Component.
Ovaj dekorator svojim parametrima prima
objekat, koji konfiguriše našu komponentu:
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
U svojstvu templateUrl je zadat put
do datoteke koja sadrži izgled (verstku) naše
komponente.
U svojstvu styleUrls je zadat niz
putanja do CSS datoteka, koje stilizuju izgled
naše komponente. Kao što vidite, datoteka
stilova može biti više od jedne.
U svojstvu selector je zadat selektor
HTML taga, u koji će se ispisivati
(montirati) HTML kod naše
komponente. U našem slučaju vidimo ime
app-root. Ovom imenu odgovara
tag sa istim imenom. Ovaj tag je napisan u datoteci
šablona src/index.html. Na to mesto,
gde je napisan ovaj tag, i će se ubacivati
izgled naše komponente.
U svojstvu imports su naznačeni moduli,
koji se uvoze u našu komponentu.
U svojstvu standalone će uvek biti
naznačena vrednost true. Trenutno je ovo
pre servisna stvar Angulara, stoga
za sada ne zadubljujte se u nju.
Otvorite datoteku app.component.ts i
proučite je.
Napravite nekoliko datoteka sa stilovima i povežite ih u dekoratoru.