notice!

이 글은 현재 널리 쓰이는 Angular 가 아닌 그의 전신 AngularJS(v1) 를 다루고 있습니다. 과거 기술에 기반한 내용이니 참고해주시기 바랍니다.

AngularJS 는 웹 앱의 프런트엔드 부분을 만드는 Javascipt Framework 이고, Django 의 Template Engine 은 백엔드 Framework 에서 동적으로 html 문서를 생성해주는 시스템이다.

이 두개를 함께 쓰려하면 한가지 문제가 생긴다. AngularJS 에서 Model(내부변수들)을 View(HTML 문서) 에 bind 할 때 사용하는 Symbol 과 Django Tempate Engine 에서 사용하는 Tag Symbol 이 동일하기 때문에, 함께 사용하면 AngularJS 의 Bind Symbol 이 작동하지 않는다.

이를 해결하기 위한 방법은 여러가지 있는데, 그중 내가 사용해보려고 하는 방법은 AngularJS module 의 설정(config) 중 하나인 $interpolateProvider 를 조정하는 것이다.

$interpolateProvider 조정하기

AngularJS 의 공식 Documentation 에 자세한 사용법이 나온다.

아래의 예시는 기존의 { { 와 } } 이던 Binding Symbol 을 // 와 // 로 변경한다.

다만 이 설정은 config 설정을 조정한 해당 앱 내에서만 작동한다.

<script>
  var customInterpolationApp = angular.module('customInterpolationApp', []);

  customInterpolationApp.config(function($interpolateProvider) {
    $interpolateProvider.startSymbol('//');
    $interpolateProvider.endSymbol('//');
  });


  customInterpolationApp.controller('DemoController', function() {
      this.label = "This binding is brought you by // interpolation symbols.";
  });
</script>
<div ng-controller="DemoController as demo">
    //demo.label//
</div>