【问题标题】:Is it possible to use AngularJS with the Jinja2 template engine?是否可以将 AngularJS 与 Jinja2 模板引擎一起使用?
【发布时间】:2015-08-02 11:37:33
【问题描述】:

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

如果都依赖双花括号 ({{ expr }}),我如何将 Angular 与 Jinja2 一起使用?有没有可能?

【问题讨论】:

    标签: python angularjs flask jinja2 delimiter


    【解决方案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_stringblock_end_stringvariable_start_stringvariable_end_stringcomment_start_stringcomment_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 在 Jinja2 中使用 {% raw %}{% verbatim %}:

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

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

    {{ '{{ some_var }}' }}
    

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

    我对方法 1 的偏好很明显,但上述任何方法都可以。

    【讨论】:

      【解决方案2】:

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

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

      将在 HTML 输出中呈现为:

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

      请注意 flask-triangle 还带有其他功能(用于构建 angular 样式的表单),但是我认为它可能是一个有价值的选择,可以使 jinja2 中的 angular 模板更具可读性。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2013-01-15
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2016-08-11
        • 2017-02-15
        • 1970-01-01
        • 1970-01-01
        相关资源
        最近更新 更多