Django के साथ AngularJS - टेम्प्लेटिंग टेम्प्लेट टैग

Question

मैं Django के साथ AngularJS का उपयोग करना चाहता हूं, हालांकि वे दोनों {{ }}अपने टेम्पलेट टैग के रूप में उपयोग करते हैं। क्या कुछ अन्य कस्टम टेंपलेटिंग टैग का उपयोग करने के लिए दोनों में से एक को बदलने का एक आसान तरीका है?

Comments

मैं केवल django templatesडाइरेक्टरी से एक टेम्प्लेट प्रदान करता हूं , बाकी मैं अंदर डाल देता हूं static। इस तरह से आपके पास हस्तक्षेप नहीं है। वहाँ एक ट्यूटोरियल है जो मैंने यहाँ लिखा है: coderwall.com/p/bzjuka/…

— कॉनर लीच

angular2 और jinja2 के बीच डेटा कैसे पास करें? कोई मदद

— नरेंद्र

@ नरेंद्र इस सवाल के लिए प्रासंगिक नहीं एक अलग समस्या है। कृपया इसे खोजें और यदि आपको कोई उत्तर नहीं मिलता है, तो इसे एक नए प्रश्न के रूप में पूछें।

— एंडोफेज

Answer 1

कोणीय 1.0 के लिए आपको प्रक्षेप प्रतीकों को कॉन्फ़िगर करने के लिए $ इंटरपोलेटप्रोविडर एपिस का उपयोग करना चाहिए: http://docs.angularjs.org/api/ng.$interpolateProvider ।

कुछ इस तरह करना चाहिए ट्रिक:

myModule.config(function($interpolateProvider) {
  $interpolateProvider.startSymbol('{[{');
  $interpolateProvider.endSymbol('}]}');
});

दो बातों का ध्यान रखें:

• सर्वर-साइड और क्लाइंट-साइड टेम्प्लेट का मिश्रण करना शायद ही कभी एक अच्छा विचार है और सावधानी के साथ इसका उपयोग किया जाना चाहिए। मुख्य मुद्दे हैं: रख-रखाव (पढ़ने में कठिन) और सुरक्षा (दोहरा प्रक्षेप एक नई सुरक्षा वेक्टर को उजागर कर सकता है - जैसे कि सर्वराइड से बचने और अपने आप से टकराने वाले क्लाइंटसाइड सुरक्षित हो सकते हैं, उनका संयोजन नहीं हो सकता है)।
• यदि आप तृतीय-पक्ष निर्देशों (घटकों) का उपयोग करना शुरू करते हैं {{ }}जो उनके टेम्पलेट्स में उपयोग करते हैं तो आपका कॉन्फ़िगरेशन उन्हें तोड़ देगा। ( फिक्स पेंडिंग )

जबकि पहले मुद्दे के बारे में हम कुछ नहीं कर सकते हैं, लोगों को चेतावनी देने के अलावा, हमें दूसरे मुद्दे को संबोधित करने की आवश्यकता है।

Comments

क्या आप सर्वर-साइड और क्लाइंट-साइड टेम्प्लेट को मिलाने के लिए अपने पहले बिंदु (रखरखाव, सुरक्षा और अन्य चिंताओं के बारे में बताएंगे)? थोड़ा और स्पष्टीकरण सहायक होगा।

— ब्रायन

@btlachance - मैंने उत्तर का विस्तार किया।

— इगोर मिनार

चूंकि $ इंटरपोलेटप्रॉइडर एक सेटर के रूप में उपयोग किए जाने पर स्वयं लौटता है, यहां थोड़ा अधिक कॉम्पैक्ट संस्करण है: $interpolateProvider.startSymbol('{[{').endSymbol('}]}');

— मार्क राजकॉक

ऐसा लगता है कि "फिक्स" बंद है। क्या इसका मतलब यह है कि अब तीसरे पक्ष के घटकों का उपयोग करना सुरक्षित नहीं है?

— एलेक्स ओक्रुस्को

