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

问题描述：

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

如果两者都依赖双花括号 ( {{ expr }})，我该如何将 Angular 与 Jinja2 一起使用？这可能吗？

解决方案 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_stringblock_end_stringvariable_start_stringvariable_end_stringcomment_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：

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

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

HTML 输出结果将呈现为：

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

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