$ पार्स, $ इंटरपोलेट और $ संकलन सेवाओं के बीच क्या अंतर है?

Question

बीच क्या अंतर है $parse, $interpolateऔर $compileसेवाओं? मेरे लिए वे सभी एक ही काम करते हैं: टेम्पलेट लें और इसे टेम्पलेट-फंक्शन में संकलित करें।

Answer 1

उन सेवाओं के सभी उदाहरण है कि AngularJS में सहायता (हालांकि प्रतिपादन देख रहे हैं $parseऔर $interpolateइस डोमेन के बाहर किया जा सकता है)। यह बताने के लिए कि प्रत्येक सेवा की भूमिका क्या है आइए HTML के इस टुकड़े का उदाहरण लें:

var imgHtml = '<img ng-src="/path/{{name}}.{{extension}}">'

और गुंजाइश पर मान:

$scope.name = 'image';
$scope.extension = 'jpg';

इस मार्कअप को देखते हुए प्रत्येक सेवा तालिका में लाती है:

• $compile- यह पूरे मार्कअप को ले सकता है और इसे एक लिंकिंग फ़ंक्शन में बदल सकता है, जब एक निश्चित दायरे के खिलाफ निष्पादित होने पर HTML पाठ का एक टुकड़ा गतिशील में बदल जाएगा, डोम को सभी निर्देशों के साथ (यहां ng-src:) मॉडल परिवर्तनों पर प्रतिक्रिया दें। एक इसे निम्नानुसार लागू करेगा: $ संकलन (imgHtml) ($ गुंजाइश) और इसके परिणामस्वरूप सभी DOM इवेंट सीमा के साथ एक DOM तत्व मिलेगा। $compileका इस्तेमाल कर रही है $interpolate(अन्य बातों के अलावा) अपना काम करने में।
• $interpolateजानता है कि एम्बेडेड प्रक्षेप अभिव्यक्ति के साथ एक स्ट्रिंग को कैसे संसाधित किया जाए, पूर्व /path/{{name}}.{{extension}}। दूसरे शब्दों में, यह प्रक्षेप अभिव्यक्ति, एक दायरे के साथ एक स्ट्रिंग ले सकता है और इसे परिणामी पाठ में बदल सकता है। $interpolationसेवा को एक बहुत ही सरल, स्ट्रिंग-आधारित टेम्पलेट भाषा के रूप में सोच सकते हैं। उपरोक्त उदाहरण को देखते हुए इस सेवा का उपयोग करेंगे जैसे: स्ट्रिंग को परिणामस्वरूप $interpolate("/path/{{name}}.{{extension}}")($scope)प्राप्त करने के लिए path/image.jpg।
• $parseएक दायरे के खिलाफ $interpolateव्यक्तिगत भाव ( name, extension) का मूल्यांकन करने के लिए उपयोग किया जाता है । इसका उपयोग किसी दिए गए एक्सप्रेशन के लिए मानों को पढ़ने और सेट करने दोनों के लिए किया जा सकता है । उदाहरण के लिए, nameएक अभिव्यक्ति का मूल्यांकन करने के लिए: $parse('name')($scope)"छवि" मान प्राप्त करना होगा । एक मूल्य निर्धारित करने के लिए:$parse('name').assign($scope, 'image2')

वे सभी सेवाएँ AngularJS में लाइव UI प्रदान करने के लिए मिलकर काम कर रही हैं। लेकिन वे विभिन्न स्तरों पर काम करते हैं:

• $parseकेवल व्यक्तिगत अभिव्यक्तियों से संबंधित है ( name, extension)। यह पढ़ने-लिखने की सेवा है।
• $interpolateकेवल पढ़ा जाता है और कई भावों वाले तार से संबंधित है ( /path/{{name}}.{{extension}})
• $compile AngularJS मशीनरी के केंद्र में है और HTML स्ट्रिंग्स (निर्देशों और प्रक्षेप अभिव्यक्ति के साथ) को लाइव DOM में बदल सकता है।

