Angular Academy · पाठ

ngOnInit और आरंभीकरण

कंपोनेंट शुरू होने पर सेटअप तर्क चलाएँ।

पाठ 1, कुल 4 में से13 चरण

ngOnInit और आरंभीकरण, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

लाइफ़साइकल हुक क्या हैं?

Angular कॉम्पोनेंट का एक लाइफ़साइकल होता है, जिसे फ़्रेमवर्क संभालता है: निर्माण, परिवर्तन-जाँच, रेंडरिंग और विनाश। लाइफ़साइकल हुक आपको खास क्षणों पर कोड चलाने देते हैं।

OnInit का परिचय

OnInit हुक एक बार चलता है, जब Angular कॉम्पोनेंट के इनपुट सेट करके शुरुआती दृश्य रेंडर कर चुका होता है। आरंभिक लॉजिक के लिए यह मानक स्थान है।

OnInit को लागू करना

OnInit इंटरफ़ेस लागू करें और ngOnInit मेथड जोड़ें। Angular इसे अपने-आप कॉल करता है।

import { Component, OnInit } from "@angular/core";

@Component({ selector: "app-demo", template: "" })
export class DemoComponent implements OnInit {
  ngOnInit(): void {
    console.log("Component initialized");
  }
}

Constructor और ngOnInit

Constructor सबसे पहले चलता है, इनपुट सेट होने से पहले, और इसमें केवल हल्का डिपेंडेंसी इंजेक्शन होना चाहिए। इनपुट उपलब्ध होने के बाद वास्तविक सेटअप के लिए ngOnInit का उपयोग करें।

constructor(private http: HttpClient) {
  // inputs NOT ready yet
}

ngOnInit() {
  // inputs ARE ready here
}

ngOnInit में इनपुट तैयार होते हैं

ngOnInit के चलने तक सभी @Input गुणों में पैरेंट से बंधे हुए उनके शुरुआती मान आ चुके होते हैं।

@Input() userId!: string;

ngOnInit() {
  console.log(this.userId); // available
}

ngOnInit में डेटा प्राप्त करना

एक सामान्य तरीका है कि ngOnInit में किसी सेवा से डेटा लोड किया जाए, क्योंकि वहाँ इनपुट और डिपेंडेंसी उपलब्ध होती हैं।

ngOnInit() {
  this.userService.getUser(this.userId)
    .subscribe(u => this.user = u);
}

ngOnInit एक बार चलता है

परिवर्तन-जाँच हुक से अलग, ngOnInit कॉम्पोनेंट के जीवनकाल में ठीक एक बार, पहले ngOnChanges के तुरंत बाद चलता है।

ngOnChanges के सापेक्ष क्रम

यदि कॉम्पोनेंट में इनपुट हैं, तो ngOnChanges पहले शुरुआती मानों के साथ चलता है, फिर ngOnInit चलता है। इनपुट न होने पर भी ngOnInit चलता है।

// sequence with inputs:
// 1. constructor
// 2. ngOnChanges (first)
// 3. ngOnInit

फ़ॉर्म आरंभ करना

रिएक्टिव फ़ॉर्म बनाना ngOnInit का एक सामान्य कार्य है, क्योंकि फ़ॉर्म सेट करने के लिए इंजेक्ट की गई सेवाओं की आवश्यकता हो सकती है।

form!: FormGroup;

ngOnInit() {
  this.form = this.fb.group({
    name: [""],
    email: [""]
  });
}

Constructor को हल्का रखें

Constructor में भारी कार्य करने से बचें। यह Angular द्वारा इनपुट जोड़ने से पहले चलता है, और इसमें किए गए साइड इफ़ेक्ट कॉम्पोनेंट को टेस्ट करना और उसके व्यवहार का अनुमान लगाना कठिन बनाते हैं।

असिंक्रोनस आरंभीकरण

आप ngOnInit से असिंक्रोनस लॉजिक कॉल कर सकते हैं, लेकिन मेथड स्वयं void लौटाता है; इसके अंदर subscribe करें या असिंक्रोनस तरीकों का उपयोग करें।

ngOnInit() {
  this.loadAsync();
}

private async loadAsync() {
  this.data = await firstValueFrom(this.api.get());
}

त्वरित जाँच

OnInit की अपनी समझ जाँचें।

इंटरैक्टिव पाठ में इसका उत्तर दें

पुनरावृत्ति

OnInit हुक और ngOnInit इनपुट बंधने के बाद एक बार चलते हैं और डेटा प्राप्त करने तथा फ़ॉर्म सेट करने के लिए आदर्श हैं। Constructor को हल्का रखें और आरंभीकरण के लिए ngOnInit का उपयोग करें।

शुरुआत निःशुल्क

एआई शिक्षक के साथ HTML सीखें — निःशुल्क

अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।

पाठ्यक्रम: 38
पाठ: 144

निःशुल्क सीखना शुरू करें पूरा पाठ्यक्रम देखें

अक्सर पूछे जाने वाले प्रश्न

क्या “ngOnInit और आरंभीकरण” पाठ निःशुल्क है?

हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “ngOnInit और आरंभीकरण” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।

“ngOnInit और आरंभीकरण” में मैं क्या सीखूँगा?

कंपोनेंट शुरू होने पर सेटअप तर्क चलाएँ। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।

क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?

पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।

“ngOnInit और आरंभीकरण” पाठ पूरा करने में कितना समय लगता है?

CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।

क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?

हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।

इस पाठ्यक्रम के सभी पाठ

← Angular Academy पर वापस जाएँ