Angular கூறு என்றால் என்ன?

Question

Accepted Answer

**கூறு** என்பது Angular UI-ன் அடிப்படை உருட்டு — `@Component` உடன் அலங்கரிக்கப்பட்ட TypeScript **வகுப்பு** ஆகும், இது திரையின் ஒரு பகுதியை (அதன் "பார்வை") கட்டுப்படுத்துகிறது. ஒவ்வொரு Angular பயன்பாடும் கூறுகளின் மரம். ## ஒரு கூறின் கட்டமைப்பு ```ts import { Component } from "@angular/core"; @Component({ selector: "app-user-card", // the custom HTML tag: templateUrl: "./user-card.html", // the view (or inline `template: '...'`) styleUrls: ["./user-card.css"], // scoped styles for this component }) export class UserCardComponent { name = "Ann"; // properties → available in the template greet() { return `Hi ${this.name}`; } // methods → callable from the template } ``` `@Component` அலங்கारம் மூன்று விஷயங்களை இணைக்கிறது: **தேர்ந்தெடுப்பான்** (நீங்கள் HTML-ல் எவ்வாறு பயன்படுத்துகிறீர்கள்), **வார்ப்பு** (மார்க்-அப்) மற்றும் **பாணிகள்** (இந்த கூறுக்கு வரம்பு செய்யப்பட்டவை). ## வகுப்பு தர্க்கம் மற்றும் தரவைக் கொண்டுள்ளது ```html

``` வகுப்பின் பொது சொத்துக்கள் மற்றும் முறைகள் இணைப்பு மூலம் அதன் வார்ப்பில் நேரடியாக அணுகக்கூடியவை — இது Angular தரவு மற்றும் பார்வையை எவ்வாறு இணைக்கிறது என்பதன் மূலமாகும். ## ஒரு கூறு பயன்படுத்துதல் ```html ``` ## பாணிகள் முன்னிருப்பாக மூடப்பட்டுள்ளன ```css /* user-card.css — these styles ONLY affect this component */ h2 { color: blue; } /* won't leak to other components'

s */ ``` Angular கூறு பாணிகளை தானாகவே நோக்கு செய்கிறது (View Encapsulation), எனவே CSS கூறுகளுக்கு இடையே கசிவு ஆகாது. ## இது ஏன் முக்கியமானது கூறுகள் ஒவ்வொரு Angular பயன்பாட்டையும் கட்டமைக்கும் முறை — வார்ப்பு + தர்க்கம் + நோக்கு பாணிகளின் சுயாதீன அலகுகள், ஒரு மரத்தில் உருவாக்கப்பட்டவை. `@Component` அலங்கарம் (தேர்ந்தெடுப்பான், வார்ப்பு, பாணிகள்) மற்றும் வகுப்பின் சொத்துக்கள்/முறைகள் வார்ப்பில் எவ்வாறு இணைக்கப்படுகின்றன என்பதைப் புரிந்துகொள்வது Angular வளர்ச்சியின் முழுமையான ভিত்தி; மற்ற அனைத்தும் கூறு மாதிரியை அடிப்படையாகக் கொண்டு கட்டமைக்கப்பட்டுள்ளன.