AngularJS: Custom Symbols - Interpolate Provider

Explains how to use AngularJS’s simple $interpolateProvider to customize the templating symbols used. Useful for playing nicely with Django.

The Problem

My first exposure to Angular was in a Django environment. I was trying to format search results, and Angular seemed like a good way to structure and display the resulting data. I was soon confronted with the fact that both Angular and Django use the same {{ and }} delimiters. Thus any Angular templating logic would throw Django syntax errors before as soon as it was interpreted.

The Solution

Enter Angular’s somewhat-well-hidden (from most of my attempted Google queries) $interpolateProvider service. Quite simply:

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

As should be obvious, the symbols are now <[ and ]>, and Django will treat them just like any other markup, passing them right through for Angular to do its thing. There is nothing special about this particular choice, I personally wanted something without any curly braces so that they were visually distinct to avoid any possible confusion.

Irony? Triple Threat? Inception?

Amusingly, Jinja2 — the templating language I use in conjunction with Hyde for this blog — also uses the beloved {{ and }} to delimit print statements. As such, I must use the following to generate them:

{% raw %}{{{% endraw %} and {% raw %}}}{% endraw %}

Trust me when I say you do not want to see the necessary Markdown to get the above to display properly! Fine, if you have a thing for necessary verbosity, have at it.

comments powered by Disqus
(Comments omitted for printing)