კომპონენტის კლასის ფაილი Angular-ში

ნებისმიერი კომპონენტის მთავარი ნაწილია მისი ფუნქციონალი, ანუ საკუთრივ მისი პროგრამა. Angular-ში კომპონენტის ფუნქციონალი იწერება TypeScript ენაზე და წარმოადგენს OOP კლასს.

თითოეულ კომპონენტში ეს კლასი მდებარეობს ფაილში .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 მითითებულია გზა ფაილისკენ, რომელიც შეიცავს ჩვენი კომპონენტის HTML მარკაპს.

თვისებაში styleUrls მითითებულია CSS ფაილების გზების მასივი, რომლებიც ასტილებენ ჩვენი კომპონენტის HTML მარკაპს. როგორც ხედავთ, სტილების ფაილი შეიძლება არ იყოს მხოლოდ ერთი.

თვისებაში selector მითითებულია HTML ტეგის სელექტორი, რომელშიც გამოჩნდება (დამონტაჟდება) ჩვენი კომპონენტის HTML კოდი. ჩვენს შემთხვევაში ვხედავთ სახელს app-root. ამ სახელს შეესაბამება იმავე სახელის ტეგი. ეს ტეგი ჩაწერილია მაკეტის ფაილში src/index.html. იმ ადგილას, სადაც ჩაწერილია ეს ტეგი, დაისახება ჩვენი კომპონენტის HTML მარკაპი.

თვისებაში imports მითითებულია მოდულები, რომლებიც იმპორტირდება ჩვენს კომპონენტში.

თვისებაში standalone ყოველთვის იქნება მითითებული მნიშვნელობა true. ამჟამად ეს უფრო Angular-ის სერვისული ნაწილია, ამიტომ ჯერ არ ჩაუღრმავდეთ მას.

გახსენით ფაილი app.component.ts და გაეცანით მას.

შექმენით რამდენიმე ფაილი სტილებით და დააკავშირეთ ისინი დეკორატორში.