AngularJs '{{' and '}}' symbols conflict with Twig

Javascript framework AngularJs and PHP framework Symfony are very popular now. Developers use them together as Symfony+AngularJs, but we saw that there is a problem with the print function in templates, especially in Twig, because AngularJs and Twig use the same '{{' and '}}' symbols to print anything.

So what to do? How do we solve that problem?

Here are 2 ways to solve that problem:

1. If you use Twig, you probably know about Verbatim. Verbatim lets you use whatever symbol you want in Twig, however, you can use it. So, if we put our AngularJs print function inside a {% verbatim %} ... {% endverbatim %} block, we will not have any conflicts.
2. If you don't want to use verbatim every time, you have a choice to use another way. In AngularJs you can change the print symbols and set other symbols whatever you want. You can use [[ ]], { }, {{ { } }}, // // etc.. This is called Interpolation. You can create an Angular module for that change and inject it wherever you want. Note that changing interpolation symbols affects the entire module globally, so you must update all existing HTML templates to use the new delimiters. Here is how you can do that:

Interpolation example

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

To apply these settings, you must inject the Interpolation module as a dependency into your main application module:

var app = angular.module("myApp", ["Interpolation"]);