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.update
온 Flask
당신이 당신의 응용 프로그램에 결합하는 것을 목적 (관련 바르 : 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에서 각 템플릿 더 읽기 쉽게 할 수있는 가치있는 옵션이 될 것 같아요.
'programing' 카테고리의 다른 글
매개 변수가 함수에 제공되는지 테스트하는 방법은 무엇입니까? (0) | 2021.01.14 |
---|---|
객체가 있는지 확인하는 방법 AWS S3 Node.JS SDK (0) | 2021.01.14 |
Python의 단일 요소 목록에서 요소 만 가져 오나요? (0) | 2021.01.14 |
순환 가져 오기가없는 Python 유형 힌트 (0) | 2021.01.14 |
Rxjs : Observable.combineLatest 대 Observable.forkJoin (0) | 2021.01.14 |