कोणीय ढांचे के साथ jQuery पुस्तकालय का उपयोग कैसे करें (जब यह वास्तव में आवश्यक है)

हम आपको blog.bitsrc.io पर प्रकाशित एक आदित्य मोदी लेख का अनुवाद प्रस्तुत करते हैं। यह लेख कोणीय अनुप्रयोगों में jQuery का उपयोग करने के बारे में है।



वास्तव में, मैं सावधानी से कुछ उठाता हूं। हालांकि, इस बार सावधानी नहीं बरती जाएगी, क्योंकि jQuery को कोणीय में एकीकृत करना इतना सरल नहीं है।

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

युक्ति : बिट का उपयोग करके, आप जल्दी से कोणीय घटकों को साझा कर सकते हैं और उन्हें अपने अनुप्रयोगों में पुन: उपयोग कर सकते हैं। यह आपको और आपकी टीम को नए एप्लिकेशन बनाने में कम समय बिताने की अनुमति देगा। इसे आजमाइए।



जैसा कि हो सकता है, कुछ स्थितियों में, ढांचे के साथ हस्तक्षेप आवश्यक है, उचित है, यह एक वास्तविक तरीका हो सकता है। ये मामले मेरे ब्लॉग में शामिल नहीं हैं, हालांकि, शायद मैं अपने अगले लेखों में उनके बारे में बात करूंगा। अब मैं आपको बताता हूं कि jQuery लाइब्रेरी को Angular से कैसे जोड़ा जाए। इस ट्यूटोरियल में, मैं वीएस कोड का उपयोग करूंगा। आप कुछ अन्य कोड संपादक चुन सकते हैं या विंडोज, लिनक्स और मैकओएस के लिए विजुअल स्टूडियो कोड डाउनलोड कर सकते हैं।

JQuery के एकीकरण कोणीय में

सबसे पहले, हमें ng new कमांड का उपयोग करके एक कोणीय एप्लिकेशन बनाने की आवश्यकता है। अगला, cd की मदद से cd उस फ़ोल्डर में जाते हैं जहां jQuery लाइब्रेरी npm के माध्यम से स्थापित की जाएगी। आइए परिणामी एप्लिकेशन को angularmeetsjquery ।

 ng new angularmeetsjquery cd angularmeetsjquery npm install jquery — save 

बहुत अच्छा लगता है, लेकिन jQuery के purist बजाय npm के माध्यम से jQuery CDN के माध्यम से डाउनलोड करने के लिए चुनना होगा। CDN एक कोणीय अनुप्रयोग में jQuery लाइब्रेरी जोड़ने का एक वैकल्पिक तरीका है, लेकिन मैं npm विधि का उपयोग करना पसंद करता हूं। यदि आप https://jquery.com/download/ को देखते हैं , तो आपको Google, Microsoft, CDNJS और jsDelivr से jQuery CDN लाइब्रेरी और अन्य CDN नेटवर्क मिलेंगे। मैं CDN के नवीनतम आधिकारिक संस्करण की सिफारिश करूंगा, क्योंकि यह SRI (सबस्रोइट इंटीग्रिटी) तंत्र का समर्थन करता है।

JQuery CDN का उपयोग करने के लिए, बस सीधे jQuery CDN डोमेन से script टैग में फ़ाइल का लिंक बनाएं। Subresource Integrity फ़ंक्शन के साथ कोड इस तरह दिखाई देगा। (जैसा कि आप देख सकते हैं, मैं jQuery लाइब्रेरी संस्करण 3.3.1 का उपयोग कर रहा हूं।)

 <script src=”https://code.jquery.com/jquery-3.3.1.js" integrity=”sha256–2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=” crossorigin=”anonymous”> </script> 

स्क्रिप्ट को code.jquery.com संसाधन से कॉपी किया जा सकता है। इसके बाद, आपको < body > टैग के अंत में इसे index.html फ़ाइल में सम्मिलित करना होगा।

JQuery लाइब्रेरी को वैश्विक बनाना

