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

Question

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

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

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.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）使用raw block或{% raw %}输出Jinja2中的{% 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>

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