Resolve Angural JS and Django template conflicts

When creating a web application, if the back end is Python Django and the front end is Angular JS, conflicts will occur. Moreover, when using arrays, the general method did not work and I was addicted to it, so I will write it down.

Why do conflicts occur?

Django templates use {{ and}} to insert parameters, but AngularJS also uses {{ and }} at the beginning and end of markup. Therefore, it seems that a conflict will occur.

Make AngularJS markup different

Since the same {{}} is used, there is a conflict, and there is a way to change the markup tag on the Angular JS side to another one.

<script>
var customInterpolationApp = angular.module('myapp', []);
  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
  });

</script>

In the app config

$interpolateProvider.startSymbol('//');

To make the start tag your favorite

$interpolateProvider.endSymbol('//');

You can change the end tag to whatever you like with.

• Here, both are changed to //.

Also change the {{ and }} in the template to the specified tag //.

Official documentation

When searching, many people seemed to change it to [[ and ]], but in that case, using the array [] in Angural JS does not seem to work. By setting it to //, it works.

There seems to be another way to do it on the Python side, but this method was easy for me, so I'll share it.