Angular’s templating system is wonderful, and it build’s on some common practices established years ago by the Handlebars templating engine. Sometimes I encounter projects where an existing templating system conflicts with Angular, such as a server-side templating language like Mozilla’s Nunjucks or PHP’s popular Twig template engine. In these situation it’s often handy to change the client-side template delimeters used by Angular.js.

ngApp.config( [ '$interpolateProvider', function( $interpolateProvider ) {
    $interpolateProvider.startSymbol( '{!' );
    $interpolateProvider.endSymbol( '!}' );
} ] );

Where ngApp is the name of the angular.module you’re working with. Once you’ve done this you can use the following syntax for in your Angular templates:

{! myScopeVar !}

I hope this helps!

About the Author

Kevin Leary is a freelance web developer in Boston, MA specializing in enterprise WordPress development, conversion optimization and JavaScript development.