AngularJs ऐप लिखते समय जेड या हैंडलबार्स का क्या उपयोग है

120

मैं संपूर्ण जावास्क्रिप्ट पूर्ण स्टैक अनुप्रयोगों में नया (ईश) हूं, और पूरी तरह से नया कोणीय हूं, इसलिए मुझे उम्मीद थी कि कोई व्यक्ति सीधे मेरे लिए यहां रिकॉर्ड रख सकता है।

मुझे AngularJS का उपयोग करते हुए क्लाइंट साइड ऐप लिखते समय जेड या हैंडलबार जैसे टेम्प्लेटिंग फ्रेमवर्क का उपयोग करने की आवश्यकता क्यों होगी।

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

जहाँ तक मैं बता सकता हूँ, यह उचित HTML का उपयोग करके कोणीय में टेम्प्लेट बनाने के लिए सबसे अधिक समझ में आता है और फिर सभी अस्थायी क्लाइंट पक्ष करते हैं, और उदाहरण के लिए नोड और मोंगो का उपयोग करते हुए एपीआई पहले दृष्टिकोण के साथ इसे जोड़ते हैं।

इस भ्रम का कारण यह है कि GitHub पर मुझे मिले बहुत सारे उदाहरण जेड का उपयोग करते हैं, और यह मेरे लिए काउंटर सहज लगता है।

कृपया मुझे बताएं, और मुझे सीधे सेट करें। मैं उन लोगों से कुछ सर्वोत्तम अभ्यासों को सीखना पसंद करूँगा जो मुझे करने से बहुत अधिक जानते हैं।

धन्यवाद

— जे पीट
स्रोत

61

जो लोग निस्संदेह जेड को एक कोणीय वातावरण में पसंद करते हैं, वे यह समझने में विफल रहते हैं कि व्यू लॉजिक क्लाइंट पर है, और सर्वर पर बिजनेस लॉजिक, जैसे ओपी ने टिप्पणी की है।

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

हाल ही में मैंने कुछ कोड की समीक्षा की जहां सीधे कोणीय टेम्प्लेटिंग ने सादगी बनाए रखने के माध्यम से जेड में मिश्रण करने की तुलना में कहीं बेहतर काम किया होगा।

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

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

हैंडलबार के लिए, AngularJS के (अद्भुत) क्लाइंट-साइड टेम्प्लेटिंग को बदलने की आवश्यकता नहीं है।

— इंजीनियर
स्रोत

4

हाय निक, यही जवाब मैं भी पहुंचा। मैंने इसे कुंद रूप में नहीं डाला, लेकिन मैं सहमत हूँ!

— जे पीट

60

@ नहीं, मैंने बहुत से ऐसे लोग नहीं देखे हैं जो XML / HTML लिखने / पढ़ने का आनंद लेते हैं। आप संभवतः सबसे दुर्लभ व्यक्ति हैं जो मैंने कभी देखा है जो वास्तव में इस बात की वकालत करता है कि जेड जैसे कुछ बहुत ही अधिक सूखे और क्लीनर के पक्ष में। वहाँ पुस्तकालयों के पूरे उद्देश्य हैं जिनमें से लोगों को XML / HTML लिखने / पढ़ने से रोकना है।

— एलेक्स के

12

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

— इंजीनियर

35

"किसी भी पेशेवर के लिए यह दावा करने के लिए हँसने योग्य", "मानसिक रूप से HTML को पार्स करना वास्तव में एक बहुत ही तुच्छ मामला है।" मुझे ये बहुत अपमानजनक टिप्पणी लगती है। क्या आप असेंबली लिखना चाहेंगे क्योंकि यह पार्स करना इतना आसान है? जेड मूल रूप से XML के लिए YAML है जब आप इसके साथ कोणीय का उपयोग कर रहे हैं।

— फिलिप गेरेट

7

