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

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

Since AngularJS is now a deprecated framework, you can use JavaScript modern frameworks like Vuejs, React and Angular, instead.

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

Here is 2 ways to solve that problem:

  1. If you use Twigs, you probably know about Verbatim. Verbatim lets you use in twigs whatever symbol you want, how you want to use it. So, if we put our AngularJs print function inside {% 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 another symbols whatever you want. You can use [[ ]], [{ }], {{{ }}}, // // etc... Its called Interpolation. You can create an angulars module for that changing and inject it wherever you want. Here is how you can do that:
angular.module("Interpolation", []).config([
  "$interpolateProvider",
  function ($interpolateProvider) {
    $interpolateProvider.startSymbol("[[");
    $interpolateProvider.endSymbol("]]");
  },
]);