Node.js - 6.12 Utiliser EJS comme moteur de vues

EJS est un moteur de modèles qui mélange du HTML normal et du JavaScript. Express sait l'utiliser sans enregistrement particulier, ce qui le rend simple à mettre en place. Cette leçon montre sa syntaxe pour afficher une valeur, une condition et une boucle.

Activer EJS

Pour utiliser EJS, il suffit de définir le moteur de vues sur ejs. Le paquet ejs doit tout de même être installé avec npm, car il n'est pas inclus dans Express. Il n'est pas nécessaire de l'enregistrer avec app.engine().

app.set('view engine', 'ejs');

Afficher une valeur et une condition

Une valeur s'affiche avec la balise <%= suivie de la valeur, puis %>. Une instruction JavaScript, comme un if, s'écrit entre des balises <% et %>. Elle n'affiche rien par elle-même, elle contrôle ce qui est affiché.

Dans cet exemple, la liste des produits s'affiche seulement si elle contient au moins un élément. Sinon, un message le signale.

<h1><%= pageTitle %></h1>
<% if (prods.length > 0) { %>
  <!-- la liste des produits s'affiche ici -->
<% } else { %>
  <p>Pas de produit</p>
<% } %>

Parcourir un tableau

Le tableau de produits est transmis à la vue sous la clé prods. Une boucle for...of, écrite entre des balises EJS, affiche chaque produit. Dans la boucle, le titre de chaque produit s'affiche avec <%= et product.title.

<% for (const product of prods) { %>
  <p><%= product.title %></p>
<% } %>

En résumé

EJS mélange du HTML et du JavaScript grâce aux balises <% et %>. La balise <%= affiche une valeur, alors que les conditions et les boucles s'écrivent en JavaScript normal. La vidéo indique qu'EJS ne prend pas en charge les mises en page.

Points clés

• <%= valeur %> affiche une valeur dans le HTML.
• <% code %> exécute du JavaScript sans afficher son résultat.
• Une condition if s'écrit en JavaScript normal entre deux balises EJS.
• Une boucle for...of affiche chaque élément d'un tableau.
• Selon la vidéo, EJS ne prend pas en charge les mises en page.

Questions fréquentes

Quelle est la différence entre <%= et <% ?

<%= affiche le résultat dans la page. <% exécute du code sans l'afficher, comme une condition ou une boucle.

Pourquoi choisir EJS plutôt que Pug ou Handlebars ?

EJS garde du HTML normal et laisse écrire du JavaScript. La vidéo le préfère pour cette raison, mais chaque moteur reste valable.

D'où viennent les valeurs affichées ?

Elles viennent de l'objet transmis avec render(). Chaque clé, comme prods ou pageTitle, devient une variable utilisable dans la vue.