能否在Jinja2模板引擎中使用AngularJS？

Question

我有一个使用Flask构建的网站，想要使用AngularJS JavaScript框架。不幸的是，这两个框架的分隔符重叠了。

如果在Jinja2中和Angular都使用双花括号({{ expr }})，那么如何使用Angular？这是否可能？

- user559633

Answer 1

你有一些选项。

1）更改Angular的分隔符表示法：

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

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

无论选择什么作为起始和结束符号，都将充当新的分隔符。在这种情况下，您可以使用{a some_variable a}将变量传递给Angular。

这种方法的优点是只需要设置一次并且明确。

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

由于从服务器端返回的敏感数据可能未经扩展，因此我建议在任何你不是唯一开发人员的项目中，改变前端（即Angular）的语法。

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

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

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

{{ '{{ some_var }}' }}

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

我更偏向于方法1，但以上任何一种都可以使用。

- user559633

Answer 2

还有另一种选择：flask-triangle是一个扩展，帮助您在集成angular模板到jinja2的同时构建表单。您可以简单地添加一个标识符，告诉jinja2是否应该将表达式呈现为angular表达式，而无需更改angular（或jinja2）括号分隔符。只需在变量后面添加|angular即可：

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

这将在HTML输出中呈现为：

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

请注意，flask-triangle还具有其他功能（用于在Angular样式中构建表单），但我认为它可能是使jinja2中的angular模板更易读的有价值选项。

- steel00