मैं @NickWiggill से सहमत हूं। मानसिक रूप से JADE टेम्पलेट बनाम कच्चे HTML पार्स करने के लिए मेरे लिए समान 'वेटवेयर' सीपीयू समय की आवश्यकता होती है। यदि आप असहमत हैं तो मैं इतना नहीं कहूंगा कि आप अनप्रोफेशनल हैं, लेकिन मेरे लिए भी यही बात है। @ फिलिप, सी / सी ++ को पार्स करने की आपकी सादृश्यता, जेईएसटी को HTML से पार्स करने के बराबर है, गरीब है, बहुत कम लोग हैं, यदि कोई हो, जो वास्तविक समय के पास विधानसभा को पार्स करना शुरू कर सकता है, जबकि, मुझे लगता है, अधिकांश वेब डेवलपर्स HTML को आसानी से या बहुत ही आसान तरीके से JADE के रूप में पार्स कर सकते हैं।

— नामांकन

63

मैं AngularJS द्वारा खपत टेम्प्लेट उत्पन्न करने के लिए जेड का उपयोग करता हूं क्योंकि मुझे सादे HTML लिखने से नफरत है। यह कुछ इस तरह दिखता है:

.control-group(
  ng-form
  name='emailGroup'
  ng-class='{"ng-error": emailGroup.$invalid}'
)
  label.control-label Email
  .controls
    input(
      type='email'
      ng-model='user.email'
      required
      placeholder='you@example.com'
      focus-on='focusEmail'
    )

... जो मुझे लगता है कि सादे HTML की तुलना में बहुत क्लीनर है।

— thatmarvin
स्रोत

12

ठीक है, तो आप इसका उपयोग केवल इसलिए करते हैं क्योंकि आपको सादा HTML लिखना पसंद नहीं है? क्या जेड के लिए मुख्य लाभ, अन्य जीत हैं? क्या जेड कभी भी HTML को किसी भी तरह से गड़बड़ करता है, इसलिए आपको एक निश्चित आउटपुट प्राप्त करने के लिए इसे ट्वीक करना होगा? मुझे वास्तविक आवश्यकता के बिना अप्रत्यक्ष की एक और परत जोड़ने का खतरा है । लेकिन फिर, इसलिए मैं पूछ रहा हूं। मैं यहाँ मूल्य समझना चाहता हूँ।

— जे पीट

1

मैंने वास्तव में जेड के साथ शुरू किया था इससे पहले कि मैं कोणीय के साथ गया था, इसलिए यह एक आदत थी जो एक सचेत विकल्प के बजाय अटक गई थी, लेकिन इसने अब तक अच्छा काम किया है। केवल एक ही मुद्दा मेरे पास जेड है जिस तरह से यह सफेद रिक्त स्थान को संभालता है (मैं सुंदर = गलत का उपयोग करता हूं) इसलिए मैंने जब भी मुझे टैग के बीच स्थान जोड़ने की आवश्यकता होती है, तो स्रोत फ़ाइलों में व्हॉट्सएप को पीछे छोड़ दिया। मुझे इसमें शामिल सुविधाएं और मिश्रण बहुत उपयोगी लगते हैं।

— thatmarvin

क्या ng-inludeहै, संभवतः के साथ उपयोग किया ng-src, अलग Jades mixins से ज्यादा और और भी शामिल है?

— जे पीट

2

एचटीएमएल से अधिक अमूर्त की @JayPete जेड की परत है soooo पतली। यह मेरे द्वारा उपयोग किए गए वाक्यविन्यास के बीच सबसे सहज अनुवादों में से एक है। जेड में बहुत कम जादू होता है, जहां आप चर और सशर्त तर्क के साथ खुदाई करना शुरू करते हैं (जैसा कि आप किसी भी टेम्पलेट इंजन के साथ करेंगे)। यह वास्तव में अलग नहीं है।

— चेव

6

सरल व्यक्तिपरक है।

— Chev

46

मैं ईमानदारी से यह नहीं समझता कि लोग इसके बीच के अंतर की परवाह क्यों करते हैं:

<html ng-app>
 <!-- Body tag augmented with ngController directive  -->
 <body ng-controller="MyController">
   <input ng-model="foo" value="bar">
   <!-- Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup -->
   <button ng-click="changeFoo()">{{buttonText}}</button>
   <script src="angular.js">
 </body>
</html>

और इस:

