是否可以将Angular与Jinja2模板引擎一起使用？

Question

我有一个Flask站点,我想使用Angular JavaScript框架.不幸的是,似乎分隔符重叠.

如果两者都依赖于双花括号({{ expr }}),我如何使用Angular和Jinja2 ？它甚至可能吗？

Answer 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的偏好是显而易见的,但上述任何一种都可行.

Answer 2

还有另一种选择：flask-triangle是一个扩展，可帮助您在将角度模板集成到jinja2中的同时构建表单。无需更改尖括号（或jinja2）的定界符，只需添加一个标识符即可告诉jinja2是否必须将表达式呈现为尖括号。只需|angular在变量之后添加：

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

它将在HTML输出中呈现为：

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

请注意，flask-triangle 也具有其他功能（用于以角度样式构建表单），但是我认为这可能是使jinja2中的角度模板更具可读性的有价值的选择。