Comments

अच्छी तरह से समझाया। वोट दिया! :)

— आल्टरनेटर

अच्छा लगा। क्या आप कृपया उनमें से प्रत्येक के लिए उदाहरण उपयोग और परिणाम प्रदान कर सकते हैं? यह अभी भी मेरे लिए 100% स्पष्ट नहीं है और मुझे लगता है कि इससे बहुत मदद मिलेगी। धन्यवाद!

— अलेजांद्रो गार्सिया इग्लेसियस

बहुत बढ़िया। यहां आप वास्तविक जीवन के उपयोग के कुछ और उदाहरण पा सकते हैं (और यह एंगुलर को तेज करने के बारे में एक अच्छा सरल लेख है): गति-अप-कोणीय-जेएस-के साथ-सरल-अनुकूलन "उदाहरण के लिए, वैश्विक नेविगेशन प्रदान करने के बजाय एनजी-रिपीट का उपयोग करते हुए, हम किसी वस्तु के खिलाफ अपने टेम्पलेट को प्रस्तुत करने और इसे डोम नोड्स में बदलने के लिए $ इंटरपोलेट प्रदाता का उपयोग करके अपना स्वयं का नेविगेशन बना सकते हैं। "

— नादव लेबोविच

महान व्याख्या। मैं हर जगह खोज रहा हूं कि $interpolateअंजुलारज में वास्तव में क्या है और आखिरकार मुझे एक कॉम्पैक्ट और जानकारीपूर्ण उत्तर मिला।

— दामिथ

सभी तीन सेवा वस्तुओं को समझाने के लिए उदाहरण का इतनी प्रभावी रूप से उपयोग किया गया है। हमें इस तरह के स्पष्ट और बुनियादी स्पष्टीकरणों की अधिक आवश्यकता है जो कि कोणीय js के विभिन्न क्षेत्रों में शुरुआती लोगों के लिए अधिक स्वीकार्य हैं।

— किंग्स

Answer 2

$interpolate-->

Let us say you have two variables assigned to $scope object in the controller,

$scope.a = 2;
$scope.b = 3;

var f = $interpolate("Result is : {{a*b}}");
var result = f($scope);
console.log(result);   --->'Result is 6'

This means that $interpolate can take the string which has one or more angular expressions.

Now $parse:

var f1 = $parse("a*b");
var result1 = f1($scope);
console.log(result1);   ----> '6'

**So $interpolate has the capability to evaluate a string with angular expressions mixed up in the string against the scope to get the result**.


Another important difference between $interpolate and $parse,$eval is:

**$interpolate has the capability to work with strings containing filters along with angular expressions.**

This feature is not accessible in $eval , $parse.

console.log($interpolate("Result is : {{a*b | currency : 'USD$'}}")($scope));

---> 'Result is USD $6.00'

$ इंटरपोल के पास $ स्कोप वेरिएबल तक लिखने की पहुंच नहीं है क्योंकि हमारे पास $ eval और $ parse है

$ पार्स, $ इंटरपोलेट ---> को इंजेक्ट करने की आवश्यकता होती है, लेकिन नियंत्रक में या जहां इसका उपयोग किया जाता है, वहां $ eval की जरूरत नहीं है

$ पार्स, $ इंटरपोलेट उस फ़ंक्शन को देते हैं जिसका मूल्यांकन किसी भी संदर्भ के खिलाफ किया जा सकता है लेकिन $ eval का मूल्यांकन हमेशा $ गुंजाइश के खिलाफ किया जाता है।

$ eval और $ interpolate परदे के पीछे $ parse का उपयोग करता है।

Answer 3

यहाँ प्यारा विवरण है।

var img = img/{{name}}.{{extension}}

$parse - > (name,extension) = > vimal , .jpg
$interpolate -> use angular $parse and convert into string -> img/vimal.jpg
$compile -> can turn html string img/vimal.jpg into live DOM so new img tag will be added inside our DOM with all prototype that a img tag have.