JQuery मॉड्यूल के डिस्क फ़ोल्डर में स्थित jquery.min.js फ़ाइल सार्वजनिक नहीं है (फ़ोल्डर का सही नाम दूर है। - लगभग। एड। )। JQuery लाइब्रेरी को वैश्विक बनाने के लिए, फ़ाइल .angular-cli.json और उसमें jQuery फ़ाइल के पथ का लिंक लिखें।

एक कोणीय अनुप्रयोग के अंदर एक फ़ाइल पथ के लिए एक लिंक स्थानांतरित करते समय, रूट फ़ोल्डर src है। हालाँकि, jQuery लाइब्रेरी node_modules निर्देशिका के अंदर है। इसलिए, आपको .angular-cli.json का सही पथ निर्धारित करने की आवश्यकता है।

 ../node_modules/jquery/dist/jquery.min.js 

यह सुनिश्चित करने के लिए कि मार्ग सही है, node_modules→jquery→dist→jquery.min.js । यहां आप निर्दिष्ट पथ देख सकते हैं, जिसका अर्थ है कि इस एप्लिकेशन के लिए jQuery लाइब्रेरी को वैश्विक रूप से जोड़ा गया है। लोकलहोस्ट से अपेक्षा न करें: अपने ब्राउज़र में 4200 पेज खुद को फिर से लोड करने के लिए, क्योंकि फाइल src फ़ोल्डर के बाहर स्थित है। आवेदन में प्रकट होने वाले परिवर्तनों के लिए, आपको इसे पुनः आरंभ करना होगा।

 ng serve –open 

एक कोणीय अनुप्रयोग में jQuery का उपयोग करना

कोणीय ढांचे के साथ jQuery पुस्तकालय का उपयोग शुरू करने के लिए, आपको एप्लिकेशन घटकों पर जाने की आवश्यकता है। मैं आपको दिखाऊंगा कि कैसे ये दोनों प्रौद्योगिकियां एक साधारण button HTML तत्व के साथ मिलकर काम कर सकती हैं। लेकिन पहले, app.component.html फ़ाइल में कोड की सभी पंक्तियों को हटा दें और button HTML तत्व जोड़ें।

 <button> Click me </button> 

पृष्ठ स्वचालित रूप से पुनः लोड होगा, फिर एक बटन दिखाई देगा।



हमें app.component.ts फ़ाइल में jQuery के लिए वर्ण सेट करने की आवश्यकता है।

 declare var $: any; 

फिर ngOnInit जीवन चक्र हुक डालें। ऐसा करने के लिए, आप OnInit को Angular Core से आयात कर सकते हैं।

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

ngOnInit जोड़ें।

 export class AppComponent implements OnInit { 

DOM की तत्परता के बावजूद, आप ngOnInit मेथड के अंदर jQuery कोड लिख सकते हैं, जैसा कि मानक ngOnInit विकास के साथ किया जाता है। app.component.html में app.component.html बटन का परीक्षण करने के लिए, button.click विधि में button.click इवेंट जोड़ें।

 export class AppComponent implements OnInit { ngOnInit(){ $('button').click(function(){ alert('Wass up!'); }); } } 

यदि आप बटन पर क्लिक करते हैं, तो "Wass Up" दिखाई देगा।

निष्कर्ष

इस बंडल का उपयोग करने के साथ-साथ कोणीय में jQuery जोड़ना एक संदिग्ध विचार है।

हां, पहली नज़र में यह विधि सरल लगती है। हालांकि, जैसा कि मैंने लेख की शुरुआत में कहा था, इन दोनों प्रौद्योगिकियों के संयुक्त उपयोग को देखने पर कोई फर्क नहीं पड़ता, विचार अक्सर सबसे खराब होता है। वास्तविक दुनिया के कोणीय अनुप्रयोगों में, आपको ईवेंट-संबंधित HTML button तत्व की तुलना में बहुत अधिक जटिल चीजों से निपटना होगा। सभी के लिए मेरी सलाह जो कोणीय के साथ काम करती है और अपने टाइपस्क्रिप्ट कोड में jQuery एम्बेड करने के लिए एक अवसर की तलाश में है: यदि आवश्यक नहीं है, तो नहीं। मैं आपको jQuery और कोणीय के क्षेत्र में सफल प्रयोगों की कामना करता हूं!