html(ng-app="ng-app")
  // Body tag augmented with ngController directive  
  body(ng-controller="MyController")
    input(ng-model="foo", value="bar")
    // Button tag with ng-click directive, and string expression 'buttonText' wrapped in "{{ }}" markup
    button(ng-click="changeFoo()") {{buttonText}}
    script(src="angular.js")

सिवाय इसके कि मुझे एक और अधिक मानव-पठनीय लगता है। थोड़ा सा । मुझे नहीं लगता कि लोग विषय के बारे में इतने उत्सुक क्यों हैं। यह सब बिकेशिंग है। यह अंतर नगण्य है और कोई भी सक्षम प्रोग्रामर Google पर पाँच सेकंड के बाद आसानी से एक का अनुवाद कर सकता है। आप जो चाहते हैं उसका उपयोग करें और बाकी सभी को बिना किसी बात के झगड़ा करने दें। अपनी लड़ाई उठाओ और उन चीजों के बारे में बहस में शामिल हों जो वास्तव में मायने रखती हैं , जैसे परमाणु रिएक्टर;)

— Chev
स्रोत

2

मैं सहमत हूं, हालांकि यदि आप ifसमीकरण में केवल 1 जेड जोड़ते हैं , तो सब कुछ अचानक बदल जाता है। "प्रीमियम उपयोगकर्ताओं" के बारे में ऊपर देखें।

— ट्वीस्टरेब

15

मैं असहमत हूँ, एक 9 लाइन html पेज पूरी तरह से अवास्तविक है। अब मैं जो पेज देख रहा हूं उसका स्रोत लेते हुए 2320 लाइनों को 1580 ( html2jade का उपयोग करके ) में कनवर्ट करता हूं । जो भी सभी stackoverflow टेम्पलेट्स लिखा के लिए समय की 700 से अधिक लाइनें बर्बाद

— फिलिप गेरेट

2

@TWiStErRob यदि आप HTML से जेड तक जा रहे हैं तो आपको बस इतना करना होगा कि आप टेम्पलेट को रेंडर करें। यदि आप ifअपने जेड मार्कअप में आ चुके हैं, तो आपको पहले से ही किसी तरह के टेम्प्लेटिंग इंजन की आवश्यकता है और आपको ifउस इंजन द्वारा जो भी वाक्यविन्यास उपयोग किया जाता है, उसे बदलना होगा । मैं वास्तव में आपकी आलोचना को नहीं समझता।

— Chev

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

— Chev

3

@ चिप, हटाए गए अधिकांश लाइनों को केवल टैग बंद करना मान लेना सुरक्षित नहीं है? चूँकि अधिकांश संपादक स्वचालित रूप से समापन टैग जोड़ते हैं जब आप एक प्रारंभिक टैग लिखते हैं, तो मुझे संदेह है कि यह वास्तव में 700 लाइनें लिखने से बचा है।

— सेमीकॉलन

14

आपको AngularJS के साथ हैंडलबार्स का उपयोग करने की आवश्यकता नहीं है क्योंकि इसमें स्वयं टेम्पलेट इंजन है।
इसका कारण वे जेड का उपयोग करते हैं, क्योंकि यह सिर्फ एक सर्वर रेंडर है जिसे html में संकलित किया जाएगा और बाद में फ्रंटएंड पर angularJS द्वारा कार्य किया जाएगा।

इसलिए TL, DR, सर्वर पर, आप अपने एप्लिकेशन के लिए केवल html संरचना उत्पन्न करने के लिए जो भी भाषा [जेड, एचएमएल, ...] का उपयोग कर सकते हैं, इसका एंगुलरजेएस से कोई लेना-देना नहीं है क्योंकि यह रेंडर होकर HTML के साथ काम करेगा। दृश्यपटल पर रनटाइम।

आपको सर्वर पर जेड का उपयोग करने की आवश्यकता नहीं है, और मेरा सुझाव है कि इसका उपयोग न करें क्योंकि यह नए डेवलपर्स को भ्रमित करेगा। जिन परियोजनाओं में आप देखते हैं कि वे जेड का उपयोग केवल इसलिए करते हैं क्योंकि यह क्लीनर है और वे इसके लिए उपयोग किए जाते हैं, और अगर यह कोणीयजेएस के साथ उपयोग करता है, तो यह केवल काम है बिना किसी तर्क के सादे html उत्पन्न करना।

