AngularJS with Django - Conflicting template tags

Question

I want to use AngularJS with Django however they both use {{ }} as their template tags. Is there an easy way to change one of the two to use some other custom

Answer 1

I vote against using double parentheses (()) as template tag. It may work well as long as no function call is involved but when tried the following

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

with Firefox (10.0.2) on Mac I got a terribly long error instead of the intended logic. <[]> went well for me, at least up until now.

Edit 2012-03-29: Please note that $invalidWidgets is deprecated. However I'd still use another wrapper than double braces. For any angular version higher than 0.10.7 (I guess) you could change the wrapper a lot easier in your app / module definition:

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

API docs.

Answer 2

If you use django 1.5 and newer use:

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

If you are stuck with django 1.2 on appengine extend the django syntax with the verbatim template command like this ...

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))

In your file use:

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

Source: http://bamboobig.blogspot.co.at/2011/09/notebook-using-jquery-templates-in.html

Answer 3

You could always use ng-bind instead of {{ }} http://docs.angularjs.org/api/ng/directive/ngBind

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

Answer 4

For Angular 1.0 you should use the $interpolateProvider apis to configure the interpolation symbols: http://docs.angularjs.org/api/ng.$interpolateProvider.

Something like this should do the trick:

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

Keep in mind two things:

• mixing server-side and client-side templates is rarely a good idea and should be used with caution. The main issues are: maintainability (hard to read) and security (double interpolation could expose a new security vector - e.g. while escaping of serverside and clientside templating by themselves might be secure, their combination might not be).
• if you start using third-party directives (components) that use {{ }} in their templates then your configuration will break them. (fix pending)

While there is nothing we can do about the first issue, except for warning people, we do need to address the second issue.

Answer 5

If you did separate sections of page properly then you can easily use angularjs tags in "raw" tag scope.

In jinja2

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

In Django template (above 1.5)

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

Answer 6

I would stick with a solution that uses both django tags {{}} as well angularjs {{}} with a either a verbatim section or templatetag.

That is simply because you can change the way angularjs works (as mentioned) via the $interpolateProvider.startSymbol $interpolateProvider.endSymbol but if you start to use other angularjs components like the ui-bootstrap you will find that some of the templates are ALREADY built with standard angularjs tags {{ }}.

For example look at https://github.com/angular-ui/bootstrap/blob/master/template/dialog/message.html.