Change curly braces to other symbols in AngularJS

In Angular JS, We can change delimiter curly braces to other symbol.

You can change start and end interpolation symbol using interpolateProvider service.

you can change {{var}} to [[var]] or any symbols.

Example:

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

or

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

 

And in your template

before:

{{ hello }}

 

after:

[[ hello ]]
or

// hello //

 

Where we are getting problem

where both angular and other template use the same delimiters {{ and }}.

  • AngularJS development with Blade
  • AngularJS development with Twig
  • AngularJS development with Handlebars

Note:  Angular 1.0, uses the $interpolateProvider to configure the interpolation symbols.

 

According to Angular JS Docs:
https://docs.angularjs.org/api/ng/provider/$interpolateProvider

 

$interpolateProvider

– $interpolate
– provider in module ng

Used for configuring the interpolation markup. Defaults to {{ and }}.

 

There are two methods:

1. startSymbol([value]);
Symbol to denote start of expression in the interpolated string. Defaults to {{.

2. endSymbol([value]);
Symbol to denote the end of expression in the interpolated string. Defaults to }}.