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>