— डज़ुंग नगुयेन
स्रोत

2

क्या यह सर्वर जेनरेट किए गए html का उपयोग नहीं करने के लिए क्लीनर होगा, और तर्क और दृष्टिकोण को पूरी तरह से अलग करेगा? या मुझे कुछ याद आ रहा है? AngularJS ऐप लिखते समय जेड एक अच्छा विचार क्यों है?

— जे पीट

मैं नहीं कहता कि कोणीयजेएस के साथ उपयोग करना एक अच्छा विचार है। जेड को एंगुलरजेएस से कोई लेना-देना नहीं है। इसे स्पष्ट करने के लिए, मैं अपने उत्तर को अपडेट करूंगा।

— दज़ुंग गुयेन

मैं समझता हूं कि जेड को एंगुलर से कोई लेना-देना नहीं है। मैं सिर्फ यह पता लगाने की कोशिश कर रहा हूं कि एंगुलरजेएस के धारावाहिकों में वास्तविक एचटीएमएल लिखने पर जेड का मूल्य क्या है। मैं इसका उपयोग करने वाले बहुत से लोगों को देखता हूं, और यह समझना चाहता हूं कि क्यों :-)

— जे पीट

2

फिर, जेड को एंगुलरजेएस से कोई लेना देना नहीं है। AngularJS एचटीएमएल के भाग को कॉम्ब्स करता है और इसे एचटीएमएल पेज से परोसा जाता है। आप सर्वर साइड पर HTML पेज बनाने के लिए जेड या Haml सहित जो भी उपयोग कर सकते हैं। जेड / Haml वास्तव में अस्थायी ढांचे नहीं हैं। वे अधिक प्रीप्रोसेसर हैं। सही प्रश्न "हैंडलबार्स या मूंछें या अन्य जावास्क्रिप्ट टेम्प्लेटिंग लैंग्वेजेस" होंगे

— एडी मिग जूनियर

@JayPete जेड का उपयोग करने का लाभ जब कोणीयजेएस को विकसित करना हो सकता है क्योंकि जेड सिंटैक्स क्लीनर है। लेकिन फिर भी, मेरे अनुभव के कारण, यह ज्यादा मददगार नहीं है। तो बस इसे html html के साथ करें

— Dzung Nguyen

8

स्वीकृत उत्तर कुछ हद तक एकतरफा है और इस तथ्य की उपेक्षा करता है कि HTML के लिए प्री-कंपाइलर के किसी भी सेटअप का किसी भी तरह के HTML प्रोजेक्ट के लिए एक महान उपयोग है: संरचना और परिणामस्वरूप मार्कअप लचीलापन।

कोणीय ऐप पर अकेले काम करना? जेड एक कोशिश दे।

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

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

कहा जा रहा है, मैं उत्पादन या विकास के चरण में जेड के साथ कोणीय मिश्रण करने की दिशा में सामान्य फैलाव को पहचानता हूं। वाक्यविन्यास ज्ञान का एक और आवश्यक सेट प्रस्तुत करना अधिकांश टीमों के लिए एक बुरा विचार है और जेड का उपयोग अकुशल परियोजना प्रबंधन को दूर कर सकता है कुछ कार्यों को रोकना जो DRY सिद्धांतों द्वारा निषिद्ध होंगे (जैसे मार्कअप तैयारी पर आलसी होना)

— मिरको
स्रोत

2

पता नहीं क्यों यह -1 था, लेकिन मैंने इसे काउंटर किया है।

— मार्क के कोवान

यह अस्वीकार कर दिया गया था क्योंकि यह पूरी तरह से सच नहीं है। HTML को मॉड्यूलाइज़ करने के लिए जेड कुछ नहीं करता है। यदि आप इसे प्री-कंपाइलर के साथ सही तरीके से उपयोग करते हैं तो आप सादे HTML के बारे में वही बातें कह सकते हैं।

