Angular டெம்ப்ளேட்டுகள்
டெம்ப்ளேட்டுகள் என்பது ஒரு கூறு ரெண்டர் செய்யும் HTML ஆகும்.
டெம்ப்ளேட்டுகள் சாதாரண HTML ஐ Angular டெம்ப்ளேட் தொடரியலுடன் இணைத்து தரவைக் காட்டுகின்றன மற்றும் பயனர் நிகழ்வுகளுக்கு பதிலளிக்கின்றன.
கூறுகள், டெம்ப்ளேட்டுகள் மற்றும் தேர்விகள்
கூறு
ஒரு காட்சியைக் கட்டுப்படுத்தும் ஒரு வகுப்பு (அதன் டெம்ப்ளேட்).
டெம்ப்ளேட்
கூறு வழங்கும் HTML உள்ளடக்கம் மற்றும் Angular தொடரியல்.
தேர்வி
ஒவ்வொரு கூறுக்கும் ஒரு தேர்வி உள்ளது (எ.கா., app-root) நீங்கள் HTML இல் வைக்கிறீர்கள்.
ரூட் கூறு
ரூட் கூறு index.html இல் <app-root> உள்ளே ரெண்டர் செய்யப்படுகிறது.
டெம்ப்ளேட்டுகள் எப்படி வேலை செய்கின்றன
ஆரம்ப ரெண்டர்
Angular கூறை உருவாக்கி டெம்ப்ளேட்டை செயலாக்குகிறது, DOM மற்றும் கூறு புலங்களுக்கு இடையே பைண்டிங்களை இணைக்கிறது.
மாற்றம் கண்டறிதல்
பயனர் நிகழ்வுகள், நேர கடிகாரங்கள் அல்லது அசிங்க்ரோன் வேலையின் போது, Angular டெம்ப்ளேட் வெளிப்பாடுகளை மீண்டும் மதிப்பீடு செய்து மாற்றப்பட்டவற்றை மட்டும் புதுப்பிக்கிறது.
டைரக்டிவ்கள்
நிலையின் அடிப்படையில் உட்பொதிக்கப்பட்ட காட்சிகளை (DOM துண்டுகள்) உருவாக்க/அழிக்கின்றன.
பைண்டிங் ஓட்டம்
இடைச்செருகல்/பண்பு பைண்டிங் காட்சிக்கு தரவை தள்ளும். நிகழ்வு பைண்டிங் உலாவி நிகழ்வுகளை கூறுக்கு மீண்டும் பிடிக்கிறது.
முக்கிய குறிப்புகள்:
- இடைச்செருகல் HTML ஐத் தப்ப வைக்கிறது.
- டைனமிக் பண்புகளுக்கு பண்பு/அட்ரிபியூட் பைண்டிங்களைப் பயன்படுத்தவும்.
- பூஜ்யம் பிழைகளைத் தவிர்க்க
?.ஐப் பயன்படுத்தவும்.
தொடரியல் எடுத்துக்காட்டு
உங்கள் சொந்த Angular சேவையகத்தைப் பெறுங்கள்:
main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
standalone: true,
template: `
Hello {{ name }}
`
})
export class App {
name = 'World';
}
bootstrapApplication(App);index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Angular App</title>
</head>
<body>
<app-root></app-root>
</body>
</html>எடுத்துக்காட்டு விளக்கம்:
{{ name }}: இடைச்செருகல் name புலத்தைப் படித்து அதை உரையாக செருகுகிறது.(click): நிகழ்வு பைண்டிங் பொத்தான் கிளிக் செய்யப்படும் போது கூறு நிலையைப் புதுப்பிக்கிறது.
டெம்ப்ளேட் வெளிப்பாடுகள்:
டெம்ப்ளேட் வெளிப்பாடுகள் கூறு சூழலில் இயங்குகின்றன. அவற்றை வேகமாகவும் பக்க விளைவுகள் இல்லாமலும் வைத்திருங்கள்; வேலையை வகுப்பில் செய்யுங்கள், டெம்ப்ளேட்டில் இன்லைனில் அல்ல.
டெம்ப்ளேட் அத்தியாவசியங்கள்
முக்கிய கருத்துகள்:
டெம்ப்ளேட்டுகள்
Angular ஒரு கூறுக்காக ரெண்டர் செய்யும் HTML ஆகும்.
பைண்டிங்கள்
இடைச்செருகல் {{ ... }}, பண்பு [prop], மற்றும் நிகழ்வு (event).
டெம்ப்ளேட் குறிப்புகள்
உறுப்புகள் அல்லது டைரக்டிவ்களை குறிப்பிட உள்ளூர் பெயர்கள் #box போன்றவை.
கட்டமைப்பு டைரக்டிவ்கள்
*ngIf, *ngFor DOM லேஅவுட்டை மாற்றுகின்றன.
<p>Hello {{ name }}</p>
<img [src]="url" (error)="onMissing()">
<input #box (input)="save(box.value)">
<li *ngFor="let item of items; index as i">{{ i }}. {{ item }}</li>குறியீடு விளக்கம்:
{{ name }}: உரைக்கான இடைச்செருகல்[src]: ஒரு உறுப்பு பண்பை அமைக்க பண்பு பைண்டிங்(error): பட பிழை நிகழ்வுக்கு பதிலளிக்க நிகழ்வு பைண்டிங்#box: டெம்ப்ளேட் குறிப்பு மாறி; box.value தற்போதைய உள்ளீட்டு மதிப்பைப் படிக்கிறது*ngFor ... index as i: பூஜ்யம்-அடிப்படையிலான குறியீட்டுடன் சுழற்சிக்கான கட்டமைப்பு டைரக்டிவ்
மேலும் கற்றுக்கொள்ள:
பண்பு/வகுப்பு/பாணி பைண்டிங்கிற்கு Data Binding பகுதியையும், உள்ளடக்கத்தைக் காட்ட/மறைக்க Conditional Rendering பகுதியையும் பார்க்கவும்.
டெம்ப்ளேட்டுகள் மேலோட்டம்
இந்த அடுத்த அத்தியாயங்களில் படிப்படியாக டெம்ப்ளேட்டுகளை ஆராயுங்கள்:
பயிற்சி
உங்கள் அறிவைச் சோதிக்க இந்தப் பயிற்சியை முயற்சிக்கவும்:
Angular டெம்ப்ளேட் என்றால் என்ன?
கட்டமைப்பு புரிதல்:
Angular கூறுகளில் இரண்டு முக்கிய பகுதிகள் உள்ளன: TypeScript வகுப்பு (தர்க்கம் மற்றும் தரவு) மற்றும் HTML டெம்ப்ளேட் (காட்சி). டெம்ப்ளேட் வகுப்புடன் இடைச்செருகல் மற்றும் நிகழ்வு பைண்டிங்கள் மூலம் தொடர்பு கொள்கிறது.