स्टैंडअलोन कंपोनेंट क्यों
देखें कि स्टैंडअलोन कंपोनेंट Angular को कैसे सरल बनाते हैं।
स्टैंडअलोन कंपोनेंट क्यों, CoddyKit पर Angular Academy का एक निःशुल्क पाठ है। यह 4 में से 1वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह Angular Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
Standalone Components क्यों?
Standalone components आपको NgModules के बिना Angular apps बनाने देते हैं। प्रत्येक component अपनी dependencies घोषित करता है, जिससे building blocks स्व-निहित और समझने में आसान हो जाते हैं।
NgModule का युग
परंपरागत रूप से प्रत्येक component, directive और pipe को किसी @NgModule के अंदर घोषित करना पड़ता था। Modules declarations को समूहित करते और imports/exports का प्रबंधन करते थे।
इससे अनावश्यक औपचारिक कोड और अप्रत्यक्षता की एक अतिरिक्त परत जुड़ जाती थी।
NgModules से उत्पन्न समस्याएँ
NgModules से कई सामान्य कठिनाइयाँ आईं: component को declare करना भूल जाना, उसे दो modules में declare करना, imports और declarations के बीच भ्रम, तथा ऐसे बड़े shared modules जो आवश्यकता से बहुत अधिक चीज़ें शामिल कर लेते थे।
Standalone का विचार
Standalone components के साथ प्रत्येक component अपने imports array के माध्यम से ठीक वही सूचीबद्ध करता है जिसकी उसे आवश्यकता है। ऐसा कोई केंद्रीय module नहीं होता जिसे उसके बारे में जानना आवश्यक हो।
import { Component } from '@angular/core';
@Component({
selector: 'app-hello',
standalone: true,
template: '<p>Hello</p>'
})
export class HelloComponent {}स्व-निहित Dependencies
क्योंकि standalone component अपनी dependencies स्वयं घोषित करता है, आप एक ही file पढ़कर जान सकते हैं कि वह किन सभी चीज़ों पर निर्भर है। इससे स्पष्टता और tooling बेहतर होती है।
कम अनावश्यक औपचारिक कोड
अब modules में declarations और exports का आपस में मिलान करने की आवश्यकता नहीं रहती। जिस स्थान पर component का उपयोग करते हैं, वहीं उसे सीधे import करते हैं, ठीक वैसे ही जैसे ES modules काम करते हैं।
बेहतर Tree-Shaking
Standalone components dependency graph को स्पष्ट बनाते हैं, जिससे bundlers अप्रयुक्त code हटा सकते हैं और bundles छोटे हो सकते हैं।
Lazy Loading हुआ आसान
Routes किसी feature module wrapper की आवश्यकता के बिना dynamic import के माध्यम से standalone component को सीधे lazy load कर सकते हैं।
// route: loadComponent: () => import('./page.component').then(m => m.PageComponent)नया Default
Angular के हाल के versions में नए बनाए गए components के लिए standalone default है। NgModules अब भी काम करते हैं, लेकिन आगे बढ़ने के लिए standalone की अनुशंसा की जाती है।
NgModules के साथ Interoperability
Standalone और module-based code एक-दूसरे के साथ काम करते हैं। Standalone component को NgModule में import किया जा सकता है, और NgModule-based component standalone imports का उपयोग कर सकता है, जिससे migration आसान हो जाता है।
आपको अब भी क्या Configure करना है
पूरे application का setup, जैसे router या HTTP client, root module के बजाय bootstrapApplication providers के माध्यम से दिया जाता है; इसे आप आगे देखेंगे।
त्वरित जाँच: Standalone क्यों
Standalone components का मुख्य लाभ क्या है?
पुनरावलोकन: Standalone क्यों
Standalone components प्रत्येक component को अपनी dependencies घोषित करने देकर NgModule के अनावश्यक औपचारिक code को समाप्त करते हैं। इससे code अधिक स्पष्ट होता है, lazy loading आसान होती है और tree-shaking बेहतर होता है। अब standalone default है। अगला विषय: एक standalone component बनाना।
एआई शिक्षक के साथ HTML सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 38
- पाठ
- 144
अक्सर पूछे जाने वाले प्रश्न
क्या “स्टैंडअलोन कंपोनेंट क्यों” पाठ निःशुल्क है?
हाँ — Angular Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “स्टैंडअलोन कंपोनेंट क्यों” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। Angular Academy पाठ्यक्रम में कुल 4 पाठ शामिल हैं।
“स्टैंडअलोन कंपोनेंट क्यों” में मैं क्या सीखूँगा?
देखें कि स्टैंडअलोन कंपोनेंट Angular को कैसे सरल बनाते हैं। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ Angular Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या Angular Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर Angular Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 4 में से 1वाँ पाठ है।
“स्टैंडअलोन कंपोनेंट क्यों” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस Angular Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर Angular Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- स्टैंडअलोन कंपोनेंट क्यों
- स्टैंडअलोन कंपोनेंट बनाना
- डिपेंडेंसी सीधे इंपोर्ट करना
- स्टैंडअलोन ऐप का बूटस्ट्रैपिंग