programing

Jinja2 템플릿 엔진과 함께 AngularJS를 사용할 수 있습니까?

kingscode 2021. 1. 14. 22:56
반응형

Jinja2 템플릿 엔진과 함께 AngularJS를 사용할 수 있습니까?


Flask 사이트가 있고 AngularJS JavaScript 프레임 워크를 사용하고 싶습니다. 불행히도 구분 기호가 겹치는 것처럼 보입니다.

둘 다 이중 중괄호 ( {{ expr }}) 에 의존하는 경우 Jinja2에서 Angular를 어떻게 사용 합니까? 가능할까요?


몇 가지 옵션이 있습니다.

1) Angular의 구분 기호를 변경합니다.

var app = angular.module('Application', []);

app.config(['$interpolateProvider', function($interpolateProvider) {
  $interpolateProvider.startSymbol('{a');
  $interpolateProvider.endSymbol('a}');
}]);

시작 및 끝 기호에 대해 선택한 항목이 새 구분 기호로 작동합니다. 이 경우를 사용하여 변수를 Angular로 표현합니다 {a some_variable a}.

이 접근 방식은 한 번만 설정하면되고 명시 적이라는 장점이 있습니다.

2) Jinja2의 구분 기호를 변경합니다.

무시 또는 서브 클래스 Flask.jinja_options.updateFlask당신이 당신의 응용 프로그램에 결합하는 것을 목적 (관련 바르 : block_start_string, block_end_string, variable_start_string, variable_end_string, comment_start_string, comment_end_string) :

jinja_options = app.jinja_options.copy()

jinja_options.update(dict(
    block_start_string='<%',
    block_end_string='%>',
    variable_start_string='%%',
    variable_end_string='%%',
    comment_start_string='<#',
    comment_end_string='#>'
))
app.jinja_options = jinja_options

민감한 데이터가 서버 측에서 확장되지 않을 위험이 더 높기 때문에 개발자가 아닌 모든 프로젝트에서 프런트 엔드 (예 : Angular)의 구문을 변경하는 것이 좋습니다.

3) 또는 사용하여 Jinja2에서 원시 블록출력합니다 .{% raw %}{% verbatim %}

<ul>
{% raw %}
  {% for item in seq %}
      <li>{{ some_var }}</li>
  {% endfor %}
{% endraw %}
</ul>

4) Jinja2를 사용하여 템플릿에 중괄호를 작성합니다.

{{ '{{ some_var }}' }}

이것은 {{ some_var }}HTML에서와 같이 출력됩니다 .

접근 방식 # 1에 대한 선호 사항은 분명하지만 위의 방법 중 어느 것이 든 작동합니다.


또 다른 옵션이 있습니다. flask-triangle 은 jinja2에서 각도 템플릿을 통합하면서 양식을 만드는 데 도움이되는 확장입니다. 각도 (또는 jinja2) 괄호 구분 기호를 변경하는 대신 표현식을 각도로 렌더링해야하는지 여부를 jinja2에 알리는 식별자를 추가 할 수 있습니다. |angular변수 뒤에 추가 하십시오.

<div>{{variable|angular}}</div>

HTML 출력에서 ​​다음과 같이 렌더링됩니다.

<div>{{variable}}</div>

참고하시기 바랍니다 플라스크 삼각형이 도 (각도 스타일 형태를 구축하기위한) 다른 기능이 함께 제공됩니다, 그러나 나는 jinja2에서 각 템플릿 더 읽기 쉽게 할 수있는 가치있는 옵션이 될 것 같아요.

참조 URL : https://stackoverflow.com/questions/30362950/is-it-possible-to-use-angularjs-with-the-jinja2-template-engine

반응형