En desenvolupament web, hi ha moltes eines disponibles per als desenvolupadors per triar. L'elecció de les eines i tecnologies adequades pot tenir un impacte significatiu en l'eficiència i la funcionalitat dels projectes. Una de les eines més populars en el desenvolupament web és EJS, que significa Embedded JavaScript . EJS és un llenguatge de plantilles JavaScript senzill que genera HTML amb JavaScript senzill. En aquest article, tractarem què és EJS, per què es necessita, les seves característiques, com instal·lar-lo i proporcionarem un exemple amb la sortida.
Què és EJS
EJS o Embedded JavaScript és un motor de plantilles per a JavaScript que s'utilitza per al desenvolupament web que permet als usuaris generar marques HTML dinàmiques mitjançant codi JavaScript dins de plantilles HTML. Està dissenyat per simplificar el procés de representació de contingut dinàmic en aplicacions web. Conté una barreja d'HTML i JavaScript que facilita la generació de contingut dinàmic basat en les dades de la vostra aplicació.
Característiques d'EJS
- Sintaxi simple: EJS ofereix una sintaxi senzilla que combina HTML i JavaScript, de manera que és fàcil d'aprendre i utilitzar.
- Contingut dinàmic: EJS permet la generació de contingut HTML i JavaScript de manera dinàmica dins de les etiquetes HTML, millorant la flexibilitat en la creació de contingut.
- Disseny i parcials: EJS admet dissenys i parcials, cosa que permet als usuaris dividir les plantilles en components reutilitzables, reduint la duplicació de codi i millorant el manteniment.
- Gestió d'errors: EJS proporciona missatges d'error que ajuden els desenvolupadors a depurar, millorant l'experiència general de desenvolupament.
Per què necessiteu EJS?
- Generació HTML dinàmica: EJS us permet generar contingut HTML dinàmic basat en variables, condicions, bucles i altres lògiques de JavaScript. Això és especialment útil per representar dades dinàmiques obtingudes de bases de dades o API.
- Reutilitzabilitat del codi: Mitjançant l'ús de plantilles EJS, podeu crear components o parcials reutilitzables que es poden incloure en diverses pàgines. Això promou la modularitat del codi i redueix la duplicació a les vostres aplicacions web.
- Representació del costat del servidor: Amb EJS, podeu realitzar la representació del costat del servidor (SSR) de pàgines web. SSR és beneficiós per a SEO (Search Engine Optimization), ja que permet als motors de cerca rastrejar i indexar el vostre contingut de manera més eficaç en comparació amb la representació del costat del client (CSR) feta per marcs com React o Angular.
- Fàcil integració amb Node.js i Express.js: EJS s'integra perfectament amb Node.js i Express.js, cosa que la converteix en una opció popular per als desenvolupadors que treballen en aplicacions JavaScript del servidor. És fàcil de configurar i utilitzar dins d'un projecte Express.js.
- Sintaxi familiar: Si ja esteu familiaritzat amb HTML i JavaScript, aprendre i utilitzar EJS és senzill. La sintaxi és similar a l'HTML amb codi JavaScript incrustat inclòs
>etiquetes, fent-lo accessible per a desenvolupadors de diferents nivells d'habilitat. - Herència de plantilles i dissenys: EJS admet l'herència i els dissenys de plantilles, cosa que us permet crear dissenys coherents per a les vostres pàgines web. Podeu definir un disseny base i ampliar-lo en altres plantilles, de manera que sigui més fàcil mantenir una aparença coherent a tota la vostra aplicació.
Com utilitzar EJS?
Pas 1: Instal·leu EJS com a dependència al vostre projecte
npm install ejs>
Pas 2: Creeu una carpeta 'vistes' al directori del vostre projecte si encara no existeix. Dins de la carpeta de visualitzacions, creeu un fitxer nou amb una extensió .ejs, per exemple, index.ejs
Pas 3: Per integrar EJS amb Express en una aplicació Express.js, configureu EJS com a motor de visualització a la configuració de l'aplicació Express. Aquesta configuració permet que Express utilitzi EJS per representar vistes.
app.set('view engine', 'ejs');>Pas 4: Renderitza la plantilla EJS, als teus gestors de ruta Express fem servir la plantilla EJS 'res.render()' i proporcioneu les dades necessàries per passar a la plantilla.
res.render('hello', { name: 'Geeks' });>Estructura del projecte:
Les dependències actualitzades a package.json el fitxer tindrà aquest aspecte:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Exemple: Implementació per mostrar l'ús d'ejs amb un exemple.
HTML EJS Exempletítol> cap> <body> <h1>Hola,<%= name %>!h1> cos> 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('hola', { nom: 'Geeks' }); }); app.listen(port, () => { console.log(`El servidor s'està executant a http://localhost:${port}`); });>>></tag> <p dir='ltr'> <b> <strong>Pas per executar l'aplicació:</strong> </b> <span>Executeu l'aplicació amb l'ordre següent des del directori arrel del projecte</span></p> <tag data-text-3='node index.js></pre> </code><p dir='ltr'> <b> <strong>Sortida:</strong> </b> <span>El vostre projecte es mostrarà a l'URL http://localhost:3000/</span></p> <p dir='ltr'> <img src='//techcodeview.com/img/ejs-templating-language/39/what-is-ejs-why-do-i-need-it-2.webp' alt="sortida"></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="">Categoria</h2>
<div class="content">
<ul class="list-unstyled">
<li> <a href="/dsa-tutorials/">Tutorials Dsa</a> </li><li> <a href="/python-numpy/">Python-Numpy</a> </li><li> <a href="/osi/">També</a> </li><li> <a href="/dbms-tutorial/">Tutorial Dbms</a> </li><li> <a href="/java-method-class/">Classe Del Mètode Java</a> </li><li> <a href="/spring-cloud-tutorial/">Tutorial Spring Cloud</a> </li><li> <a href="/cpp-examples/">Exemples De Cpp</a> </li><li> <a href="/cpp-basics/">Cpp-Funcions Bàsiques</a> </li><li> <a href="/amazon/">Amazon</a> </li><li> <a href="/tutorials/">Tutorials</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">Java Converteix double a int</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Java Converteix double a int exemple i exemples de string a int, int a string, string a data, data a string, string a long, long to string, string a char, char a string, int a long, long a int, etc.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/java-convert-double-int"> <i class="fa fa-external-link"></i> Llegir Més</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articles D'Interès</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/linux-virtualization-chroot-jail">Virtualització de Linux: presó de chroot</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/array-size-c-stl">array::size() en C++ STL</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/c-20-cat/">C++ 20</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/string-arrays-java">Matrius de cadenes en Java</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/convert-psi-kg-cm">Convertir psi a kg/cm²</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">Entrades Populars</h2>
<div class="content">
<ul class="list"> <li><a href="/javascript-operators">operadors javascript</a>
</li><li><a href="/how-track-iphone-from-an-android-phone">trobar el meu iphone android</a>
</li><li><a href="/java-string-compare">comparació de cadena java</a>
</li><li><a href="/hover-css">flotant en css</a>
</li><li><a href="/c-string-compareto">string.compareto c#</a>
</li><li><a href="/numpy-zeros-python">np.zeros</a>
</li><li><a href="/how-center-button-css">botó al centre css</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 Tots Els Drets Reservats | <a href="//pt.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Exempció De Responsabilitat</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Sobre Nosaltres</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Política De Privadesa</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>