Файл з класам кампанента ў 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. Гэтаму імені адпавядае аднайменны тэг. Гэты тэг напісаны ў файле макета src/index.html. У то месца, дзе напісаны гэты тэг, і будзе ўстаўляцца вёрстка нашага кампанента.

У уласцівасці imports указаны модулі, якія імпартуюцца ў наш кампанент.

У уласцівасці standalone заўсёды будзе ўказана значэнне true. Зараз гэта хутчэй службовая штука Angular, таму пакуль не ўнiкайце ў яе.

Адкрыйце файл app.component.ts і вывучыце яго.

Зрабіце некалькі файлаў са стылямі і падключыце іх у дэкаратары.