कच्चे उत्पादन के लिए $ interpolateProvider को अपडेट करने का कोई तरीका भी? जैसे {{{foo}}} {{[{foo}]}} बन रहे हैं?

— परीक्षक

Answer 2

आप शायद शब्दशः Django टेम्पलेट टैग की कोशिश कर सकते हैं और इसे इस तरह उपयोग कर सकते हैं:

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>

{% verbatim %}
<div ng-app="">
    <p>10 is {{ 5 + 5 }}</p>
</div>
{% endverbatim %}

Comments

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

— एंडोफेगे

वर्बेटिम

— प्रत्यूष

Django 1.7 में आपको मानक टैग लाइब्रेरी में होने के बाद से शब्दशः लोड करने की आवश्यकता नहीं है। आपको केवल टैग का उपयोग करने की आवश्यकता है।

— हाईपोस्ट

सेटिंग्स से Django डिफ़ॉल्ट कोष्ठक को बदलने का एक तरीका अच्छा होगा, लेकिन यह भी काम करता है।

— एड्रियन लोपेज

Answer 3

यदि आपने पृष्ठ के अलग-अलग अनुभागों को ठीक से किया है, तो आप आसानी से "कच्चे" टैग दायरे में कोणीयज टैग का उपयोग कर सकते हैं।

जीजा 2 में

{% raw %}
    // here you can write angularjs template tags.
{% endraw %}

Django टेम्पलेट में (1.5 से ऊपर)

{% verbatim %}    
    // here you can write angularjs template tags.
{% endverbatim %}

Comments

यह समाधान स्वीकार किए जाते हैं बाहरी बाह्य संकुल को स्वीकार नहीं करता है।

— partizanos

Answer 4

हमने Django 'एनजी' में एक बहुत ही सरल फिल्टर बनाया है जो दो को मिलाना आसान बनाता है:

foo.html:

...
<div>
  {{ django_context_var }}
  {{ 'angularScopeVar' | ng }}
  {{ 'angularScopeFunction()' | ng }}
</div>
...

ngफिल्टर इस तरह दिखता है:

from django import template
from django.utils import safestring

register = template.Library()


@register.filter(name='ng')
def Angularify(value):
  return safestring.mark_safe('{{%s}}' % value)

Comments

यह करने के लिए एक और बहुत ही वैध तरीका है, हालांकि मैं कई जगह फिल्टर जोड़ने की तुलना में टैग को एक जगह बदल

— दूंगा

आप एनजी फिल्टर कैसे बनाते हैं? क्या आप एक उदाहरण जोड़ सकते हैं?

— बेन लियायनज

अद्यतन उत्तर। @Endophage मेरे पास बहुत अधिक कोणीय {{}} जोड़े हैं, जबकि मेरे पास Django {{}} जोड़े हैं, इसलिए मैं Django वालों को अपडेट करूंगा।

— वेस अल्वारो

@WesAlvaro दुर्भाग्य से मैं केवल एक उत्तर स्वीकार कर सकता हूं।

— एंडोफेज

Answer 5

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

angular.markup('(())', function(text, textNode, parentElement){
  if (parentElement[0].nodeName.toLowerCase() == 'script') return;
  text = text.replace(/\(\(/g,'{{').replace(/\)\)/g, '}}');
  textNode.text(text);
  return angular.markup('{{}}').call(this, text, textNode, parentElement);
});

angular.attrMarkup('(())', function(value, name, element){
    value = value.replace(/\(\(/g,'{{').replace(/\)\)/, '}}');
    element[0].setAttribute(name, value);
    return angular.attrMarkup('{{}}').call(this, value, name, element);
});

इसके अलावा, मैं एक आगामी वृद्धि है कि सामने आ जाएगी की ओर इशारा किया गया था startSymbolऔर endSymbolगुण के लिए सेट किया जा सकता है कि जो कुछ भी टैग आप इच्छा।

Comments

और यह आप इसे एंगुलरज 1.0 में कैसे करते हैं: var m = angular.module ('myApp', []); m.config (फ़ंक्शन ($ interpolateProvider) {$ interpolateProvider.startSymbol ('('); $ interpolateProvider.endSymbol ('))');});

