Файл з класам кампанента ў Angular

Асноўнай часткай любога кампанента з'яўляецца яго функцыянал, гэта значыць уласна яго праграма. У Angular функцыянал кампанента пішацца на мове TypeScript і ўяўляе сабой ААП клас.

У кожным кампаненце гэты клас размешчаны ў файле з пашырэннем .ts. У нашым асноўным кампаненце гэта будзе файл app.component.ts.

Давайце азнаёмімся з зместам гэтага файла. Для пачатку звярніце ўвагу на клас нашага кампанента:

app/app.component.tsexport class AppComponent {
  title: string = 'test';
}

Да гэтага класа ўжываецца дэкаратар @Component. Гэты дэкаратар сваім параметрам прымае аб'ект, які канфігуруе наш кампанент:

app/app.component.ts@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кайце ў яе.