Comment utiliser EJS pour modéliser votre application Node

Introduction

Lors de la création rapide d’applications Node, il est parfois nécessaire de disposer d’un moyen rapide de modéliser votre application.

Jade est le moteur de modèle par défaut pour Express, mais la syntaxe Jade peut être trop complexe pour de nombreux cas d’utilisation.

Les modèles JavaScript intégrés (EJS) peuvent être utilisés comme moteur de modèle alternatif.

Dans cet article, vous apprendrez à appliquer EJS à une application Express, à inclure des parties répétables de votre site et à transmettre des données aux vues.

Prérequis

Si vous souhaitez suivre cet article, vous aurez besoin de :

• A local development environment for Node.js. Follow How to Install Node.js and Create a Local Development Environment.

Ce tutoriel a été initialement rédigé pour express v4.17.1 et ejs v3.1.5. Il a été vérifié avec Node v16.0.0, npm v7.11.1, express v4.17.1, et ejs v3.1.6.

Étape 1 — Configuration du projet

Tout d’abord, ouvrez votre fenêtre de terminal et créez un nouveau répertoire de projet :

mkdir ejs-demo

Ensuite, accédez au répertoire nouvellement créé :

cd ejs-demo

À ce stade, vous pouvez initialiser un nouveau projet npm :

npm init -y

Ensuite, vous devrez installer le paquet express :

npm install express@4.17.1

Ensuite, installez le paquet ejs :

npm install ejs@3.1.6

À ce stade, vous disposez d’un nouveau projet prêt à utiliser Express et EJS.

Étape 1 — Configuration avec server.js

Avec toutes les dépendances installées, configurons l’application pour utiliser EJS et mettons en place les routes pour la page Index et la page À propos.

Créez un nouveau fichier server.js et ouvrez-le avec votre éditeur de code, puis ajoutez les lignes de code suivantes :

var express = require('express');
var app = express();

// définir le moteur de vue sur ejs
app.set('view engine', 'ejs');

// utiliser res.render pour charger un fichier de vue ejs

// page d'index
app.get('/', function(req, res) {
  res.render('pages/index');
});

// page à propos
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Ce code définit l’application et écoute sur le port 8080.

Ce code définit également EJS comme moteur de vue pour l’application Express en utilisant :

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

Remarquez comment le code envoie une vue à l’utilisateur en utilisant res.render(). Il est important de noter que res.render() recherchera un dossier views pour la vue. Ainsi, vous n’avez qu’à définir pages/index puisque le chemin complet est views/pages/index.

Ensuite, vous créerez les vues en utilisant EJS.

Étape 2 — Création des Partials EJS

Comme beaucoup des applications que vous construisez, il y aura beaucoup de code qui est réutilisé. Ceux-ci sont considérés comme des partials. Dans cet exemple, il y aura trois partials qui seront réutilisés sur la page d’index et la page à propos : head.ejs, header.ejs, et footer.ejs. Créons ces fichiers maintenant.

Créez un nouveau répertoire views:

mkdir views

Ensuite, créez un nouveau sous-répertoire partials:

mkdir views/partials

Dans ce répertoire, créez un nouveau fichier head.ejs et ouvrez-le avec votre éditeur de code. Ajoutez les lignes de code suivantes :

<meta charset="UTF-8">
<title>EJS Is Fun</title>

<!-- CSS (load bootstrap from a CDN) -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css">
<style>
  body { padding-top:50px; }
</style>

Ce code contient des métadonnées pour l’en-tête d’un document HTML. Il inclut également les styles Bootstrap.

Ensuite, créez un nouveau fichier header.ejs et ouvrez-le avec votre éditeur de code. Ajoutez les lignes de code suivantes :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="/">EJS Is Fun</a>
  <ul class="navbar-nav mr-auto">
    <li class="nav-item">
      <a class="nav-link" href="/">Home</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="/about">About</a>
    </li>
  </ul>
</nav>

Ce code contient la navigation pour un document HTML et utilise plusieurs classes de Bootstrap pour le style.

Ensuite, créez un nouveau fichier footer.ejs et ouvrez-le avec votre éditeur de code. Ajoutez les lignes de code suivantes :

<p class="text-center text-muted">&copy; Copyright 2020 The Awesome People</p>

Ce code contient les informations de copyright et utilise plusieurs classes de Bootstrap pour le style.

Ensuite, vous utiliserez ces partiaux dans les fichiers index.ejs et about.ejs.

Étape 3 — Ajout des partiaux EJS aux vues

Vous avez trois partiaux définis. Maintenant, vous pouvez les inclure dans vos vues.

Utilisez <%- include('CHEMIN/RELATIF/VERS/LE/FICHIER') %> pour incorporer un partiel EJS dans un autre fichier.

• Le trait d’union <%- au lieu de simplement <% indique à EJS de rendre le HTML brut.
• Le chemin vers le partiel est relatif au fichier actuel.

Ensuite, créez un nouveau sous-répertoire pages:

mkdir views/pages

Dans ce répertoire, créez un nouveau fichier index.ejs et ouvrez-le avec votre éditeur de code. Ajoutez les lignes de code suivantes:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Enregistrez les modifications apportées à ce fichier, puis exécutez l’application:

node server.js

