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.

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.

Recommended Posts

Resolve Angural JS and Django template conflicts
Django HTML Template # 2
Django Template notes
Django HTML template
Django Template Tips
Resolve websocket and websocket_client conflicts that prevent successful import
Django --models.py and admin.py
How to resolve variable scope conflicts between Jinja2 and AngularJS