— idursun

कोणीय आईआरसी चैनल। fwiw, जिसने भी मुझे पाया #angularjs में एक

— Shanimal

Answer 6

मैं टेम्पलेट टैग के रूप में डबल कोष्ठक () का उपयोग करने के खिलाफ वोट देता हूं। यह अच्छी तरह से तब तक काम कर सकता है जब तक कोई फ़ंक्शन कॉल शामिल नहीं होता है लेकिन जब निम्नलिखित की कोशिश की जाती है

ng:disabled=(($invalidWidgets.visible()))

मैक पर फ़ायरफ़ॉक्स (10.0.2) के साथ मुझे इच्छित तर्क के बजाय बहुत लंबी त्रुटि मिली। <[]> मेरे लिए अच्छी तरह से चला गया, कम से कम अब तक।

2012-03-29 को संपादित करें: कृपया ध्यान दें कि $ अमान्य वादे हटाए गए हैं। हालांकि मैं अभी भी डबल ब्रेसेस की तुलना में एक और आवरण का उपयोग करूंगा। 0.10.7 से अधिक किसी भी कोणीय संस्करण के लिए (मुझे लगता है) आप अपने ऐप / मॉड्यूल परिभाषा में रैपर को बहुत आसान बदल सकते हैं:

angular.module('YourAppName', [], function ($interpolateProvider) {
    $interpolateProvider.startSymbol('<[');
    $interpolateProvider.endSymbol(']>');
}); 

एपीआई डॉक्स ।

Comments

निष्पक्ष बिंदु। मैंने उस बारे में सोचा नहीं था, लेकिन मैं विशेष रूप से उपयोग करने की वकालत नहीं कर रहा था (()), मैं सिर्फ सीमांकक को कॉन्फ़िगर करने में सक्षम होना चाहता था।

— एंडोफेगे

Answer 7

मुझे नीचे वाला कोड मददगार लगा। मुझे यहाँ कोड मिला: http://djangosnippets.org/snippets/2787/

"""
filename: angularjs.py

Usage:
    {% ng Some.angular.scope.content %}

e.g.
    {% load angularjs %}
    <div ng-init="yourName = 'foobar'">
        <p>{% ng yourName %}</p>
    </div>
"""

from django import template

register = template.Library()

class AngularJS(template.Node):
    def __init__(self, bits):
        self.ng = bits

    def render(self, ctx):
        return "{{%s}}" % " ".join(self.ng[1:])

def do_angular(parser, token):
    bits = token.split_contents()
    return AngularJS(bits)

register.tag('ng', do_angular)

Comments

मैंने इस कस्टम टैग का उपयोग किया था, लेकिन तब अगर मैं कुछ का उपयोग करता हूं: जैसे ही <p>{% ng location %}</p> इसका प्रतिपादन किया जाता है {{location}}- हां घुंघराले ब्रेसिज़ के साथ! यह $ गुंजाइश के मूल्य को प्रस्तुत नहीं करता है। आवंटन जो मेरे नियंत्रक में हार्डकोड है। किसी भी विचार मैं क्या याद आ रही है?

— केशव अग्रवाल

Answer 8

आप हमेशा {{}} http://docs.angularjs.org/api/ng/directive/ngBind के बजाय एनजी-बाइंड का उपयोग कर सकते हैं

<span ng-bind="name"></span>

Answer 9

यदि आप django 1.5 और नए प्रयोग करते हैं:

  {% verbatim %}
    {{if dying}}Still alive.{{/if}}
  {% endverbatim %}

यदि आप appjine पर django 1.2 के साथ फंस गए हैं तो इस तरह वर्बटीम टेम्पलेट कमांड के साथ django सिंटैक्स का विस्तार करें ...

from django import template

register = template.Library()

class VerbatimNode(template.Node):

    def __init__(self, text):
        self.text = text

    def render(self, context):
        return self.text

