Подтвердить что ты не робот

Можно ли использовать AngularJS с движком шаблонов Jinja2?

У меня есть сайт Flask, и я хочу использовать JavaScript-фреймворк AngularJS. К сожалению, кажется, что разделители перекрываются.

Как использовать Angular с Jinja2, если оба используют двойные фигурные скобки ({{ expr }})? Это вообще возможно?

4b9b3361

Ответ 1

У вас есть несколько вариантов.

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 очевидно, но любой из вышеперечисленных подойдет.

Ответ 2

Существует и еще один вариант: флажок-треугольник - это расширение, которое поможет вам создавать формы при интеграции шаблонов angular в jinja2. Вместо изменения разделителя скобок angular (или jinja2) вы можете просто добавить идентификатор, чтобы сообщить jinja2, если выражение должно отображаться как angular. Просто добавьте |angular после вашей переменной:

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

Что будет отображаться на выходе HTML как:

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

Обратите внимание: флажок-треугольник также поставляется с другими функциями (для создания форм в стиле angular), однако я думаю, что это может быть ценным вариантом сделать шаблоны angular в jinja2 более читабельными.