AngularJS बनाम jQuery
AngularJS और jQuery बहुत अलग विचारधाराओं को अपनाते हैं। यदि आप jQuery से आ रहे हैं तो आपको कुछ अंतर आश्चर्यजनक लग सकते हैं। कोणीय आपको गुस्सा दिला सकता है।
यह सामान्य है, आपको धक्का देना चाहिए। कोणीय इसके लायक है।
बड़ा अंतर (TLDR)
jQuery आपको DOM के मनमाने बिट्स का चयन करने और उनके लिए तदर्थ परिवर्तन करने के लिए एक टूलकिट देता है। आप बहुत कुछ भी कर सकते हैं आप टुकड़ा द्वारा टुकड़ा पसंद करते हैं।
इसके बजाय AngularJS आपको एक कंपाइलर देता है ।
इसका मतलब यह है कि एंगुलरजेएस आपके पूरे डोम को ऊपर से नीचे तक पढ़ता है और इसे कोड के रूप में मानता है, शाब्दिक रूप से संकलक को निर्देश। जैसा कि यह DOM को ट्रेस करता है, यह विशिष्ट निर्देशों (कंपाइलर निर्देशों) की तलाश करता है जो AngularJS कंपाइलर को बताते हैं कि कैसे व्यवहार करना है और क्या करना है। निर्देश जावास्क्रिप्ट से भरी छोटी वस्तुएं हैं जो विशेषताओं, टैग, कक्षाओं या टिप्पणियों के खिलाफ मेल खा सकती हैं।
जब कोणीय कंपाइलर यह निर्धारित करता है कि DOM का एक टुकड़ा किसी विशेष निर्देश से मेल खाता है, तो वह निर्देश फ़ंक्शन को कॉल करता है, इसे DOM तत्व, कोई गुण, वर्तमान $ क्षेत्र (जो एक स्थानीय वैरिएबल स्टोर है), और कुछ अन्य उपयोगी बिट्स को पास करता है। इन विशेषताओं में ऐसे भाव हो सकते हैं, जिन्हें निर्देश द्वारा व्याख्यायित किया जा सकता है, और जो यह बताते हैं कि कैसे रेंडर करना है, और जब इसे स्वयं को फिर से बनाना चाहिए।
निर्देश इसके बाद अतिरिक्त कोणीय घटकों जैसे नियंत्रकों, सेवाओं, आदि में खींच सकते हैं, जो संकलक के नीचे से निकलता है, पूरी तरह से गठित वेब अनुप्रयोग है, वायर्ड और जाने के लिए तैयार है।
इसका मतलब है कि Angular Template Driven है । आपका टेम्पलेट जावास्क्रिप्ट को चलाता है, न कि दूसरे तरीके से। यह भूमिकाओं का एक क्रांतिकारी उलटा है, और विनीत जावास्क्रिप्ट के पूर्ण विपरीत हम पिछले 10 वर्षों से लिख रहे हैं। यह कुछ करने की आदत हो सकती है।
यदि यह लगता है कि यह ओवर-प्रिस्क्रिप्टिव और सीमित हो सकता है, तो कुछ भी सच्चाई से दूर नहीं हो सकता है। क्योंकि AngularJS आपके HTML को कोड के रूप में मानता है, आपको अपने वेब एप्लिकेशन में HTML स्तर की ग्रैन्युलैरिटी मिलती है । सब कुछ संभव है, और कुछ वैचारिक छलांग लगाने के बाद ज्यादातर चीजें आश्चर्यजनक रूप से आसान होती हैं।
चलिए नीचे उतरते हैं नाटी की किरकिरी पर।
सबसे पहले, कोणीय jQuery की जगह नहीं लेता है
कोणीय और jQuery अलग-अलग चीजें करते हैं। AngularJS आपको वेब एप्लिकेशन बनाने के लिए उपकरणों का एक सेट देता है। jQuery मुख्य रूप से DOM को संशोधित करने के लिए आपको उपकरण देता है। यदि jQuery आपके पेज पर मौजूद है, तो AngularJS इसे अपने आप उपयोग करेगा। यदि ऐसा नहीं है, तो AngularJS जहाज jQuery लाइट के साथ है, जो एक कट डाउन है, लेकिन फिर भी jQuery का पूरी तरह से उपयोग करने योग्य संस्करण है।
Misko को jQuery पसंद है और इसका उपयोग करने से आपको कोई आपत्ति नहीं है। हालाँकि आप अग्रिम रूप से पाएंगे कि आप अपने सभी कार्यक्षेत्र, टेम्प्लेट और निर्देशों के संयोजन का उपयोग करके कर सकते हैं, और आपको इस वर्कफ़्लो को पसंद करना चाहिए जहाँ संभव हो क्योंकि आपका कोड अधिक असतत, अधिक विन्यास और अधिक होगा कोणीय।
यदि आप jQuery का उपयोग करते हैं, तो आपको इसे पूरे स्थान पर नहीं छिड़कना चाहिए। AngularJS में DOM हेरफेर के लिए सही जगह एक निर्देश में है। इन पर बाद में।
विनीत जावास्क्रिप्ट चयनकर्ताओं बनाम घोषणात्मक टेम्पलेट्स के साथ
jQuery आमतौर पर विनीत रूप से लागू किया जाता है। आपका जावास्क्रिप्ट कोड हेडर (या फूटर) में जुड़ा हुआ है, और यह एकमात्र स्थान है जिसका उल्लेख किया गया है। हम चयनकर्ताओं का उपयोग पृष्ठ के बिट्स को चुनने और उन हिस्सों को संशोधित करने के लिए प्लगइन्स लिखने के लिए करते हैं।
जावास्क्रिप्ट नियंत्रण में है। HTML का पूर्ण स्वतंत्र अस्तित्व है। आपका HTML जावास्क्रिप्ट के बिना भी अर्थ रहता है। Onclick विशेषताएँ बहुत बुरा अभ्यास हैं।
एंगुलरजेएस के बारे में आपकी पहली बातों में से एक यह है कि कस्टम विशेषताएँ हर जगह हैं । आपका HTML एनजी विशेषताओं के साथ लिट जाएगा, जो अनिवार्य रूप से स्टेरॉयड पर ऑनक्लिक विशेषताओं पर हैं। ये निर्देशक (संकलक निर्देश) हैं, और मुख्य तरीकों में से एक है जिसमें टेम्पलेट को मॉडल के साथ जोड़ा जाता है।
जब आप पहली बार यह देखते हैं तो आपको AngularJS को पुराने स्कूल घुसपैठिया जावास्क्रिप्ट के रूप में लिखने के लिए लुभाया जा सकता है (जैसे मैंने पहली बार किया था)। वास्तव में, AngularJS उन नियमों से नहीं खेलता है। AngularJS में, आपका HTML5 एक टेम्प्लेट है। यह आपके वेब पेज का निर्माण करने के लिए AngularJS द्वारा संकलित किया गया है।
यह पहला बड़ा अंतर है। JQuery के लिए, आपके वेब पेज में हेरफेर किया जाने वाला एक DOM है। AngularJS के लिए, आपका HTML कोड संकलित किया जाना है। AngularJS आपके पूरे वेब पेज में पढ़ता है और अपने संकलक में इसका उपयोग करके नए वेब पेज में इसका शाब्दिक संकलन करता है।
आपका टेम्पलेट घोषणात्मक होना चाहिए; इसका अर्थ केवल इसे पढ़ने से स्पष्ट होना चाहिए। हम सार्थक नामों के साथ कस्टम विशेषताओं का उपयोग करते हैं। हम नए HTML तत्वों को बनाते हैं, फिर से सार्थक नामों के साथ। न्यूनतम HTML ज्ञान और बिना कोडिंग कौशल वाला एक डिज़ाइनर आपके AngularJS टेम्पलेट को पढ़ सकता है और समझ सकता है कि वह क्या कर रहा है। वह संशोधन कर सकता है। यह कोणीय तरीका है।
टेम्पलेट ड्राइविंग सीट पर है।
AngularJS को शुरू करने और ट्यूटोरियल के माध्यम से चलने पर पहला सवाल मैंने खुद से पूछा "मेरा कोड कहां है?" । मैंने कोई जावास्क्रिप्ट नहीं लिखा है, और फिर भी मेरे पास यह सब व्यवहार है। उत्तर स्पष्ट है। क्योंकि AngularJS DOM को कंपाइल करता है, AngularJS आपके HTML को कोड के रूप में मान रहा है। कई सरल मामलों के लिए यह अक्सर केवल एक टेम्प्लेट लिखने के लिए पर्याप्त होता है और AngularJS इसे आपके लिए एक एप्लिकेशन में संकलित करने देता है।
आपका टेम्प्लेट आपके एप्लिकेशन को चलाता है। इसे डीएसएल के रूप में माना जाता है । आप AngularJS घटक लिखते हैं, और AngularJS आपके टेम्पलेट की संरचना के आधार पर उन्हें अंदर खींचने और उन्हें सही समय पर उपलब्ध कराने का ध्यान रखेगा। यह एक मानक एमवीसी पैटर्न से बहुत अलग है , जहां टेम्पलेट सिर्फ आउटपुट के लिए है।
यह उदाहरण के लिए पटरियों पर रूबी की तुलना में XSLT के समान है ।
यह नियंत्रण का एक कट्टरपंथी उलटा है जो कुछ उपयोग करने के लिए ले जाता है।
अपने जावास्क्रिप्ट से अपने एप्लिकेशन को चलाने की कोशिश करना बंद करें। टेम्प्लेट को एप्लिकेशन को चलाने दें, और एंगुलरजेएस घटकों को एक साथ रखने का ध्यान रखें। यह भी कोणीय तरीका है।
सिमेंटिक HTML बनाम सिमेंटिक मॉडल
JQuery के साथ आपके HTML पेज में अर्थपूर्ण सामग्री होनी चाहिए। यदि जावास्क्रिप्ट बंद है (एक उपयोगकर्ता या खोज इंजन द्वारा) आपकी सामग्री सुलभ है।
क्योंकि AngularJS आपके HTML पेज को एक टेम्पलेट के रूप में मानता है। टेम्पलेट को शब्दार्थ नहीं माना जाता है क्योंकि आपकी सामग्री आमतौर पर आपके मॉडल में संग्रहीत होती है जो अंततः आपके एपीआई से आती है। AngularJS एक अर्थ वेब पेज बनाने के लिए मॉडल के साथ आपके DOM को संकलित करता है।
आपका HTML स्रोत अब शब्दार्थ नहीं है, इसके बजाय, आपका API और संकलित DOM शब्दार्थ है।
AngularJS में, अर्थ मॉडल में रहता है, HTML केवल प्रदर्शन के लिए एक टेम्पलेट है।
इस बिंदु पर आपके पास एसईओ और पहुंच से संबंधित सभी प्रकार के प्रश्न होने की संभावना है , और ठीक ही ऐसा है। यहां खुले मुद्दे हैं। अधिकांश स्क्रीन रीडर अब जावास्क्रिप्ट को पार्स करेंगे। सर्च इंजन AJAXed कंटेंट को भी इंडेक्स कर सकते हैं । फिर भी, आप यह सुनिश्चित करना चाहेंगे कि आप पुशस्ट्रेट URL का उपयोग कर रहे हैं और आपके पास एक अच्छा साइटमैप है। मुद्दे की चर्चा के लिए यहां देखें: https://stackoverflow.com/a/23245379/687677
चिंताओं का अलगकरण (एसओसी) बनाम एमवीसी
चिंताओं को अलग करना (एसओसी) एक ऐसा पैटर्न है जो एसईओ, पहुंच और ब्राउज़र की असंगति सहित कई कारणों से वेब विकास के कई वर्षों में विकसित हुआ है। यह इस तरह दिख रहा है:
- HTML - अर्थिक अर्थ। HTML को अकेले खड़ा होना चाहिए।
- CSS - स्टाइलिंग, CSS के बिना पेज अभी भी पठनीय है।
- जावास्क्रिप्ट - व्यवहार, स्क्रिप्ट के बिना सामग्री बनी हुई है।
फिर से, AngularJS अपने नियमों से नहीं खेलता है। एक स्ट्रोक में, AngularJS प्राप्त ज्ञान के एक दशक के साथ दूर करता है और इसके बजाय एक MVC पैटर्न को लागू करता है जिसमें टेम्पलेट अब अर्थ नहीं है, थोड़ा सा भी नहीं।
यह इस तरह दिख रहा है:
- मॉडल - आपके मॉडल में आपका शब्दार्थ डेटा होता है। मॉडल आमतौर पर JSON ऑब्जेक्ट्स होते हैं। मॉडल में $ स्कोप नामक वस्तु की विशेषताएं मौजूद होती हैं। आप उपयोगी उपयोगिता फ़ंक्शंस को $ स्कोप पर भी स्टोर कर सकते हैं जिसे आपके टेम्प्लेट एक्सेस कर सकते हैं।
- दृश्य - आपके विचार HTML में लिखे गए हैं। दृश्य आमतौर पर शब्दार्थ नहीं है क्योंकि आपका डेटा मॉडल में रहता है।
- नियंत्रक - आपका नियंत्रक एक जावास्क्रिप्ट फ़ंक्शन है जो मॉडल को देखने के लिए हुक करता है। इसका कार्य $ क्षेत्र को आरंभ करना है। आपके आवेदन के आधार पर, आपको एक नियंत्रक बनाने की आवश्यकता हो सकती है या नहीं भी हो सकती है। आपके पास एक पृष्ठ पर कई नियंत्रक हो सकते हैं।
एमवीसी और एसओसी एक ही पैमाने के विपरीत छोर पर नहीं हैं, वे पूरी तरह से अलग-अलग कुल्हाड़ियों पर हैं। SOC को AngularJS के संदर्भ में कोई मतलब नहीं है। आपको इसे भूलना होगा और आगे बढ़ना होगा।
यदि, मेरी तरह, आप ब्राउज़र युद्धों के माध्यम से रहते थे, तो आपको यह विचार काफी आक्रामक लग सकता है। इसे खत्म करो, यह इसके लायक होगा, मैं वादा करता हूं।
प्लगइन्स बनाम निर्देश
प्लगइन्स jQuery का विस्तार करते हैं। AngularJS Directives आपके ब्राउज़र की क्षमताओं का विस्तार करता है।
JQuery में हम jQuery.prototyp में फ़ंक्शन जोड़कर प्लगइन्स को परिभाषित करते हैं। हम तब तत्वों का चयन करके और परिणाम पर प्लगइन को कॉल करके डोम में हुक करते हैं। विचार jQuery की क्षमताओं का विस्तार करना है।
उदाहरण के लिए, यदि आप अपने पृष्ठ पर एक हिंडोला चाहते हैं, तो आप आंकड़ों की एक अनियंत्रित सूची को परिभाषित कर सकते हैं, शायद एक नौसेना तत्व में लिपटे हुए हैं। फिर आप पृष्ठ पर सूची का चयन करने के लिए कुछ jQuery लिख सकते हैं और इसे स्लाइडिंग एनीमेशन करने के लिए टाइमआउट वाली गैलरी के रूप में पुनर्स्थापित कर सकते हैं।
AngularJS में, हम निर्देशों को परिभाषित करते हैं। एक निर्देश एक फ़ंक्शन है जो JSON ऑब्जेक्ट देता है। यह ऑब्जेक्ट AngularJS को बताता है कि DOM तत्वों को क्या देखना है, और उनके लिए क्या परिवर्तन करना है। निर्देशों को टेम्प्लेट या तत्वों का उपयोग करके टेम्पलेट पर हुक किया जाता है, जिसे आप आविष्कार करते हैं। विचार नई विशेषताओं और तत्वों के साथ HTML की क्षमताओं का विस्तार करना है।
AngularJS तरीका देशी दिखने वाले HTML की क्षमताओं का विस्तार करना है। आपको HTML लिखना चाहिए जो HTML की तरह दिखता है, जो कस्टम विशेषताओं और तत्वों के साथ विस्तारित है।
यदि आप एक हिंडोला चाहते हैं <carousel />, तो बस एक तत्व का उपयोग करें , फिर एक टेम्पलेट में खींचने के लिए एक निर्देश निर्धारित करें, और उस चूसने वाला काम करें।
विन्यास स्विच के साथ छोटे निर्देशों बनाम बड़े प्लगइन्स
JQuery की प्रवृत्ति लाइटबॉक्स जैसे महान बड़े प्लगइन्स को लिखना है जिसे हम कई मूल्यों और विकल्पों में पास करके कॉन्फ़िगर करते हैं।
यह AngularJS में एक गलती है।
एक ड्रॉपडाउन का उदाहरण लें। ड्रॉपडाउन प्लगिन लिखते समय आपको क्लिक हैंडलर में कोड करने का प्रलोभन दिया जा सकता है, संभवत: शेव्रोन में जोड़ने के लिए एक फंक्शन जो या तो ऊपर या नीचे होता है, शायद अनफोल्डेड एलिमेंट की क्लास को बदलते हैं, मेन्यू को छिपाते हैं, सभी मददगार चीजें दिखाते हैं।
जब तक आप एक छोटा सा बदलाव करना चाहते हैं।
मान लें कि आपके पास एक मेनू है जिसे आप होवर पर प्रकट करना चाहते हैं। खैर अब हमें एक समस्या है। हमारे प्लगइन ने हमारे लिए हमारे क्लिक हैंडलर में वायर्ड किया है, हमें इस विशिष्ट मामले में अलग तरह से व्यवहार करने के लिए कॉन्फ़िगरेशन विकल्प जोड़ने की आवश्यकता है।
AngularJS में हम छोटे निर्देश लिखते हैं। हमारा ड्रॉपडाउन निर्देश हास्यास्पद रूप से छोटा होगा। यह तह स्थिति को बनाए रख सकता है, और तह (), अनफोल्ड () या टॉगल () को तरीके प्रदान करता है। ये विधियाँ बस $ गुंजाइश को अपडेट करेंगी। menu.v अदृश्य जो एक बूलियन राज्य है।
अब हमारे टेम्प्लेट में हम इसे वायर कर सकते हैं:
<a ng-click="toggle()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
माउसओवर पर अपडेट करने की आवश्यकता है?
<a ng-mouseenter="unfold()" ng-mouseleave="fold()">Menu</a>
<ul ng-show="menu.visible">
...
</ul>
टेम्पलेट एप्लिकेशन को चलाती है जिससे हमें HTML स्तर की ग्रैन्युलैरिटी मिलती है। यदि हम केस अपवादों द्वारा केस बनाना चाहते हैं, तो टेम्प्लेट यह आसान बनाता है।
बंद बनाम $ गुंजाइश
JQuery प्लगइन्स एक क्लोजर में बनाए जाते हैं। गोपनीयता उस बंद के भीतर बनी हुई है। यह आपके ऊपर है कि उस दायरे के भीतर अपनी गुंजाइश श्रृंखला बनाए रखें। आपके पास केवल jQuery द्वारा प्लगइन में पारित डोम नोड्स के सेट तक पहुंच है, साथ ही किसी भी स्थानीय चर को बंद करने और आपके द्वारा परिभाषित किसी भी ग्लोबल्स में परिभाषित किया गया है। इसका मतलब है कि प्लगइन्स काफी आत्म निहित हैं। यह एक अच्छी बात है, लेकिन संपूर्ण एप्लिकेशन बनाते समय प्रतिबंधात्मक हो सकता है। डायनेमिक पेज के सेक्शन के बीच डेटा पास करने की कोशिश करना एक काम बन जाता है।
AngularJS में $ स्कोप ऑब्जेक्ट्स हैं। ये एंगुलरजेएस द्वारा बनाए गए और बनाए गए विशेष ऑब्जेक्ट हैं जिसमें आप अपने मॉडल को स्टोर करते हैं। कुछ निर्देश एक नया $ स्कोप बिताएंगे, जो डिफ़ॉल्ट रूप से जावास्क्रिप्ट प्रोटॉपिकल इनहेरिटेंस का उपयोग करके अपने रैपिंग $ स्कोप से विरासत में मिला है। $ गुंजाइश ऑब्जेक्ट नियंत्रक और दृश्य में सुलभ है।
यह चतुर हिस्सा है। क्योंकि $ स्कोप इनहेरिटेंस की संरचना लगभग डोम की संरचना का अनुसरण करती है, तत्वों की अपने दायरे तक पहुंच होती है, और किसी भी स्कोप को मूल रूप से, वैश्विक $ स्कोप तक (जो वैश्विक स्कोप के समान नहीं है)।
इससे डेटा को पास करना, और उचित स्तर पर डेटा स्टोर करना बहुत आसान हो जाता है। अगर एक ड्रॉपडाउन सामने आता है, तो केवल ड्रॉपडाउन $ स्कोप को इसके बारे में जानने की जरूरत है। यदि उपयोगकर्ता अपनी प्राथमिकताओं को अपडेट करता है, तो आप वैश्विक $ स्कोप को अपडेट करना चाह सकते हैं, और उपयोगकर्ता की वरीयताओं को सुनने वाला कोई भी नेस्टेड स्कोप स्वचालित रूप से अलर्ट हो जाएगा।
यह जटिल लग सकता है, वास्तव में, एक बार जब आप इसमें आराम करेंगे, तो यह उड़ने जैसा है। आपको $ स्कोप ऑब्जेक्ट बनाने की आवश्यकता नहीं है, AngularJS तत्काल और आपके टेम्पलेट पदानुक्रम के आधार पर सही और उचित रूप से आपके लिए इसे कॉन्फ़िगर करता है। AngularJS तब निर्भरता इंजेक्शन (इस पर बाद में) के जादू का उपयोग करके अपने घटक को उपलब्ध कराता है।
मैन्युअल DOM डेटा बाइंडिंग बनाम बदलता है
JQuery में आप अपने सभी DOM परिवर्तन हाथ से करते हैं। आप प्रोग्रामिक रूप से नए DOM तत्वों का निर्माण करते हैं। यदि आपके पास JSON सरणी है और आप इसे DOM पर रखना चाहते हैं, तो आपको HTML बनाने और उसे सम्मिलित करने के लिए एक फ़ंक्शन लिखना होगा।
AngularJS में आप ऐसा कर सकते हैं, लेकिन आपको डेटा बाइंडिंग का उपयोग करने के लिए प्रोत्साहित किया जाता है। अपना मॉडल बदलें, और क्योंकि DOM इसके लिए बाध्य है एक टेम्पलेट के माध्यम से आपका DOM अपने आप अपडेट हो जाएगा, कोई हस्तक्षेप की आवश्यकता नहीं है।
क्योंकि डेटा बाध्यकारी टेम्प्लेट से किया जाता है, या तो एक विशेषता या घुंघराले ब्रेस सिंटैक्स का उपयोग करके, यह करना आसान है। वहाँ थोड़ा संज्ञानात्मक उपरि इसके साथ जुड़ा हुआ है ताकि आप अपने आप को हर समय ऐसा करते हुए पाएंगे।
<input ng-model="user.name" />
के लिए इनपुट तत्व को बांधता है $scope.user.name। इनपुट अपडेट करने से आपके वर्तमान दायरे में मूल्य अपडेट होगा, और इसके विपरीत।
इसी तरह:
<p>
{{user.name}}
</p>
पैराग्राफ में उपयोगकर्ता नाम का उत्पादन करेगा। यह एक लाइव बाइंडिंग है, इसलिए यदि $scope.user.nameमान अपडेट किया गया है, तो टेम्पलेट भी अपडेट होगा।
हर समय अजाक्स
JQuery में अजाक्स कॉल करना काफी सरल है, लेकिन यह अभी भी कुछ ऐसा है जिसके बारे में आप दो बार सोच सकते हैं। वहाँ जोड़ा जटिलता के बारे में सोचने के लिए है, और स्क्रिप्ट का एक अच्छा हिस्सा बनाए रखने के लिए।
एंगुलरजेएस में, अजाक्स आपका डिफ़ॉल्ट गो-टू समाधान है और यह हर समय होता है, लगभग आपके बिना। आप एनजी-शामिल के साथ टेम्पलेट शामिल कर सकते हैं। आप सबसे सरल कस्टम निर्देश के साथ एक टेम्पलेट लागू कर सकते हैं। आप एक सेवा में एक अजाक्स कॉल को लपेट सकते हैं और अपने आप को एक GitHub सेवा, या एक फ़्लिकर सेवा बना सकते हैं, जिसे आप आश्चर्यजनक आसानी से एक्सेस कर सकते हैं।
सेवा ऑब्जेक्ट बनाम हेल्पर फ़ंक्शंस
JQuery में, यदि हम एक छोटे गैर-डोम संबंधित कार्य को पूरा करना चाहते हैं, जैसे कि एपीआई से फीड खींचना, तो हम अपने क्लोजर में ऐसा करने के लिए एक छोटा सा कार्य लिख सकते हैं। यह एक वैध समाधान है, लेकिन क्या होगा यदि हम उस फ़ीड को अक्सर एक्सेस करना चाहते हैं? क्या होगा यदि हम उस कोड का किसी अन्य अनुप्रयोग में पुन: उपयोग करना चाहते हैं?
AngularJS हमें सर्विस ऑब्जेक्ट देता है।
सेवाएँ सरल वस्तुएँ हैं जिनमें फ़ंक्शंस और डेटा होते हैं। वे हमेशा सिंगल होते हैं, मतलब उनमें से एक से अधिक कभी नहीं हो सकता है। कहते हैं कि हम स्टैक ओवरफ्लो एपीआई का उपयोग करना चाहते हैं, हम StackOverflowServiceऐसा करने के लिए एक परिभाषित विधि लिख सकते हैं।
मान लीजिए कि हमारे पास शॉपिंग कार्ट है। हम एक ShoppingCartService को परिभाषित कर सकते हैं जो हमारी कार्ट को बनाए रखता है और इसमें आइटम जोड़ने और हटाने के तरीके शामिल हैं। क्योंकि सेवा एक सिंगलटन है, और अन्य सभी घटकों द्वारा साझा किया जाता है, किसी भी ऑब्जेक्ट को शॉपिंग कार्ट में लिखने और उससे डेटा खींचने की आवश्यकता होती है। यह हमेशा एक ही गाड़ी है।
सेवा ऑब्जेक्ट स्व-निहित AngularJS घटक हैं जिनका हम उपयोग कर सकते हैं और पुनः उपयोग कर सकते हैं जैसा कि हम फिट देखते हैं। वे सरल JSON ऑब्जेक्ट्स हैं जिनमें फ़ंक्शन और डेटा हैं। वे हमेशा एकल होते हैं, इसलिए यदि आप किसी सेवा में डेटा को एक स्थान पर संग्रहीत करते हैं, तो आप केवल उसी सेवा का अनुरोध करके उस डेटा को कहीं और प्राप्त कर सकते हैं।
निर्भरता इंजेक्शन (डीआई) बनाम अस्थिरता - उर्फ डे-स्पेगेटिफिकेशन
AngularJS आपके लिए आपकी निर्भरता का प्रबंधन करता है। यदि आप एक वस्तु चाहते हैं, तो बस इसे देखें और AngularJS इसे आपके लिए प्राप्त कर लेगा।
जब तक आप इसका उपयोग करना शुरू नहीं करते, तब तक यह समझाना मुश्किल है कि यह कितना बड़ा समय है। AngularJS DI जैसा कुछ भी jQuery के अंदर मौजूद नहीं है।
DI का मतलब है कि अपने आवेदन को लिखने और उसे एक साथ वायर करने के बजाय, आप घटकों के एक पुस्तकालय को परिभाषित करते हैं, प्रत्येक को एक स्ट्रिंग द्वारा पहचाना जाता है।
मान लें कि मेरे पास 'फ़्लिकरस् सेवा' नामक एक घटक है जो फ़्लिकर से JSON फ़ीड्स को खींचने के तरीकों को परिभाषित करता है। अब, अगर मैं एक नियंत्रक लिखना चाहता हूं जो फ़्लिकर को एक्सेस कर सकता है, तो मुझे केवल नियंत्रक की घोषणा करते समय नाम से 'फ़्लिकरस्वाइस' का उल्लेख करना होगा। AngularJS घटक को तत्काल करने और इसे मेरे नियंत्रक को उपलब्ध कराने का ध्यान रखेगा।
उदाहरण के लिए, यहां मैं एक सेवा को परिभाषित करता हूं:
myApp.service('FlickrService', function() {
return {
getFeed: function() { // do something here }
}
});
अब जब मैं उस सेवा का उपयोग करना चाहता हूं तो मैं इसे इस तरह से नाम से संदर्भित करता हूं:
myApp.controller('myController', ['FlickrService', function(FlickrService) {
FlickrService.getFeed()
}]);
AngularJS यह पहचानेगा कि कंट्रोलर को इंस्टेंट करने के लिए एक FlickrService ऑब्जेक्ट की आवश्यकता है, और हमारे लिए एक प्रदान करेगा।
यह तारों को एक साथ बहुत आसान बनाता है, और बहुत ज्यादा स्पगेटिफिकेशन की ओर किसी भी प्रवृत्ति को समाप्त करता है। हमारे पास घटकों की एक फ्लैट सूची है, और AngularJS उन्हें एक-एक करके हमारे पास सौंपता है, जब हमें उनकी आवश्यकता होती है।
मॉड्यूलर सेवा वास्तुकला
jQuery बहुत कम कहता है कि आपको अपने कोड को कैसे व्यवस्थित करना चाहिए। AngularJS की राय है।
AngularJS आपको मॉड्यूल देता है जिसमें आप अपना कोड डाल सकते हैं। यदि आप एक स्क्रिप्ट लिख रहे हैं जो उदाहरण के लिए फ़्लिकर से बात करती है, तो आप फ़्लिकर मॉड्यूल को अपने सभी फ़्लिकर से संबंधित कार्यों को लपेटने के लिए बनाना चाह सकते हैं। मॉड्यूल में अन्य मॉड्यूल (DI) शामिल हो सकते हैं। आपका मुख्य अनुप्रयोग आमतौर पर एक मॉड्यूल है, और इसमें आपके आवेदन पर निर्भर सभी अन्य मॉड्यूल शामिल होने चाहिए।
आपको सरल कोड का पुन: उपयोग मिलता है, यदि आप फ़्लिकर पर आधारित एक और एप्लिकेशन लिखना चाहते हैं, तो आप फ़्लिकर मॉड्यूल और वॉइला को शामिल कर सकते हैं, आपके नए एप्लिकेशन में आपके सभी फ़्लिकर से संबंधित फ़ंक्शन हैं।
मॉड्यूल में AngularJS घटक होते हैं। जब हम एक मॉड्यूल को शामिल करते हैं, तो उस मॉड्यूल के सभी घटक हमारे लिए उपलब्ध होते हैं एक साधारण सूची के रूप में जो उनके अद्वितीय तार द्वारा पहचाना जाता है । फिर हम उन घटकों को एक दूसरे में इंजेक्ट कर सकते हैं जो AngularJS की निर्भरता इंजेक्शन तंत्र का उपयोग कर रहे हैं।
सारांश में
AngularJS और jQuery दुश्मन नहीं हैं। यह बहुत अच्छी तरह से AngularJS भीतर jQuery का उपयोग करने के लिए संभव है। यदि आप अच्छी तरह से AngularJS (टेम्प्लेट, डेटा-बाइंडिंग, $ स्कोप, निर्देश आदि) का उपयोग कर रहे हैं, तो आप पाएंगे कि आपको बहुत कम jQuery की आवश्यकता है, अन्यथा आपको आवश्यकता हो सकती है।
महसूस करने के लिए मुख्य बात यह है कि आपका टेम्पलेट आपके आवेदन को चलाता है। सब कुछ करने वाले बड़े प्लगइन्स लिखने की कोशिश करना बंद करें। इसके बजाय छोटे निर्देश लिखें जो एक काम करते हैं, फिर उन्हें एक साथ तार करने के लिए एक सरल टेम्पलेट लिखें।
विनीत जावास्क्रिप्ट के बारे में कम सोचें, और इसके बजाय HTML एक्सटेंशन के बारे में सोचें।
मेरी छोटी सी किताब
मैं AngularJS के बारे में बहुत उत्साहित हो गया, मैंने इस पर एक छोटी पुस्तक लिखी जिसका आप ऑनलाइन http://nicholasjohnson.com/angular-book/ पर पढ़ने के लिए बहुत स्वागत करते हैं । मुझे आशा है कि यह उपयोगी है।