Датотека со класа на компонента во Angular

Главниот дел на секоја компонента е нејзиниот функционалност, односно самата нејзина програма. Во Angular, функционалноста на компонентата се пишува на програмскиот јазик TypeScript и претставува објектно-ориентирана класа.

Во секоја компонента, оваа класа се наоѓа во датотека со екстензија .ts. Во нашата главна компонента, ова ќе биде датотеката app.component.ts.

Ајде да се запознаеме со содржината на оваа датотека. За почеток, обрнете внимание на класата на нашата компонента:

export class AppComponent {
	title: string = 'test';
}

На оваа класа се применува декораторот @Component. Овој декоратор како параметар прима објект, кој ја конфигурира нашата компонента:

@Component({
	selector: 'app-root',
	standalone: true,
	imports: [FormsModule],
	templateUrl: './app.component.html',
	styleUrls: ['./app.component.css'],
})

Во својството templateUrl е зададен патот до датотеката што ја содржи разметката на нашата компонента.

Во својството styleUrls е зададен низа од патеки до CSS датотеки, кои ги стилизираат разметките на нашата компонента. Како што можете да видите, датотеките за стилови може да бидат повеќе од една.

Во својството selector е зададен селекторот на HTML тагот, во кој ќе се прикажува (монтира) HTML кодот на нашата компонента. Во нашиот случај, гледаме име app-root. На ова име одговара истотag. Овој таг е напишан во датотеката на шаблонот src/index.html. На местото каде што е напишан овој таг, ќе се вметнува разметката на нашата компонента.

Во својството imports се наведени модулите, кои се увезуваат во нашата компонента.

Во својството standalone секогаш ќе биде наведена вредноста true. Моментално ова е повеќе услужна работа на Angular, па засега не навлегувајте во неа.

Отворете ја датотеката app.component.ts и проучете ја.

Направете неколку датотеки со стилови и поврзете ги во декораторот.