Angular Academy · पाठ

ज़ोनरहित Angular

Zone.js के बिना Angular चलाएँ

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

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

Zone.js से आगे

Zone.js में अतिरिक्त लागत होती है और यह वैश्विक एपीआई में पैच लगाता है। आधुनिक एंगुलर ज़ोन-रहित मोड प्रदान करता है, जहाँ परिवर्तन-जाँच ज़ोन पैचिंग के बजाय सिग्नल और स्पष्ट सूचनाओं से संचालित होती है।

ज़ोन-रहित मोड सक्षम करना

अपने बूटस्ट्रैप कॉन्फ़िगरेशन में ज़ोन-रहित परिवर्तन-जाँच प्रदाता उपलब्ध कराएँ।

bootstrapApplication(AppComponent, {
  providers: [
    provideExperimentalZonelessChangeDetection()
  ]
});

Zone.js हटाना

ज़ोन-रहित मोड में आप अपने बिल्ड कॉन्फ़िगरेशन से zone.js पॉलीफ़िल भी हटा देते हैं, जिससे बंडल का आकार और शुरू होने की लागत कम हो जाती है।

// angular.json: remove "zone.js" from polyfills
// main.ts: do not import 'zone.js'

अब जाँच किससे सक्रिय होती है

ज़ोन के बिना एंगुलर तब परिवर्तन-जाँच शेड्यूल करता है जब: टेम्पलेट में पढ़े गए किसी सिग्नल में बदलाव हो, कोई async पाइप मान जारी करे, कोई इवेंट बाइंडिंग सक्रिय हो, या markForCheck() कॉल किया जाए।

सिग्नल केंद्रीय भूमिका निभाते हैं

ज़ोन-रहित ऐप स्थिति के लिए सिग्नल पर बहुत अधिक निर्भर करते हैं। टेम्पलेट में सिग्नल पढ़ने से निर्भरता बनती है; उसे अपडेट करने पर एंगुलर उस दृश्य को रीफ़्रेश करने के लिए सूचित होता है।

count = signal(0);
// template: {{ count() }}
this.count.set(5); // schedules CD

इवेंट अब भी सूचना देते हैं

टेम्पलेट इवेंट बाइंडिंग एंगुलर को सीधे सूचित करती हैं, इसलिए ज़ोन के बिना भी उपयोगकर्ता की क्रियाओं के बाद यूआई अपडेट होता रहता है।

<button (click)="count.update(c => c + 1)">+</button>

ज़ोन के बिना async

साधारण setTimeout या सिग्नल के बिना होने वाला async अब अपने-आप जाँच सक्रिय नहीं करता। ऐसी स्थिति को सिग्नल में रखें या markForCheck() कॉल करें।

setTimeout(() => this.ready.set(true), 1000);

async पाइप की संगतता

async पाइप ज़ोन-रहित मोड में भी काम करता रहता है, क्योंकि हर बार मान जारी होने पर यह दृश्य को जाँच के लिए स्पष्ट रूप से चिह्नित करता है।

<p>{{ data$ | async }}</p>

तृतीय-पक्ष लाइब्रेरी

कुछ लाइब्रेरी Zone.js की स्वचालित जाँच पर निर्भर थीं। ज़ोन-रहित मोड में आपको उनके कॉलबैक को किसी सिग्नल को अपडेट करने या मैन्युअल रूप से markForCheck() कॉल करने के लिए रैप करना पड़ सकता है।

लाभ

ज़ोन-रहित मोड का अर्थ है छोटे बंडल, तेज़ शुरुआत, कम अप्रत्याशित अतिरिक्त टिक और अधिक स्पष्ट मानसिक मॉडल: यूआई केवल तभी अपडेट होता है जब आपके द्वारा ट्रैक की जाने वाली स्थिति वास्तव में बदलती है।

प्रायोगिक स्थिति

प्रदाता का नाम provideExperimentalZonelessChangeDetection इसलिए है क्योंकि एपीआई अभी स्थिर हो रहा है। नए, सिग्नल-प्रथम ऐप में इसे अपनाएँ और अच्छी तरह परीक्षण करें।

त्वरित जाँच

ज़ोन-रहित एंगुलर की अपनी समझ जाँचें।

पुनरावलोकन

आपने सीखा कि provideExperimentalZonelessChangeDetection() Zone.js की आवश्यकता हटा देता है और सिग्नल, इवेंट, async पाइप तथा markForCheck() के माध्यम से अपडेट संचालित करता है, जिससे ऐप छोटे, तेज़ और अधिक पूर्वानुमेय बनते हैं।

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

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

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

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

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

क्या “ज़ोनरहित Angular” पाठ निःशुल्क है?

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

“ज़ोनरहित Angular” में मैं क्या सीखूँगा?

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

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

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

“ज़ोनरहित Angular” पाठ पूरा करने में कितना समय लगता है?

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

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

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

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

  1. परिवर्तन पहचान कैसे काम करती है
  2. OnPush परिवर्तन पहचान
  3. ज़ोनरहित Angular
  4. सूचियों और रेंडरिंग का अनुकूलन
← Angular Academy पर वापस जाएँ