डेकोरेटर्स संदर्भ
एंगुलर में डेकोरेटर्स (Decorators) ऐसे विशेष प्रकार के फ़ंक्शन होते हैं जो क्लास, प्रॉपर्टी, मेथड या पैरामीटर को मेटाडेटा प्रदान करते हैं और एंगुलर को यह बताते हैं कि इनका व्यवहार कैसे होना चाहिए। डेकोरेटर्स का सही उपयोग आधुनिक वेब एप्लिकेशन और SPAs में कंपोनेंट-आधारित संरचना, डेटा फ्लो नियंत्रण, स्टेट मैनेजमेंट और लाइफसाइकिल हैंडलिंग के लिए अत्यंत महत्वपूर्ण है।
मुख्य डेकोरेटर्स में @Component, @Directive, @Pipe, @Injectable और @NgModule शामिल हैं। @Component किसी UI कंपोनेंट को परिभाषित करता है, @Directive कस्टम निर्देश बनाता है, @Pipe डेटा ट्रांसफॉर्मेशन के लिए होता है, @Injectable Dependency Injection सक्षम करता है और @NgModule संबंधित क्लासेज़ को मॉड्यूल में व्यवस्थित करता है। अतिरिक्त डेकोरेटर्स जैसे @Input और @Output पैरेंट और चाइल्ड कंपोनेंट के बीच डेटा बाइंडिंग नियंत्रित करते हैं, जबकि @ViewChild और @ContentChild चाइल्ड कंपोनेंट या प्रोजेक्टेड कंटेंट तक पहुँच प्रदान करते हैं।
यह संदर्भ गाइड डेकोरेटर्स के प्रैक्टिकल उपयोग, कंपोनेंट लॉजिक, डेटा फ्लो और इवेंट हैंडलिंग को समझाने के लिए विस्तृत उदाहरण और बेस्ट प्रैक्टिसेज प्रदान करता है। सीखने वाले जानेंगे कि कैसे पुन: उपयोग योग्य, परफॉर्मेंट और मेन्टेनेबल कंपोनेंट्स बनाकर Prop Drilling, अनावश्यक रेंडर और डायरेक्ट स्टेट म्यूटेशन जैसी सामान्य गलतियों से बचा जा सकता है।
मूल उदाहरण
typescriptimport { Component, Input } from '@angular/core';
@Component({
selector: 'app-user-card',
template: ` <div class="card"> <h2>{{ name }}</h2> <p>उम्र: {{ age }}</p> </div>
`,
styles: [` .card {
padding: 16px;
border-radius: 8px;
background-color: #f9f9f9;
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
text-align: center;
}
`]
})
export class UserCardComponent {
@Input() name!: string;
@Input() age!: number;
}इस उदाहरण में @Component डेकोरेटर UserCardComponent को एक पुन: उपयोग योग्य कंपोनेंट के रूप में परिभाषित करता है। selector HTML में इस कंपोनेंट के कस्टम टैग को नियंत्रित करता है, जबकि template और styles UI और CSS को निर्दिष्ट करते हैं। @Input डेकोरेटर्स पैरेंट कंपोनेंट से डेटा प्राप्त करने के लिए उपयोग किए जाते हैं, जिससे Prop Drilling से बचा जाता है और स्टेट मैनेजमेंट नियंत्रित रहता है।
एंगुलर लाइफसाइकिल अपने आप कंपोनेंट की इनिशियलाइज़ेशन, रेंडरिंग और डिस्ट्रक्शन को मैनेज करता है। Input प्रॉपर्टीज़ में परिवर्तन स्वचालित रूप से व्यू अपडेट करते हैं और अनावश्यक रेंडर्स कम करते हैं। यह उदाहरण दिखाता है कि डेकोरेटर्स कैसे कंपोनेंट स्ट्रक्चर, स्टेट मैनेजमेंट और डेटा फ्लो को वास्तविक एंगुलर प्रोजेक्ट्स में संभालते हैं।
व्यावहारिक उदाहरण
typescriptimport { Component, Input, Output, EventEmitter } from '@angular/core';
@Component({
selector: 'app-counter',
template: ` <div class="counter"> <h3>काउंटर: {{ count }}</h3> <button (click)="increment()">+</button> <button (click)="decrement()">-</button> </div>
`,
styles: [` .counter {
display: flex;
gap: 10px;
align-items: center;
justify-content: center;
}
`]
})
export class CounterComponent {
@Input() count: number = 0;
@Output() countChange = new EventEmitter<number>();
increment() {
this.count++;
this.countChange.emit(this.count);
}
decrement() {
this.count--;
this.countChange.emit(this.count);
}
}Advanced एंगुलर Implementation
typescriptimport { Component, Input, Output, EventEmitter, OnInit, OnChanges, SimpleChanges } from '@angular/core';
@Component({
selector: 'app-smart-counter',
template: ` <div class="smart-counter"> <h3>स्मार्ट काउंटर: {{ value }}</h3> <button (click)="increase()">+</button> <button (click)="decrease()">-</button> </div>
`,
styles: [` .smart-counter {
background-color: #e0f7fa;
padding: 16px;
border-radius: 12px;
text-align: center;
}
`]
})
export class SmartCounterComponent implements OnInit, OnChanges {
@Input() value: number = 0;
@Output() valueChange = new EventEmitter<number>();
ngOnInit() {
console.log('SmartCounter initialized with value:', this.value);
}
ngOnChanges(changes: SimpleChanges) {
if (changes['value']) {
console.log('Value changed:', changes['value'].currentValue);
}
}
increase() {
this.value++;
this.valueChange.emit(this.value);
}
decrease() {
this.value--;
this.valueChange.emit(this.value);
}
}SmartCounterComponent @Input और @Output के साथ OnInit और OnChanges लाइफसाइकिल हुक्स का उपयोग करता है। यह बाहरी डेटा को रिएक्टिव तरीके से मैनेज करता है और इवेंट एमिटर के माध्यम से पैरेंट को अपडेट करता है। डेकोरेटर्स इस कंपोनेंट को पुन: उपयोग योग्य, परफॉर्मेंट और सुरक्षित बनाते हैं, Prop Drilling और अनावश्यक रेंडर्स से बचाते हैं।
इससे पता चलता है कि कैसे डेकोरेटर्स और लाइफसाइकिल हुक्स मिलकर डेटा फ्लो और स्टेट मैनेजमेंट को नियंत्रित करते हैं, जिससे मेन्टेनेबल और स्केलेबल एंगुलर एप्लिकेशन बनते हैं।
बेस्ट प्रैक्टिसेज़ और सामान्य गलतियाँ: @Input केवल आवश्यक डेटा के लिए उपयोग करें और @Output केवल स्पष्ट ईवेंट्स के लिए। डायरेक्ट स्टेट म्यूटेशन और अत्यधिक Prop Drilling से बचें। ChangeDetectionStrategy.OnPush का उपयोग करके परफॉर्मेंस सुधारें। Angular DevTools का उपयोग करके लाइफसाइकिल और ईवेंट एमिटर गतिविधियों की निगरानी करें। सुरक्षा के लिए असुरक्षित डेटा इंजेक्शन से बचें और टेम्पलेट चेकिंग को सक्षम करें। सही डेकोरेटर्स का उपयोग स्केलेबल, मेन्टेनेबल और परफॉर्मेंट एप्लिकेशन सुनिश्चित करता है।
📊 संपूर्ण संदर्भ
| एंगुलर Element/Method | Description | Syntax | Example | Notes |
|---|---|---|---|---|
| @Component | कंपोनेंट को परिभाषित करता है | @Component({...}) | @Component({ selector:'app-demo', template:'...' }) | सबसे सामान्य डेकोरेटर |
| @Directive | कस्टम डायरेक्टिव बनाता है | @Directive({...}) | @Directive({ selector:'[highlight]' }) | DOM व्यवहार बढ़ाता है |
| @Pipe | डेटा ट्रांसफ़ॉर्म करता है | @Pipe({...}) | @Pipe({name:'capitalize'}) | टेम्पलेट डेटा बदलता है |
| @NgModule | मॉड्यूल को परिभाषित करता है | @NgModule({...}) | @NgModule({ declarations:[], imports:[] }) | कंपोनेंट्स और डायरेक्टिव्स व्यवस्थित करता है |
| @Injectable | Dependency Injection सक्षम करता है | @Injectable({...}) | @Injectable({ providedIn:'root' }) | DI के लिए आवश्यक |
| @Input | इन्पुट प्रॉपर्टी | @Input() prop:type | @Input() title:string | पैरेंट से डेटा प्राप्त करता है |
| @Output | आउटपुट इवेंट | @Output() event=new EventEmitter() | @Output() clicked=new EventEmitter() | चाइल्ड से पैरेंट को डेटा भेजता है |
| @HostListener | DOM इवेंट सुनता है | @HostListener('click') handler(){} | @HostListener('window:scroll') onScroll() | होस्ट इवेंट बाइंड करता है |
| @ViewChild | चाइल्ड कंपोनेंट तक पहुँच | @ViewChild(ChildComponent) child!:ChildComponent | इंस्टेंस मैनिपुलेशन करता है | |
| @ContentChild | प्रोजेक्टेड कंटेंट तक पहुँच | @ContentChild(TemplateRef) tpl!:TemplateRef | टेम्पलेट कंटेंट मैनिपुलेट करता है | |
| @HostBinding | होस्ट प्रॉपर्टी बाइंडिंग | @HostBinding('class.active') isActive=true | डायनामिक DOM एट्रिब्यूट बाइंड करता है |
📊 Complete एंगुलर Properties Reference
| Property | Values | Default | Description | एंगुलर Support |
|---|---|---|---|---|
| selector | string | none | कंपोनेंट selector | सभी संस्करण |
| template | string | none | कंपोनेंट टेम्पलेट | 2+ |
| styles | array | string[] | none | CSS स्टाइल्स |
| providers | array | [] | Dependency providers | 2+ |
| inputs | array | [] | @Input सूची | 4+ |
| outputs | array | [] | @Output सूची | 4+ |
| animations | array | [] | कंपोनेंट एनिमेशन | 4+ |
| changeDetection | string | 'Default' | चेंज डिटेक्शन स्ट्रेटेजी | 5+ |
| encapsulation | string | 'Emulated' | CSS एन्कैप्सुलेशन | 2+ |
| standalone | boolean | false | स्टैंडअलोन कंपोनेंट | 14+ |
| imports | array | [] | इम्पोर्टेड मॉड्यूल | 14+ |
| schemas | array | [] | कस्टम एलिमेंट्स की अनुमति | 9+ |
डेकोरेटर्स का ज्ञान एंगुलर में स्थायी, परफॉर्मेंट और पुन: उपयोग योग्य कंपोनेंट्स बनाने की क्षमता देता है। यह स्टेट मैनेजमेंट, डेटा फ्लो और लाइफसाइकिल नियंत्रण को आसान बनाता है। अगले कदमों में Dependency Injection, Lifecycle Hooks, Change Detection स्ट्रेटेजी और RxJS का उपयोग करके असिंक्रोनस डेटा प्रबंधन शामिल हैं। इन तकनीकों को अपनाने से पेशेवर एंगुलर डेवलपमेंट स्तर पर पहुँचना संभव होता है।
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी