Change the curly braces syntax for expressions
Change the curly braces syntax for expressions

Problem

You want to change the double curly braces syntax {{ , because it’s conflicting with your backend template engine.

Solution

You can indeed change the curly braces to e.g. [[. In AngularJS, the $interpolate provider does the template interpretation and has an option for changing the symbols.

To do so, you can inject the $interpolateProvider in the config block of your module. There you can set startSymbol and endSymbol as demonstrated below:

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

W> If you split your application into different modules, you have to configure the alternative syntax for every module!

Tip 1: $interpolate stand alone

You can also use the interpolate provider for your own templating purposes. Just inject $interpolate and use:

$interpolate('Hello {{name}}!')({name: 'World'}); // => 'Hello World!'

Tip 2: Skipping interpolation

For a part of the DOM, you can disable the translation of curly braces altogether.

<div ng-non-bindable>
   ...
</div>