— जस्टिन

1

आप सही हैं, सभी पूर्व-संकलक के बारे में कहा जा सकता है। जेड के लिए, मिक्सिन्स जेड- lang.com/reference/mixins मॉडर्लाइज़ेशन में सुधार कर सकते हैं (विशेषकर वेनिला HTML की तुलना में)। यदि आप HTML के मॉडर्लाइज़ेशन में रुचि रखते हैं तो आप बहुलक-project.org को भी पसंद कर सकते हैं ।

— मिरको

7

मैंने ऊपर दिए गए सभी उत्तरों को पढ़ा है और थोड़ा आश्चर्य हुआ कि किसी ने भी एक पहलू का उल्लेख नहीं किया है जो कि AngularJS टेम्प्लेट को बनाने में जेड का उपयोग करता है।

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

इसे सरल बनाने के लिए, कभी-कभी हमें HTML को भीतर HTML के माध्यम से बदलने की आवश्यकता होती है और फिर सामग्री को फिर से जोड़ने के लिए AngularJS को मजबूर करना पड़ता है। और यह ठीक उसी प्रकार का कार्य है जब जेड के माध्यम से इस तरह के विचार उत्पन्न करने से लाभ हो सकता है।

इसके अलावा, एंगुलरजेएस मॉडल के साथ अच्छी तरह से काम करता है, जो संरचना अच्छी तरह से जाना जाता है। वास्तव में, ऐसा होता है कि हम वास्तव में सटीक संरचना (कल्पना, कहते हैं, JSON रेंडरर) को नहीं जानते हैं। यहां AngularJS काफी अनाड़ी होगा (भले ही कोणीय ऐप बना रहे हों), जबकि जेड काम करेगा।

— shabunc
स्रोत

2

आप जेड के माध्यम से कोणीय टेम्पलेट शामिल कर सकते हैं।

script(type="text/ng-template", id="admin")
  include partials/admin

कैशिंग टेम्प्लेट के लिए मैं इसे जावास्क्रिप्ट फ़ाइलों में बच गए टेम्प्लेट्स की तुलना में बहुत कम नाजुक मानता हूं।

देखें: https://docs.angularjs.org/api/ng/service/$templateCache

— ऑस्टिन प्रार्थना
स्रोत

2

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

HTML को अभी भी बहुत कानूनी रूप से लिखा जा सकता है और इसे अधिक व्यापक बनाने के लिए पार्टिकल्स का उपयोग किया जा सकता है। किसी भी चीज़ की 500 पंक्तियों को पढ़ना मुश्किल है - चाहे वह जेड या एचटीएमएल हो।

यहाँ एक जेड टेम्पलेट है

.product-container

    .input-group.msB.col-md-5.no-padding
        .fnt-light-navyblue.mtB(for='name')
            strong Name the sticker
        input.full-input(type='text', placeholder='Awesome Batman Sticker')
    .clear

    .form-group.mmT
        label.form-label.fnt-light-navyblue
            strong Choose size
        .selector-group(ng-repeat="size in sizes", ng-class="{ 'msT': !$first}")
            - raw
            span.radio
                input.radio(name='choose_sticker_size',
                            ng-model="selectedSize",
                            type='radio',
                            value='{{size}}',
                            id="sticker-{{size}}")
                span.fake-radio
            label(for='sticker-{{size}}') {{size}} inch
            - endraw
    // end form-group
    .clear

और बराबर HTML

<div class="product-container">

    <div class="input-group msB col-md-5 no-padding">
        <div for="name" class="fnt-light-navyblue mtB">
            <strong>Name the product</strong>
        </div>
        <input type="text" placeholder="Awesome Batman Sticker" class="full-input" />
    </div>
    <div class="clear"></div>

    <div class="form-group mmT">
        <label class="form-label fnt-light-navyblue">
            <strong>Choose size</strong>
        </label>
        <div
            class="selector-group"
            ng-class="{ 'msT': !$first}"
            ng-repeat="size in sizes">
                {% raw %}
                <span class="radio">
                    <input
                        id="sticker-{{size}}"
                        class="radio"
                        name="choose_sticker_size"
                        ng-model="selectedSize"
                        type="radio"
                        value="{{ size }}" />
                    <span class="fake-radio"></span>
                </span>
                <label for="sticker-{{size}}">{{size}}</label>
                {% endraw %}
        </div>
    </div><!-- end form-group -->
    <div class="clear"></div>
