Dans le développement Web, il existe de nombreux outils parmi lesquels les développeurs peuvent choisir. Choisir les bons outils et technologies peut avoir un impact significatif sur l’efficacité et la fonctionnalité des projets. L'un des outils les plus populaires en matière de développement Web est EJS, qui signifie Embedded Javascript . EJS est un langage de création de modèles JavaScript simple qui génère HTML avec du JavaScript simple. Dans cet article, nous expliquerons ce qu'est EJS, pourquoi il est nécessaire, ses fonctionnalités, comment l'installer et fournirons un exemple de sortie.
objet Java
Qu'est-ce qu'EJS
EJS ou Embedded JavaScript est un moteur de modèles pour JavaScript utilisé pour le développement Web qui permet aux utilisateurs de générer un balisage HTML dynamique à l'aide de code JavaScript dans des modèles HTML. Il est conçu pour simplifier le processus de rendu de contenu dynamique dans les applications Web. Il contient un mélange de HTML et de JavaScript qui facilite la génération de contenu dynamique basé sur les données de votre application.
Caractéristiques d'EJS
- Syntaxe simple : EJS propose une syntaxe simple qui combine HTML et JavaScript, ce qui la rend facile à apprendre et à utiliser.
- Contenu dynamique : EJS permet la génération dynamique de contenu HTML et JavaScript au sein de balises HTML, améliorant ainsi la flexibilité dans la création de contenu.
- Mise en page et partiels : EJS prend en charge les mises en page et les partiels, permettant aux utilisateurs de diviser les modèles en composants réutilisables, réduisant ainsi la duplication de code et améliorant la maintenabilité.
- La gestion des erreurs: EJS fournit des messages d'erreur qui aident les développeurs à déboguer, améliorant ainsi l'expérience globale de développement.
Pourquoi avez-vous besoin d’EJS ?
- Génération HTML dynamique : EJS vous permet de générer du contenu HTML dynamique basé sur des variables, des conditions, des boucles et d'autres logiques JavaScript. Ceci est particulièrement utile pour restituer des données dynamiques extraites de bases de données ou d'API.
- Réutilisabilité du code : En utilisant des modèles EJS, vous pouvez créer des composants ou des partiels réutilisables pouvant être inclus dans plusieurs pages. Cela favorise la modularité du code et réduit la duplication dans vos applications Web.
- Rendu côté serveur : Avec EJS, vous pouvez effectuer un rendu côté serveur (SSR) de pages Web. Le SSR est bénéfique pour le référencement (Search Engine Optimization) car il permet aux moteurs de recherche d'explorer et d'indexer votre contenu plus efficacement par rapport au rendu côté client (CSR) effectué par des frameworks comme React ou Angular.
- Intégration facile avec Node.js et Express.js : EJS s'intègre parfaitement à Node.js et Express.js, ce qui en fait un choix populaire pour les développeurs travaillant sur des applications JavaScript côté serveur. Il est facile à configurer et à utiliser dans un projet Express.js.
- Syntaxe familière : Si vous êtes déjà familier avec HTML et JavaScript, apprendre et utiliser EJS est simple. La syntaxe est similaire au HTML avec du code JavaScript intégré entre
>balises, le rendant accessible aux développeurs de différents niveaux de compétence. - Héritage et mises en page des modèles : EJS prend en charge l'héritage de modèles et les mises en page, vous permettant de créer des mises en page cohérentes pour vos pages Web. Vous pouvez définir une présentation de base et l'étendre dans d'autres modèles, ce qui facilite le maintien d'une apparence cohérente dans votre application.
Comment utiliser EJS ?
Étape 1: Installez EJS en tant que dépendance dans votre projet
npm install ejs>
Étape 2: Créez un dossier « vues » dans le répertoire de votre projet s'il n'existe pas déjà. Dans le dossier vues, créez un nouveau fichier avec une extension .ejs, par exemple, index.ejs
Étape 3: Pour intégrer EJS à Express dans une application Express.js, définissez EJS comme moteur d'affichage dans la configuration de votre application Express. Cette configuration permet à Express d'utiliser EJS pour le rendu des vues.
app.set('view engine', 'ejs');>Étape 4: Rendu du modèle EJS. Dans vos gestionnaires de routes Express, nous rendons le modèle EJS en utilisant 'res.render()' et fournissez les données nécessaires à transmettre au modèle.
res.render('hello', { name: 'Geeks' });>Structure du projet :
trier le tableau java
Les dépendances mises à jour dans package.json le fichier ressemblera à :
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Exemple: Implémentation pour présenter l'utilisation des ejs avec un exemple.
HTML Exemple de titre EJS> tête> <body> <h1>Bonjour,<%= name %>!h1> corps> html>></pre> </code>Javascript<code class='hljs'> <pre class='hljs'>// index.js const express = require('express'); const app = express(); const port = 3000; app.set('view engine', 'ejs'); app.get('/', (req, res) =>{ res.render('bonjour', { nom : 'Geeks' }); }); app.listen(port, () => { console.log(`Le serveur s'exécute sur http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Étape pour exécuter l'application :</strong> </b> <span>Exécutez l'application à l'aide de la commande suivante à partir du répertoire racine du projet</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Sortir:</strong> </b> <span>Votre projet sera affiché dans l'URL http://localhost:3000/</span></p><blockquote style="text-transform: capitalize;font-size: 20px; padding: 10px;"><a href="/how-compare-two-objects-java">égalité des objets Java</a>
</blockquote> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="sortir"></p> <br> <br></article><div class="rekl_placeholder"><script type="text/javascript">atOptions = {'key' : 'f2b09f3e7178b263531e10998e9a32fa','format' : 'iframe','height' : 250,'width' : 300,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f2b09f3e7178b263531e10998e9a32fa/invoke.js"></script></div> </article>
</div><!--//content-->
</div><!--//section-inner-->
</section><!--//section-->
</div><!--//primary-->
<div class="secondary col-md-4 col-sm-12 col-xs-12">
<aside class="info aside section">
<div class="section-inner">
<h2 class="">Catégorie</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/net-framework/">Cadre .Net</a> </li><li> <a href="/kali-linux/">Kali-Linux</a> </li><li> <a href="/big-endian/">Gros Boutien</a> </li><li> <a href="/bit-magic/">Peu de magie</a> </li><li> <a href="/java-abstract-class/">Classe Et Interface Abstraites Java</a> </li><li> <a href="/dijkstra/">Dijkstra</a> </li><li> <a href="/chemistry-class-10-cat/">Chimie-Classe-10</a> </li><li> <a href="/movie-reviews/">Critiques De Films</a> </li><li> <a href="/t-sql-tutorial/">Tutoriel T-Sql</a> </li><li> <a href="/top-10-list-world/">Liste Des 10 Meilleurs – Monde</a> </li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//aside-->
<aside class="testimonials aside section">
<div class="section-inner">
<div class="content">
<div class="item">
<div class="rekl_placeholder" id="sidebar_placeholder_1"> <script type="text/javascript">atOptions = {'key' : 'f53f1abf3c3a788f849c12a956865db1','format' : 'iframe','height' : 300,'width' : 160,'params' : {}};</script><script type="text/javascript" src="//spiritscaution.com/f53f1abf3c3a788f849c12a956865db1/invoke.js"></script> <br></div>
</div>
</div>
</div>
<div class="section-inner">
<h2 class="heading">Qu’est-ce que Dom dans React ?</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Qu'est-ce que Dom dans React avec le didacticiel ReactJS, introduction à ReactJS, fonctionnalités de ReactJS, installation de ReactJS, avantages et inconvénients de ReactJS, Reactnative vs ReactJS, routeur ReactJS, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/what-is-dom-react"> <i class="fa fa-external-link"></i> Lire La Suite</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Des Articles Intéressants</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/exactly-what-expect-from-ap-language-multiple-choice-131798">Exactement à quoi s'attendre du choix multiple du langage AP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/http">HTTP</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/good-sat-scores-ivy-league-plus-edition-1311530">Bons scores SAT : édition Ivy League Plus</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/easy-guide-30-60-90-triangle-13118">Le guide facile du triangle 30-60-90</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/counters-in-python-set-2-accessing-counters">Compteurs en Python | Ensemble 2 (accès aux compteurs)</a> </strong> </span>
</li><!--//item-->
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="list music aside section">
<div class="section-inner">
<h2 class="heading">Articles Populaires</h2>
<div class="content">
<ul class="list"> <li><a href="/java-convert-string-int">Java convertit la chaîne en int</a>
</li><li><a href="/kat-timpf">combien pèse Kat Timpf</a>
</li><li><a href="/android-intent-tutorial">intention intention</a>
</li><li><a href="/mvc-architecture-java">mvc avec java</a>
</li><li><a href="/uninstall-reinstall-angular-cli">désinstaller le CLI angulaire</a>
</li>
</ul>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
</div><!--//secondary-->
</div><!--//row-->
</div><!--//masonry-->
<footer class="footer">
<div class="container text-center">
<span>
Copyright ©2025 Tous Les Droits Sont Réservés | <a href="//ro.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Clause De Non-Responsabilité</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">A Propos De Nous</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politique De Confidentialité</a> </span>
</div>
</footer>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/plugins/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://techcodeview.com/template/assets/js/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/11.5.1/highlight.min.js"></script>
</body>
</html>