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.