Datoteka z razredom komponente v Angular
Glavni del katere koli komponente je njen funkcionalnost, to je dejansko njena program. V Angularju je funkcionalnost komponente napisan v jeziku TypeScript in predstavlja OOP razred.
V vsaki komponenti je ta razred lociran
v datoteki s končnico .ts. V našem
glavnem komponentu bo to datoteka
app.component.ts.
Oglejmo si vsebino te datoteke. Za začetek bodite pozorni na razred našega komponenta:
export class AppComponent {
title: string = 'test';
}
Na ta razred se uporabi dekorator @Component.
Ta dekorator s svojim parametrom sprejme
objekt, ki konfigurira naš komponent:
@Component({
selector: 'app-root',
standalone: true,
imports: [FormsModule],
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
})
V lastnosti templateUrl je določena pot
do datoteke, ki vsebuje postavitev našega
komponenta.
V lastnosti styleUrls je določena matrika
poti do CSS datotek, ki stilizirajo postavitev
našega komponenta. Kot vidite, datoteka
stilov je lahko več kot ena.
V lastnosti selector je določen selektor
HTML oznake, v katero bo izpisana
(namontirana) HTML koda našega
komponenta. V našem primeru vidimo ime
app-root. Temu imenu ustreza
enakoimenska oznaka. Ta oznaka je napisana v datoteki
postavitve src/index.html. Na tisto mesto,
kjer je napisana ta oznaka, bo vstavljena
postavitev našega komponenta.
V lastnosti imports so navedeni moduli,
ki so uvoženi v naš komponent.
V lastnosti standalone bo vedno
navedena vrednost true. Trenutno je to
prej servisna stvar Angularja, zato
zaenkrat se vanjo ne poglabljajte.
Odprite datoteko app.component.ts in
preučite jo.
Naredite več datotek s slogi in jih priključite v dekoratorju.