Angular v16 में नया क्या है?

कोणीय, Google द्वारा अनुरक्षित, वेब अनुप्रयोगों के विकास के लिए व्यापक रूप से उपयोग किया जाने वाला ओपन-सोर्स फ्रेमवर्क है। यह आपको एक मजबूत टूलकिट और कई प्रकार की सुविधाएँ प्रदान करता है जो आपको गतिशील, उत्तरदायी और स्केलेबल वेब एप्लिकेशन बनाने देती हैं।

एंगुलर वर्जन 16 का हालिया लॉन्च विकास के अनुभव के साथ-साथ बेहतर एप्लिकेशन प्रदर्शन और स्थिरता के लिए रोमांचक अपडेट और सुधार पेश करता है।

1. कोणीय संकेत

कोणीय संकेत एक पुस्तकालय है जो प्रतिक्रियाशील मूल्यों की परिभाषा और उनके बीच निर्भरताओं की स्थापना को सक्षम बनाता है। एक कोणीय अनुप्रयोग के भीतर कोणीय संकेतों का उपयोग करने का एक सरल उदाहरण यहां दिया गया है:

@अवयव ({
 चयनकर्ता: 'मेरा ऐप',
 स्टैंडअलोन: सत्य,
 साँचा: `
{{ पूरा नाम() }} "सेटनाम ('जॉन')">क्लिक करें</button>
`,
})
निर्यातकक्षा अनुप्रयोग {
 पहला नाम = संकेत ('जेन');
 अंतिम नाम = संकेत ('डो');
 पूरा नाम = परिकलित (() =>`${यह।पहला नाम()}${यह।उपनाम()}`);
निर्माता() {
 प्रभाव(() =>सांत्वना देना





instagram viewer
।लकड़ी का लट्ठा('नाम बदल दिया गया है:', यह।पूरा नाम()));
 }
 सेटनाम (नया नाम: डोरी) {
यह.firstName.set (नया नाम);
 }
}

उपरोक्त कोड स्निपेट पूर्ण नाम नामक एक परिकलित मान बनाता है, जो पहले नाम और अंतिम नाम के संकेतों पर निर्भर करता है। इसके अतिरिक्त, यह एक प्रभाव को परिभाषित करता है, एक कॉलबैक फ़ंक्शन जो तब चलता है जब संकेतों के मान में परिवर्तन होता है।

इस मामले में, पूर्णनाम मान पहले नाम और अंतिम नाम पर निर्भर करता है, इसलिए उनमें से किसी एक को बदलने से प्रभाव शुरू हो जाता है। जब firstName का मान जॉन पर सेट होता है, तो ब्राउज़र कंसोल में निम्न संदेश लॉग करता है:

 नाम बदला गया: जॉन डो।

2. स्टैंडअलोन एनजी न्यू कलेक्शन

Angular v16 से शुरू करके, आप शुरुआत से ही नए स्टैंडअलोन प्रोजेक्ट बना सकते हैं! स्टैंडअलोन स्कीमैटिक्स के डेवलपर पूर्वावलोकन को आज़माने के लिए, सुनिश्चित करें कि आपके पास कोणीय CLI v16 स्थापित है और निम्न कमांड चलाएँ:

एनजी नया --standalone

ऐसा करने से, आप बिना किसी NgModules के एक सरल प्रोजेक्ट संरचना प्राप्त करेंगे। इसके अलावा, परियोजना के सभी जनरेटर स्टैंडअलोन निर्देश, घटक और पाइप का उत्पादन करेंगे!

3. स्वचालित मार्ग Params मानचित्रण

रूटिंग कॉन्फ़िगरेशन पर निम्नानुसार विचार करें:

निर्यातकॉन्स्ट मार्ग: मार्ग = [{
 पथ: 'खोजें:/आईडी',
 घटक: खोज घटक,
 संकल्प: {
 खोज विवरण: searchResolverFn
 }
}];

एंगुलर 16 से पहले, आपको किसी विशेष URL के लिए URL पैरामीटर, क्वेरी पैरामीटर या संबंधित डेटा को पुनः प्राप्त करने के लिए ActivatedRoute सेवा को इंजेक्ट करने की आवश्यकता होती है।

यहां एक उदाहरण दिया गया है कि आपको यह कैसे करना था:

@अवयव({
 ...
})
निर्यातकक्षा खोज घटक {
 केवल पढ़ने के लिए #activeRoute = इंजेक्षन (सक्रिय मार्ग);
 केवल पढ़ने के लिए आईडी $ = यह.#activeRoute.paramMap (नक्शा (पैरामीटर => परम.गेट ('पहचान')));
 केवल पढ़ने के लिए डेटा $ = यह.#activeRoute.data.map (({
 खोज विवरण
 }) => खोज विवरण);
}

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

मॉड्यूल सिस्टम का उपयोग करने वाले एप्लिकेशन में इस कार्यक्षमता को सक्रिय करने के लिए, राउटरमॉड्यूल विकल्पों में संबंधित मान सेट करें:

RouterModule.forRoot (मार्ग, {
 बाइंडकंपोनेंट इनपुट: सत्य
})

स्टैंडअलोन एप्लिकेशन के लिए, आपको इसके बजाय फ़ंक्शन कॉल करने की आवश्यकता है:

प्रोवाइडरूट्स (रूट्स, withComponentInputBinding());

एक बार जब आप इस कार्यक्षमता को सक्रिय कर लेते हैं, तो घटक बहुत आसान हो जाता है:

@अवयव({
 ...
})
निर्यातकक्षा खोज घटक {
@ इनपुट() पहचान!: डोरी;
@ इनपुट() खोज विवरण!: खोज विवरण;
}

4. आवश्यक इनपुट

कोणीय समुदाय के लिए एक उच्च प्रत्याशित विशेषता आवश्यकता के अनुसार कुछ इनपुट को चिह्नित करने की क्षमता है। अब तक, आपको इसे प्राप्त करने के लिए विभिन्न समाधानों का उपयोग करना पड़ता था, जैसे NgOnInit में त्रुटि उत्पन्न करना जीवनचक्र यदि चर को परिभाषित नहीं किया गया था या अनिवार्य को शामिल करने के लिए घटक के चयनकर्ता को संशोधित किया गया था आदानों।

हालाँकि, इन दोनों समाधानों के अपने फायदे और नुकसान थे। संस्करण 16 से शुरू करना, आवश्यक इनपुट करना उतना ही सरल है जितना कि इनपुट एनोटेशन के मेटाडेटा में कॉन्फ़िगरेशन ऑब्जेक्ट प्रदान करना:

@ इनपुट({
 आवश्यक: सत्य
}) नाम!: डोरी;

5. देव सर्वर के रूप में Vite

एंगुलर 14 ने एस्बिल्ड नामक एक नया जावास्क्रिप्ट बंडलर पेश किया, जिसने बिल्ड समय में लगभग 40% सुधार किया। हालाँकि, आप इस प्रदर्शन लाभ को केवल बिल्ड चरण के दौरान महसूस कर सकते हैं न कि देव सर्वर के साथ विकास के दौरान।

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

इस सुविधा को सक्रिय करने के लिए, निम्नानुसार Angular.json फ़ाइल में बिल्डर कॉन्फ़िगरेशन को अपडेट करें:

"आर्किटेक्ट": {
"निर्माण": {
"बिल्डर": "@angular-devkit/build-angular: ब्राउज़र-esbuild",
"विकल्प": {
 ...
 }
 }

कृपया ध्यान दें कि यह कार्यक्षमता अभी भी प्रयोगात्मक है।

विकास के अनुभव और प्रदर्शन को बढ़ाना

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