Angural JSとDjangoのテンプレートコンフリクトを解決する

Webアプリを作る時に、バックエンドをPythonのDjango、フロントエンドをAngular JSだと、コンフリクトが起きてしまいます。しかも配列を使っている場合、一般的な方法も上手く行かず、ハマってしまいましたので書いておきます。

コンフリクトは何故起きる？

Djangoのテンプレートでは、{{と}}をパラメータ挿入などに使いますが、Angular JSでも{{と}}をマークアップの始めと終わりに使います。そのためコンフリクトが起きてしまうようです。

Angular JSのマークアップを別のもので行う

同じ{{}}を使うからコンフリクトしてしまうわけで、それに対して、Angular JS側のマークアップタグを別のものに変更する方法が用意されています。

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

</script>

Appのconfigで

$interpolateProvider.startSymbol('//');

で開始タグを好きなものに、

$interpolateProvider.endSymbol('//');

で終了タグを好きなものに変えられます。
※ここでは、両方とも//に変更しています。

テンプレート中の{{と}}も指定したタグ//に変更します。

公式ドキュメント

検索していると[[と]]に変えている人が多いようでしたが、その場合、Angural JSの中で配列[]を使うと動かないようです。//にすることで、動くようになりました。

他に、Python側で対応する方法もあるようですが、この方法が私には簡単でしたので、共有しときます。