web-dev-qa-db-fra.com

Est-il possible d'utiliser AngularJS avec le moteur de modèle Jinja2?

J'ai un site Flask et je veux utiliser le framework JavaScript AngularJS. Malheureusement, il semble que les délimiteurs se chevauchent.

Comment utiliser Angular avec Jinja2 si les deux s'appuient sur des accolades doubles ({{ expr }})? Est-ce même possible?

pythonangularjsflaskjinja2delimiter
54
user559633

Vous avez quelques options.

1) Modifiez la notation du délimiteur pour Angular:

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

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

Tout ce qui est choisi pour les symboles de début et de fin fera office de nouveaux délimiteurs. Dans ce cas, vous exprimeriez une variable à Angular using {a some_variable a}.

Cette approche a l'avantage de ne devoir être définie qu'une seule fois et d'être explicite.

2) Modifiez la notation du délimiteur pour Jinja2.

Remplacer ou sous-classe Flask.jinja_options.update sur l'objet Flask que vous liez à votre application (variables pertinentes: 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

Comme il y a un risque plus élevé que les données sensibles ne soient pas développées du côté serveur, je suggère plutôt de modifier la syntaxe sur le front-end (c'est-à-dire angulaire) sur tout projet dans lequel vous n'êtes pas le seul développeur.

3) Sortez un bloc brut dans Jinja2 en utilisant {% raw %} ou {% verbatim %}:

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

4) Utilisez Jinja2 pour écrire les accolades dans le modèle:

{{ '{{ some_var }}' }}

ce sera sorti comme {{ some_var }} dans le HTML.

Ma préférence pour l'approche n ° 1 est apparente, mais tout ce qui précède fonctionnera.

93
user559633

Il existe également une autre option: flask-triangle est une extension pour vous aider à créer des formulaires tout en intégrant angular templating in jinja2. Au lieu de changer le délimiteur angulaire (ou jinja2)), vous pouvez simplement ajouter un identifiant pour indiquer à jinja2 si l'expression doit être rendue sous la forme d'un angular un. Ajoutez simplement |angular après votre variable:

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

Qui sera rendu dans la sortie HTML comme:

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

Veuillez noter que flask-triangle est également livré avec d'autres fonctionnalités (pour créer des formulaires dans le style angular), mais je pense que cela pourrait être une option intéressante pour faire angular templating in jinja2 more readable.

5
steel00