@register.tag
def verbatim(parser, token):
    text = []
    while 1:
        token = parser.tokens.pop(0)
        if token.contents == 'endverbatim':
            break
        if token.token_type == template.TOKEN_VAR:
            text.append('{{')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('{%')
        text.append(token.contents)
        if token.token_type == template.TOKEN_VAR:
            text.append('}}')
        elif token.token_type == template.TOKEN_BLOCK:
            text.append('%}')
    return VerbatimNode(''.join(text))

आपके फ़ाइल उपयोग में:

from google.appengine.ext.webapp import template
template.register_template_library('utilities.verbatim_template_tag')

स्रोत: http://bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-.html.html

Comments

धन्यवाद ... आखिरकार यह काम कर गया लेकिन मुझे ... 1) एक नया पायथन मॉड्यूल बनाना था। मैंने इसे उपयोगिताएँ नाम दिया है और इसमें फ़ाइल verbatim_templatetag.py डाल दी है। (इसमें परिभाषित वर्बेटिमोड क्लास के साथ ऊपर की फाइल)। 2) से आयात विवरण बदलें: from django import template to: from google.appengine._internal.django import template फिर, मेरी मुख्य फ़ाइल में, बस फ़ाइल का नाम बदल दिया: template.register_template_library('utilities.verbatim_template_tag')

— रोजर

Answer 10

आप Django को आउटपुट {{और }}, साथ ही अन्य आरक्षित टेम्पलेट स्ट्रिंग्स को {% templatetag %}टैग का उपयोग करके बता सकते हैं ।

उदाहरण के लिए, {% templatetag openvariable %}आउटपुट का उपयोग करना {{।

Comments

मुझे पता है कि यह संभव है, लेकिन यह गन्दा है ... यह बहुत साफ हो जाएगा (और टेम्पलेट के टैग के लिए बहुत बड़ा नहीं लगता) बस एक फ्रेमवर्क में कॉन्फ़िगर किया जा सकता है। दिन के अंत में यह सिर्फ पर्दे के पीछे से मेल खाते हुए स्ट्रिंग कर रहा है ...

— एंडोफेज

Answer 11

मैं एक ऐसे समाधान के साथ रहूँगा जो दोनों django टैग {{}} का उपयोग करता है और साथ ही angularjs {{}} या तो एक शब्दशः खंड या templatetag के साथ।

यह केवल इसलिए है क्योंकि आप $ interpolateProvider.startSymbol $ interpolateProvider.endSymbol के माध्यम से angularjs के काम करने (जैसा कि उल्लेख किया गया है) को बदल सकते हैं, लेकिन अगर आप ui-bootstrap जैसे अन्य angularjs का उपयोग करना शुरू करते हैं, तो आप पाएंगे कि कुछ टेम्पलेट ALREADY द्वारा निर्मित हैं। मानक angularjs टैग {{}} के साथ।

उदाहरण के लिए https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html देखें ।

Comments

अच्छी बात। PyPI में अब एक django- कोणीय पैकेज है जो दो प्ले को एक साथ अच्छा बनाने के लिए है, लेकिन मैंने इस पर ध्यान नहीं दिया है कि यह टेम्प्लेट टैग समस्या को कम करता है।

— एंडोफेगे

Answer 12

यदि आप कोई सर्वर-साइड इंटरपोलेशन करते हैं, तो ऐसा करने का एकमात्र सही तरीका है<>

$interpolateProvider.startSymbol('<{').endSymbol('}>');

कुछ भी एक XSS वेक्टर है।

इसका कारण यह है कि किसी भी कोणीय परिसीमन जो कि Django द्वारा बच नहीं रहे हैं, उपयोगकर्ता द्वारा प्रक्षेपित स्ट्रिंग में प्रवेश किया जा सकता है; यदि कोई अपना उपयोगकर्ता नाम "{{bad_code}}" सेट करता है, तो कोणीय खुशी से इसे चलाएगा । यदि आप Django से बचकर किसी पात्र का उपयोग करते हैं , हालांकि, ऐसा नहीं होगा।