Si vous visitez http://localhost:8080/ dans un navigateur Web, vous pouvez observer la page d’index:

Ensuite, créez un nouveau fichier about.ejs et ouvrez-le avec votre éditeur de code. Ajoutez les lignes de code suivantes:

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
<div class="row">
  <div class="col-sm-8">
    <div class="jumbotron">
      <h1>This is great</h1>
      <p>Welcome to templating using EJS</p>
    </div>
  </div>

  <div class="col-sm-4">
    <div class="well">
      <h3>Look I'm A Sidebar!</h3>
    </div>
  </div>
</div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Ce code ajoute une barre latérale Bootstrap pour démontrer comment les partiaux peuvent être structurés pour être réutilisés sur différentes templates et pages.

Enregistrez les modifications apportées à ce fichier, puis exécutez l’application:

node server.js

Si vous visitez http://localhost:8080/about dans un navigateur Web, vous pouvez observer la page À propos avec une barre latérale:

Maintenant, vous pouvez commencer à utiliser EJS pour transmettre des données de l’application Node aux vues.

Étape 4 — Transmettre des données aux vues et aux partiaux

Définissons quelques variables de base et une liste à transmettre à la page d’index.

Revisitez server.js dans votre éditeur de code et ajoutez les lignes de code suivantes à l’intérieur de la route app.get('/'):

var express = require('express');
var app = express();

// définir le moteur de vue sur ejs
app.set('view engine', 'ejs');

// utiliser res.render pour charger un fichier de vue ejs

// page d'index
app.get('/', function(req, res) {
  var mascots = [
    { name: 'Sammy', organization: "DigitalOcean", birth_year: 2012},
    { name: 'Tux', organization: "Linux", birth_year: 1996},
    { name: 'Moby Dock', organization: "Docker", birth_year: 2013}
  ];
  var tagline = "No programming concept is complete without a cute animal mascot.";

  res.render('pages/index', {
    mascots: mascots,
    tagline: tagline
  });
});

// page à propos
app.get('/about', function(req, res) {
  res.render('pages/about');
});

app.listen(8080);
console.log('Server is listening on port 8080');

Ce code définit un tableau appelé mascots et une chaîne appelée tagline. Ensuite, utilisons-les dans index.ejs.

Rendu d’une seule variable en EJS

Pour afficher une seule variable, vous pouvez utiliser <%= tagline %>.

Revisitez index.ejs dans votre éditeur de code et ajoutez les lignes de code suivantes :

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Ce code affichera la valeur de tagline sur la page d’index.

Boucler sur les données en EJS

Pour boucler sur des données, vous pouvez utiliser .forEach.

Revisitez index.ejs dans votre éditeur de code et ajoutez les lignes de code suivantes :

<!DOCTYPE html>
<html lang="en">
<head>
  <%- include('../partials/head'); %>
</head>
<body class="container">

<header>
  <%- include('../partials/header'); %>
</header>

<main>
  <div class="jumbotron">
    <h1>This is great</h1>
    <p>Welcome to templating using EJS</p>

    <h2>Variable</h2>
    <p><%= tagline %></p>

    <ul>
      <% mascots.forEach(function(mascot) { %>
        <li>
          <strong><%= mascot.name %></strong>
          representing <%= mascot.organization %>,
          born <%= mascot.birth_year %>
        </li>
      <% }); %>
    </ul>
  </div>
</main>

<footer>
  <%- include('../partials/footer'); %>
</footer>

</body>
</html>

Enregistrez les modifications apportées à ce fichier, puis exécutez l’application :

node server.js

Si vous visitez http://localhost:8080/ dans un navigateur web, vous pouvez observer la page d’index avec les mascots:

Transfert de données à une partie en EJS

La partie EJS a accès à toutes les mêmes données que la vue parente. Mais faites attention. Si vous faites référence à une variable dans une partie, elle doit être définie dans chaque vue qui utilise la partie sinon une erreur sera déclenchée.

Vous pouvez également définir et passer des variables à une partie EJS dans la syntaxe d’inclusion comme ceci :

...
<header>
  <%- include('../partials/header', {variant: 'compact'}); %>
</header>
...

Mais vous devez encore faire attention à supposer qu’une variable a été définie.

Si vous souhaitez faire référence à une variable dans une partie qui peut ne pas toujours être définie, et lui donner une valeur par défaut, vous pouvez le faire comme ceci :

...
<em>Variant: <%= typeof variant != 'undefined' ? variant : 'default' %></em>
...

Dans la ligne ci-dessus, le code EJS rend la valeur de variant si elle est définie, et default sinon.

Conclusion

Dans cet article, vous avez appris comment appliquer EJS à une application Express, inclure des parties répétables de votre site et transmettre des données aux vues.

EJS vous permet de construire des applications lorsque vous ne nécessitez pas de complexité supplémentaire. En utilisant des partages et en ayant la capacité de transmettre facilement des variables à vos vues, vous pouvez rapidement construire de superbes applications.

Consultez la documentation d’EJS pour des informations supplémentaires sur les fonctionnalités et la syntaxe. Consultez Comparaison des moteurs de modèle JavaScript : Jade, Mustache, Dust et plus pour comprendre les avantages et les inconvénients des différents moteurs de vue.