अनिवार्य तथ्य
आप अपना वेबपेज बनाते हुए जाते हैं, और जब भी आपको लगता है कि आपके पास गतिशील डेटा होगा {{डेटा बाइंडिंग}} डालते रहेंगे। कोणीय तब आपको एक $ गुंजाइश हैंडलर प्रदान करेगा, जिसे आप पॉप्युलेट कर सकते हैं (वेब सर्वर पर कॉल के माध्यम से)।
यह डेटा-बाइंडिंग की एक अच्छी समझ है। मुझे लगता है कि आपको वह मिल गया है।
डोम हेरफेर
साधारण डोम हेरफेर के लिए, जिसमें डेटा हेरफेर शामिल नहीं है (उदाहरण के लिए: माउसओवर पर रंग परिवर्तन, क्लिक पर तत्व छिपाना / दिखाना), jQuery या पुराने-स्कूल js पर्याप्त और क्लीनर हैं। यह मानता है कि कोणीय mvc में मॉडल कुछ भी है जो पृष्ठ पर डेटा को दर्शाता है, और इसलिए, रंग, प्रदर्शन / छिपाने, आदि जैसे सीएसएस गुण मॉडल को प्रभावित नहीं करते हैं।
मैं आपकी बात को "सरल" डोम हेरफेर के बारे में साफ-सुथरा देख सकता हूं, लेकिन केवल शायद ही कभी और इसे वास्तव में "सरल" होना चाहिए। मुझे लगता है कि डेटा-बाइंडिंग की तरह, डोम हेरफेर एक ऐसा क्षेत्र है, जहां कोणीय वास्तव में चमकता है। इसे समझने से आपको यह देखने में भी मदद मिलेगी कि कोणीय अपने विचारों को कैसे मानता है।
मैं एक हेरफेर के साथ एंगुलर तरीके की तुलना डोम हेरफेर के साथ शुरू करूँगा। परंपरागत रूप से, हम HTML को "कुछ भी नहीं" करने के बारे में सोचते हैं और इसे इस तरह लिखते हैं। तो, इनलाइन js, जैसे "onclick", आदि खराब प्रथा है क्योंकि वे HTML के संदर्भ में "कर" डालते हैं, जो "नहीं" करता है। कोणीय उस अवधारणा को अपने सिर पर झटकता है। जैसा कि आप अपना दृष्टिकोण लिख रहे हैं, आप HTML को बहुत सी चीजों को "करने" में सक्षम मानते हैं। यह क्षमता कोणीय निर्देशों में दूर होती है, लेकिन अगर वे पहले से मौजूद हैं या आपने उन्हें लिखा है, तो आपको "कैसे" पर विचार करने की ज़रूरत नहीं है, आप बस इस "संवर्धित" HTML में आपके लिए उपलब्ध शक्ति का उपयोग करते हैं जो कि कोणीय आपको उपयोग करने की अनुमति देता है। इसका अर्थ यह भी है कि आपके सभी दृश्य तर्क वास्तव में दृश्य में निहित हैं, आपकी जावास्क्रिप्ट फ़ाइलों में नहीं। फिर, तर्क यह है कि आपकी जावास्क्रिप्ट फ़ाइलों में लिखे गए निर्देशों को HTML की क्षमता बढ़ाने के लिए माना जा सकता है, इसलिए आप DOM को स्वयं को हेरफेर करने की चिंता करते हैं (इसलिए बोलने के लिए)। मैं एक साधारण उदाहरण के साथ प्रदर्शित करता हूँ।
यह वह मार्कअप है जिसका हम उपयोग करना चाहते हैं। मैंने इसे सहज नाम दिया।
<div rotate-on-click="45"></div>
सबसे पहले, मैं यह टिप्पणी करना चाहूंगा कि यदि हमने अपने HTML को एक कस्टम कोणीय निर्देश के माध्यम से यह कार्यक्षमता दी है, तो हम पहले से ही काम कर रहे हैं । वह ताजी हवा की सांस है। उस पर और भी जानकारी कुछ क्षणों में।
JQuery के साथ कार्यान्वयन
लाइव डेमो यहां (क्लिक करें)।
function rotate(deg, elem) {
$(elem).css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
}
function addRotateOnClick($elems) {
$elems.each(function(i, elem) {
var deg = 0;
$(elem).click(function() {
deg+= parseInt($(this).attr('rotate-on-click'), 10);
rotate(deg, this);
});
});
}
addRotateOnClick($('[rotate-on-click]'));
कोणीय के साथ कार्यान्वयन
लाइव डेमो यहां (क्लिक करें)।
app.directive('rotateOnClick', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var deg = 0;
element.bind('click', function() {
deg+= parseInt(attrs.rotateOnClick, 10);
element.css({
webkitTransform: 'rotate('+deg+'deg)',
mozTransform: 'rotate('+deg+'deg)',
msTransform: 'rotate('+deg+'deg)',
oTransform: 'rotate('+deg+'deg)',
transform: 'rotate('+deg+'deg)'
});
});
}
};
});
बहुत हल्का है, बहुत साफ है और यह सिर्फ एक सरल हेरफेर है! मेरी राय में, कोणीय दृष्टिकोण सभी मामलों में जीतता है, खासकर कार्यक्षमता कैसे दूर होती है और डोम में डोम हेरफेर घोषित किया जाता है। कार्यक्षमता HTML तत्व के माध्यम से तत्व पर आदी है, इसलिए चयनकर्ता के माध्यम से DOM को क्वेरी करने की कोई आवश्यकता नहीं है, और हमें दो अच्छे क्लोजर मिले हैं - निर्देशक कारखाने के लिए एक क्लोजर जहां चर को निर्देश के सभी उपयोगों में साझा किया जाता है , और linkफ़ंक्शन (या compileफ़ंक्शन) में निर्देश के प्रत्येक उपयोग के लिए एक बंद ।
डोम हेरफेर के लिए दो-तरफ़ा डेटा बाइंडिंग और निर्देश केवल वही हैं जो एंगुलर को भयानक बनाता है। कोणीय सभी कोड को मॉड्यूलर, पुन: प्रयोज्य और आसानी से परीक्षण योग्य होने के लिए बढ़ावा देता है और इसमें एकल-पृष्ठ ऐप रूटिंग प्रणाली भी शामिल है। यह ध्यान रखना महत्वपूर्ण है कि jQuery आमतौर पर आवश्यक सुविधा / क्रॉस-ब्राउज़र विधियों का एक पुस्तकालय है, लेकिन एंगुलर एकल पृष्ठ एप्लिकेशन बनाने के लिए एक पूर्ण रुपरेखा है । कोणीय स्क्रिप्ट में वास्तव में jQuery का अपना स्वयं का "लाइट" संस्करण शामिल है ताकि कुछ सबसे आवश्यक तरीके उपलब्ध हों। इसलिए, आप तर्क दे सकते हैं कि Angular IS का उपयोग jQuery (हल्के ढंग से) का उपयोग करके किया जाता है, लेकिन ऐप बनाने की प्रक्रिया में आपकी सहायता करने के लिए Angular बहुत अधिक "जादू" प्रदान करता है।
यह अधिक संबंधित जानकारी के लिए एक महान पोस्ट है: अगर मुझे jQuery पृष्ठभूमि है तो मैं "AngularJS में कैसे सोचूं"?
सामान्य अंतर।
उपरोक्त बिंदु ओपी की विशिष्ट चिंताओं के उद्देश्य से हैं। मैं अन्य महत्वपूर्ण अंतरों का अवलोकन भी करूँगा। मैं प्रत्येक विषय के बारे में भी अतिरिक्त पढ़ने का सुझाव देता हूं।
कोणीय और jQuery का यथोचित तुलना नहीं की जा सकती।
कोणीय एक ढांचा है, jQuery एक पुस्तकालय है। फ्रेमवर्क का अपना स्थान है और पुस्तकालयों का अपना स्थान है। हालांकि, इसमें कोई सवाल नहीं है कि एक अच्छे ढांचे में पुस्तकालय की तुलना में आवेदन लिखने की अधिक शक्ति होती है। यह बिल्कुल एक फ्रेमवर्क का बिंदु है। सादे जेएस में अपने कोड को लिखने के लिए आपका स्वागत है, या आप सामान्य कार्यों के पुस्तकालय में जोड़ सकते हैं, या आप उन चीजों को पूरा करने के लिए एक फ्रेमवर्क जोड़ सकते हैं जिनसे आपको कोड को कम करना होगा। इसलिए, एक अधिक उपयुक्त प्रश्न यह है:
एक रूपरेखा का उपयोग क्यों करें?
अच्छे ढांचे आपके कोड को आर्किटेक्ट बनाने में मदद कर सकते हैं ताकि यह मॉड्यूलर (इसलिए पुन: प्रयोज्य हो), DRY, पठनीय, निष्पादन योग्य और सुरक्षित हो। jQuery एक ढांचा नहीं है, इसलिए यह इन संबंध में मदद नहीं करता है। हम सभी ने jQuery स्पेगेटी कोड की विशिष्ट दीवारों को देखा है। यह jQuery की गलती नहीं है - यह डेवलपर्स का दोष है जो आर्किटेक्ट कोड को नहीं जानता है। हालांकि, अगर देवता जानते थे कि आर्किटेक्ट कोड कैसे है, तो वे नींव (अचूकता, आदि) प्रदान करने के लिए कुछ प्रकार के न्यूनतम "फ्रेमवर्क" लिखना समाप्त कर देंगे। मैंने कुछ समय पहले चर्चा की थी, या वे इसमें कुछ जोड़ेंगे। उदाहरण के लिए, आप। अच्छा कोड लिखने के लिए अपने ढांचे के हिस्से के रूप में कार्य करने के लिए आवश्यकताएँ जोड़ सकते हैं।
यहाँ कुछ चीजें हैं जो आधुनिक रूपरेखा प्रदान कर रही हैं:
- templating
- अनिवार्य तथ्य
- रूटिंग (एकल पृष्ठ ऐप)
- स्वच्छ, मॉड्यूलर, पुन: प्रयोज्य वास्तुकला
- सुरक्षा
- सुविधा के लिए अतिरिक्त कार्य / सुविधाएँ
इससे पहले कि मैं कोणीय की चर्चा करूं, मैं यह बताना चाहूंगा कि कोणीय अपनी तरह का एकमात्र नहीं है। उदाहरण के लिए, Durandal, jQuery, नॉकआउट और आवश्यकताएँ के शीर्ष पर निर्मित एक रूपरेखा है। फिर से, jQuery स्वयं द्वारा प्रदान नहीं कर सकता है, जो नॉकआउट, आवश्यकताएँ, और उनके ऊपर निर्मित संपूर्ण रूपरेखा प्रदान कर सकते हैं। यह सिर्फ तुलनीय नहीं है।
यदि आपको किसी ग्रह को नष्ट करने की आवश्यकता है और आपके पास डेथ स्टार है, तो डेथ स्टार का उपयोग करें।
कोणीय (परिकल्पित)।
फ्रेमवर्क प्रदान करने के बारे में अपने पिछले बिंदुओं पर निर्माण करना, मैं उस तरीके की सराहना करना चाहता हूं जो कि कोणीय उन्हें प्रदान करता है और यह स्पष्ट करने का प्रयास करता है कि यह अकेले jQuery के लिए तथ्यात्मक रूप से बेहतर क्यों है।
डोम संदर्भ।
मेरे उपरोक्त उदाहरण में, यह पूरी तरह से अपरिहार्य है कि कार्यक्षमता प्रदान करने के लिए jQuery को DOM पर हुक करना होगा। इसका मतलब है कि दृश्य (html) कार्यक्षमता के बारे में चिंतित है (क्योंकि यह किसी प्रकार के पहचानकर्ता के साथ लेबल किया गया है - जैसे "छवि स्लाइडर") और जावास्क्रिप्ट उस कार्यक्षमता को प्रदान करने के बारे में चिंतित है। कोणीय उस अवधारणा को अमूर्तता के माध्यम से समाप्त करता है। कोणीय के साथ उचित रूप से लिखे गए कोड का अर्थ है कि दृश्य अपने व्यवहार को घोषित करने में सक्षम है। अगर मैं एक घड़ी प्रदर्शित करना चाहता हूं:
<clock></clock>
किया हुआ।
हां, हमें कुछ मतलब निकालने के लिए जावास्क्रिप्ट पर जाने की आवश्यकता है, लेकिन हम इसे jQuery दृष्टिकोण के विपरीत तरीके से कर रहे हैं। हमारे कोणीय निर्देशन (जो स्वयं की छोटी दुनिया में है) में html और "html" की "कार्यक्षमता" होती है और कार्यक्षमता को अपने आप में हुक कर देता है।
एमवीडब्ल्यू आर्किटेक्योर / मॉड्यूल / डिपेंडेंसी इंजेक्शन
कोणीय आपको अपने कोड की संरचना के लिए एक सीधा रास्ता देता है। दृश्य में चीजें (html) हैं, संवर्धित दृश्य कार्यक्षमता निर्देशों में है, अन्य तर्क (जैसे अजाक्स कॉल) और कार्य सेवाओं में हैं, और देखने के लिए सेवाओं और तर्क का संबंध नियंत्रकों में है। कुछ अन्य कोणीय घटक भी हैं जो कॉन्फ़िगरेशन और सेवाओं के संशोधन से निपटने में मदद करते हैं, आदि। आपके द्वारा बनाई गई कोई भी कार्यक्षमता स्वचालित रूप से कहीं भी उपलब्ध होती है जो आपको आवश्यकता होती है इंजेक्टर सबसिस्टम के माध्यम से जो पूरे आवेदन में डिपेंडेंसी इंजेक्शन का ख्याल रखता है। एप्लिकेशन (मॉड्यूल) लिखते समय, मैं इसे अन्य पुन: प्रयोज्य मॉड्यूल में तोड़ता हूं, प्रत्येक अपने पुन: प्रयोज्य घटकों के साथ, और फिर उन्हें बड़ी परियोजना में शामिल करता है। एक बार जब आप कोणीय के साथ एक समस्या को हल करते हैं, तो आप ' ve ने स्वचालित रूप से इसे इस तरह से हल किया है जो भविष्य में पुन: उपयोग के लिए उपयोगी और संरचित है और अगली परियोजना में आसानी से शामिल है। एइस सब के लिए बहुत बड़ा बोनस यह है कि आपका कोड परीक्षण करना बहुत आसान होगा।
कोणीय में चीजों को "काम" करना आसान नहीं है।
अच्छा ही हुआ। Aforementioned jQuery स्पेगेटी कोड एक देव से उत्पन्न हुआ, जिसने कुछ "काम" किया और फिर आगे बढ़ गया। आप खराब कोणीय कोड लिख सकते हैं, लेकिन ऐसा करना अधिक कठिन है, क्योंकि कोणीय आपको इसके बारे में बताएगा। इसका मतलब है कि आपको अपने द्वारा प्रदान की गई स्वच्छ वास्तुकला का लाभ (कम से कम कुछ) लेना होगा। दूसरे शब्दों में, कोणीय के साथ बुरा कोड लिखना कठिन है, लेकिन स्वच्छ कोड लिखने के लिए अधिक सुविधाजनक है।
कोणीय परिपूर्ण से बहुत दूर है। वेब डेवलपमेंट की दुनिया हमेशा बढ़ती और बदलती रहती है और समस्याओं को हल करने के लिए नए और बेहतर तरीके सामने आते रहते हैं। उदाहरण के लिए, फेसबुक का रिएक्ट और फ्लक्स, कोणीय पर कुछ महान फायदे हैं, लेकिन अपनी कमियों के साथ आते हैं। कुछ भी सही नहीं है, लेकिन एंगुलर अब तक के लिए भयानक है। जिस तरह jQuery ने एक बार वेब दुनिया को आगे बढ़ने में मदद की थी, उसी तरह एंगुलर और भी कई आने वाले हैं।