Tech Tip: Change AngularJS template delimiters

I have recently been doing some development with the Bottle Python web app framework. Unfortunately it’s simple template system uses the same template delimiters as Angular (“{{” and “}}”). Worse you cannot change these delimiters in Bottle.

Fortunately you can change them in Angular using the following:

var myApp = angular.module('talkpoint', [], function($interpolateProvider) {
    // set custom delimiters for angular templates
    $interpolateProvider.startSymbol('[[');
    $interpolateProvider.endSymbol(']]');
});

Which given a Controller looking like this:

myApp.controller('TodoCtrl', ['$scope', function($scope) {
    $scope.todos = [
        {text:'learn angular', done:true},
        {text:'build an angular app', done:false}];
}]);

Allows you to write Angular template code looking like this:

<div ng-controller="TodoCtrl" class="row">
  <ul >
    <li ng-repeat="todo in todos">
      <input type="checkbox" ng-model="todo.done">
      <span class="done-[[todo.done]]">[[todo.text]]</span>
    </li>
  </ul>
</div>