</div>

जब कानूनी रूप से लिखा जाता है तो मुझे एचटीएमएल नहीं दिखता है विशेष रूप से बहुत नुकसान पहुंचाया जाता है ताकि एक स्विच को वारंट किया जा सके। निश्चित रूप से पर्याप्त है, कोणीय कोष्ठक एक नजर है। लेकिन मैं उनके बजाय डिजाइनर के संदेह से निपटने के लिए, चाहे वह अप्रत्यक्ष रूप से मैंने जो html पेश किया है, वह html को तोड़ रहा हो। (यह नहीं हो सकता है। लेकिन यह साबित करना एक योग्य प्रयास नहीं है)

— suryasankar
स्रोत

0

सबसे पहले, आपको हमेशा किसी प्रकार के सर्वर-साइड टेंपलेटिंग की आवश्यकता होती है।

शुद्ध क्लाइंट-साइड टेम्प्लेटिंग में लोडिंग समय में भारी नुकसान होता है, इसलिए सर्वर पर कुछ स्थिर तत्वों को रेंडर करके इसे अक्सर कम कर दिया जाता है। इस तरह जब उपयोगकर्ता आंशिक रूप से एक पृष्ठ लोड करता है, तो वह पहले से ही पृष्ठ पर कुछ तत्व देखेगा।

और अच्छी तरह से, इस मामले में टेम्प्लेट काम करते हैं, हालांकि लोग कभी-कभी जेकेएल जैसे स्थिर HTML जनरेटर का उपयोग करते हैं।

जेड का उपयोग करने का एक और कारण है जिसका उल्लेख यहां पहले नहीं किया गया है।

श्वेत रिक्ति।

यदि आप इंडेंटेशन और लाइन-ब्रेक के साथ मानव-रखरखाव योग्य HTML लिख रहे हैं, तो हर एक लाइनब्रेक का परिणाम व्हॉट्सएप टेक्स्ट नोड होगा। यह कुछ मामलों में इनलाइन तत्वों के बहुत अधिक स्वरूपण कर सकता है, और जावास्क्रिप्ट कोड को और अधिक अजीब बना सकता है।

आप अधिक विवरण यहां पढ़ सकते हैं: https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Whitespace_in_the_DOM

यदि आप जेड कोड लिख रहे हैं, तो इसे एक-लाइन HTML में संकलित किया गया है जिसमें यह समस्या नहीं है।

— एलेक्स
स्रोत

> [FasteRender] ( meteorhacks.com/fast-render ) समाधान है जिसमें सर्वर साइड रेंडरिंग शामिल नहीं है। यह आपके पहले पृष्ठ को Meteor से लोड किए गए प्रारंभिक HTML के साथ प्रस्तुत करने के लिए आवश्यक डेटा भेजता है, इसलिए जावास्क्रिप्ट क्लाइंट को लोड किए जाने के ठीक बाद पृष्ठ प्रदान किया जाता है। यह सर्वर साइड रेंडरिंग (SSR) के समान परिणाम देता है, लेकिन फिर भी उल्का के मूल सिद्धांतों में से एक को तोड़ने के बिना तार पर डेटा भेज रहा है।

— मैक्स हॉजेस

0

जब एक टीम में काम करते हैं, तो फ्रंट-एंड संभावना अपने पृष्ठों को स्थिर HTML के रूप में डिजाइन करना पसंद करती है। उस स्थिर HTML को डायनामिक टेम्प्लेट में अनुवाद करना त्रुटियों का एक स्रोत है, और जेड जोड़ना इस तरह के अनुवाद कदम को जोड़ता है।

कई अन्य लोगों के रूप में, मैं सादगी का पक्ष लेता हूं!

— अर्जन
स्रोत