可以将AngularJS与Jinja2模板引擎一起使用吗？

Question

我有一个Flask站点，我想使用AngularJS JavaScript框架。不幸的是，分隔符似乎重叠了。

如果Jinja2都依赖于双花括号（{{ expr }}），那么如何使用Angular与Jinja2？有可能吗？

Answer 1

你有一些选择。

1）更改角度的分隔符号：

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

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

无论为开始符号和结束符号选择什么，都将充当新的分隔符。在这种情况下，可以使用{a some_variable a}将变量表示为角度。

这种方法的优点是只需要设置一次，而且非常明确。

2）更改Jinja2的分隔符符号。

在绑定到应用程序的Flask对象上重写或子类Flask.jinja_options.update（相关变量：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

由于敏感数据从服务器端不扩展的风险更高，我建议在您不是唯一开发人员的任何项目中更改前端（即角度）的语法。

3）输出a raw block在Jinja2中使用{% raw %}或{% verbatim %}：

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

4）使用Jinja2在模板中编写花括号：

{{ '{{ some_var }}' }}

这将在HTML中作为{{ some_var }}输出。

我对方法1的偏好是显而易见的，但上述任何一种都会起作用。

Answer 2

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

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

将在HTML输出中呈现为：

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

请注意，烧瓶三角形还具有其他特性（用于角样式的建筑形式），但是我认为这可能是一个有价值的选择，使jinja2中的角模板更具可读性。