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 ගුණාංගයෙහි අපගේ සංරචකයේ වර්ණනය අඩංගු ගොනුවට මාර්ගය සඳහන් කර ඇත.

styleUrls ගුණාංගයෙහි අපගේ සංරචකයේ වර්ණනයට ශෛලීකරණය කරන CSS ගොනු සඳහා මාර්ග පෙළ ඇත. ඔබට පෙනෙන පරිදි, ශෛලීය ගොනු එකකට වඩා වැඩි ගණනක් තිබිය හැකිය.

selector ගුණාංගයෙහි HTML කොටස් තෝරන්නා සඳහන් කර ඇත, එයට අපගේ සංරචකයේ HTML කේතය ප්‍රතිදානය කෙරේ (mount කරනු ලැබේ). අපගේ නඩුවේදී අපට නම app-root දක්නට ලැබේ. මෙම නමට අනුරූප වන්නේ එකම නමින් යුත් කොටසයි. මෙම කොටස src/index.html සැකිලි ගොනුවේ ලියා ඇත. එම ස්ථානයට, මෙම කොටස ලියා ඇති තැන, අපගේ සංරචකයේ වර්ණනය ඇතුළු කරනු ලැබේ.

imports ගුණාංගයෙහි අපගේ සංරචකයට ආයාත කරන මොඩියුල සඳහන් කර ඇත.

standalone ගුණාංගයෙහි සෑමවිටම true අගය සඳහන් කරනු ලැබේ. දැනට මෙය Angular හි සේවා කටයුතු සඳහා වැදගත් දෙයක් වන බැවින්, දැනට එය ගැන ගැඹුරින් නොසිතන්න.

app.component.ts ගොනුව විවෘත කර එය අධ්‍යයනය කරන්න.

ශෛලීය ගොනු කිහිපයක් සාදා සරසනය තුළ ඒවා සම්බන්ධ කරන්න.