Angular.Js와 Django 태그 간의 충돌을 해결하는 솔루션

머리말

Django와 Angular의 템플릿 시스템은 매우 유사한 태그 시스템을 사용한다는 점을 모두가 알아야 합니다. 예를 들어 둘 다 변수 이름을 표시하기 위해 {{ content }}를 사용합니다. 따라서 Django와 Angular를 함께 사용하면 충돌이 발생할 수 있습니다. 온라인에서 몇 가지 해결책을 찾았습니다. 이제 요약해서 공유해보겠습니다.

1. AngularJ의 기본 태그 변경

다음 코드는 Angular의 원래 태그를 {[{ content }]}로 변경할 수 있습니다.

Angular 태그 수정

myModule.config(function($interpolateProvider) {
 $interpolateProvider.startSymbol('{[{');
 $interpolateProvider.endSymbol('}]}');
});

이것은 비교적 간단하고 직관적인 방법입니다. 수정된 코드는 읽기도 더 쉽고, Django 태그인지 Angular 태그인지 한눈에 알 수 있습니다. 단점은 타사 플러그인과 충돌하기 쉽다는 것입니다(타사 플러그인이 지침 및 기타 태그를 사용하는 경우).

2. Django에게 템플릿의 일부를 렌더링하지 말라고 지시

Django 1.5부터 {% verbatim %} 태그가 지원됩니다(verbatim은 문자 그대로 번역을 의미함), Django 축어 태그로 묶인 콘텐츠는 렌더링하지 않습니다:

{% verbatim %}
 {{if dying}}Still alive.{{/if}}
{% endverbatim %}

이 태그는 중첩을 지원하지 않지만 태그에 이름을 추가할 수 있습니다.

{% verbatim myblock %}
 Avoid template rendering via the {% verbatim %}{% endverbatim %} block.
{% endverbatim myblock %}

이렇게 Django는 myblock의 endverbatim을 end mark로 찾고, 중간에 삽입된 verbatim 태그는 endverbatim으로 처리됩니다. myblock의 해석되지 않은 부분.

이 솔루션의 장점은 코드의 복잡성을 증가시키지 않으며 Django에서 기본적으로 지원되며 Angular에 영향을 미치지 않는다는 것입니다. 단점은 많은 축어형 태그가 여러 위치에서 사용될 수 있어 템플릿이 매우 지저분해진다는 것입니다.

3. 타사 플러그인 사용

현재 제가 아는 플러그인은 django-angular입니다. 이 플러그인에는 Django와 Angular 태그를 혼합하는 기능이 있습니다.

Angular 태그를 올바르게 구문 분석하는 동안 Django의 if 및 기타 태그를 계속 사용할 수 있습니다.

{% load djng_tags %}
{% angularjs ng %}
<div{% if ng %} ng-repeat="item in items"{% endif %}>
 <h4><a ng-href="{{ item.absolute_url }}"{% if not ng %} href="{{ item.absolute_url }}"{% endif %}>{{ item.name }}</a></h4>
 <img ng-src="{{ item.image.url }}"{% if not ng %} src="{{ item.image.url }}"{% endif %} width="{{ item.image.width }}" height="{{ item.image.height }}" />
 <div{% if ng %} ng-bind-html="item.description"{% endif %}>{% if not ng %}{{ item.description }}{% endif %}</div>
</div>
{% endangularjs %}

플러그인을 도입하면 코드가 더 복잡해진다는 단점이 있습니다. 팀원 모두가 이러한 작성 방식을 배워야 합니다. 개인적으로 느끼는 점은 오류가 늘어나기 쉽다는 것입니다.

두 번째 방법이 더 적합하다고 생각합니다. 변수를 작성할 때 프런트엔드와 백엔드를 분리해 보세요. 정적 템플릿을 반환하는 작업은 Django가 담당하고 데이터는 Angular에 전달됩니다.

요약

이 글의 내용이 모두의 공부나 업무에 조금이나마 도움이 되었으면 좋겠습니다. 소통하라는 메시지.

Angular.J와 Django 간의 태그 충돌을 해결하는 솔루션에 대한 더 많은 관련 기사를 보려면 PHP 중국어 웹사이트에 주목하세요!