Có thể sử dụng Angular với công cụ mẫu Jinja2 không?

Question

Tôi có trang web Flask và tôi muốn sử dụng khung JavaScript Angular. Thật không may, nó có vẻ như là các dấu phân cách trùng lặp.

Làm cách nào để sử dụng Angular với Jinja2 nếu cả hai đều dựa vào hai dấu ngoặc nhọn ({{ expr }})? Thậm chí có thể không?

Answer 1

Bạn có một số tùy chọn.

1) Thay đổi ký hiệu delimiter cho góc:

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

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

Dù được chọn cho sự bắt đầu và kết thúc những biểu tượng sẽ hoạt động như delimiters mới. Trong trường hợp này, bạn sẽ biểu diễn một biến cho Angular bằng cách sử dụng {a some_variable a}.

Cách tiếp cận này có lợi thế là chỉ cần được thiết lập một lần và là rõ ràng.

2) Thay đổi ký hiệu delimiter cho Jinja2.

Override hoặc lớp con Flask.jinja_options.update trên đối tượng Flask mà bạn liên kết với ứng dụng của bạn (vars liên quan: 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 

Như có một nguy cơ cao của dữ liệu nhạy cảm sắp được mở rộng từ phía máy chủ, tôi đề xuất thay vì thay đổi cú pháp trên giao diện người dùng (tức là Góc) trên bất kỳ dự án nào mà bạn không phải là nhà phát triển duy nhất.

3) Output một raw block trong Jinja2 sử dụng {% raw %} hoặc {% verbatim %}:

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

4) Sử dụng Jinja2 để viết dấu ngoặc nhọn trong mẫu:

{{ '{{ some_var }}' }} 

này sẽ được xuất ra như {{ some_var }} trong HTML.

sở thích của tôi cho cách tiếp cận # 1 là rõ ràng, nhưng bất kỳ ở trên sẽ làm việc.

Answer 2

Ngoài ra còn có một tùy chọn khác: bình tam giác là phần mở rộng giúp bạn tạo biểu mẫu trong khi tích hợp ghép khuôn mẫu ở jinja2. Thay vì thay đổi dấu ngoặc đơn góc (hoặc jinja2), bạn có thể chỉ cần thêm một số nhận dạng để cho jinja2 biết nếu biểu thức phải được hiển thị dưới dạng một góc cạnh. Chỉ cần thêm |angular sau biến của bạn:

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

Mà sẽ được trả lại trong đầu ra HTML như:

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

Xin lưu ý rằng bình-tam giác cũng đi kèm với các tính năng khác (cho các hình thức xây dựng trong góc phong cách), tuy nhiên tôi nghĩ rằng nó có thể là một lựa chọn có giá trị để làm cho khuôn mẫu góc trong jinja2 dễ đọc hơn.