Angular компоненттин классы бар файл

Ар кандай компоненттин негизги бөлүгү - анын функционалы, башкача айтканда анын өзүнүн программасы. Angularда компоненттин функционалы TypeScript тилинде жазылат жана ООП классын түзөт.

Ар бир компонентте бул класс .ts кеңейтүүсү бар файлда жайгашкан. Биздин негизги компонентте бул app.component.ts файлы болот.

Келгиле, бул файлдын мазмуну менен таанышалык. Алгач, биздин компоненттин класcына көңүл буруңуз:

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дын тейлөөчү нерсеси, ошондуктан азырынча анга терең бербөгүлө.

app.component.ts файлын ачып, аны изилдеңиз.

Стилдер менен бир нече файлдарды түзүп, аларды декораторго туташтырыңыз.