¿Es posible utilizar AngularJS con el motor de plantillas Jinja2?

Tengo un sitio de Flask y quiero usar el framework de JavaScript AngularJS. Desafortunadamente, parece que los delimitadores se superponen.

¿Cómo uso Angular con Jinja2 si ambos se basan en llaves dobles ( {{ expr }} )? ¿Es incluso posible?

Tienes algunas opciones.

1) Cambie la notación del delimitador para Angular:

 var app = angular.module('Application', []); app.config(['$interpolateProvider', function($interpolateProvider) { $interpolateProvider.startSymbol('{a'); $interpolateProvider.endSymbol('a}'); }]); 

Lo que se elija para los símbolos de inicio y fin actuará como los nuevos delimitadores. En este caso, expressía una variable a Angular utilizando {a some_variable a} .

Este enfoque tiene la ventaja de que solo se necesita establecer una vez y ser explícito.

2) Cambiar la notación delimitador para Jinja2.

Flask.jinja_options.update o subclase Flask.jinja_options.update en el objeto Flask que vincule a su aplicación (vars relevantes: 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 

Como hay un mayor riesgo de que los datos confidenciales no se expandan desde el lado del servidor, sugiero que, en cambio, cambie la syntax en el front-end (es decir, Angular) en cualquier proyecto en el que no sea el único desarrollador.

3) Genere un bloque en bruto en Jinja2 utilizando {% raw %} o {% verbatim %} :

 
    {% raw %} {% for item in seq %}
  • {{ some_var }}
  • {% endfor %} {% endraw %}

4) Usa Jinja2 para escribir las llaves en la plantilla:

 {{ '{{ some_var }}' }} 

esto se mostrará como {{ some_var }} en el HTML.

Mi preferencia por el enfoque # 1 es aparente, pero cualquiera de los anteriores funcionará.

También hay otra opción: flask-triangle es una extensión para ayudarte a construir formas mientras integras las plantillas angulares en jinja2. En lugar de cambiar el delimitador de corchete angular (o jinja2), simplemente puede agregar un identificador para indicar a jinja2 si la expresión tiene que representarse como angular. Solo agregue |angular después de su variable:

 
{{variable|angular}}

Que se representará en la salida HTML como:

 
{{variable}}

Tenga en cuenta que el flask-triángulo también viene con otras características (para construir formas en estilo angular), sin embargo, creo que podría ser una opción valiosa para hacer que las plantillas de angularjs en jinja2 sean más legibles.