Nello sviluppo web, ci sono molti strumenti a disposizione degli sviluppatori tra cui scegliere. La scelta degli strumenti e delle tecnologie giuste può avere un impatto significativo sull’efficienza e sulla funzionalità dei progetti. Uno degli strumenti più popolari nello sviluppo web è EJS, che sta per Embedded JavaScript . EJS è un semplice linguaggio di template JavaScript che genera HTML con semplice JavaScript. In questo articolo tratteremo cos'è EJS, perché è necessario, le sue funzionalità, come installarlo e forniremo un esempio con l'output.
Cos'è l'EJS
EJS o Embedded JavaScript è un motore di modelli per JavaScript utilizzato per lo sviluppo web che consente agli utenti di generare markup HTML dinamico utilizzando il codice JavaScript all'interno dei modelli HTML. È progettato per semplificare il processo di rendering di contenuti dinamici nelle applicazioni web. Contiene una combinazione di HTML e JavaScript che semplifica la generazione di contenuti dinamici basati sui dati della tua applicazione.
Caratteristiche dell'EJS
- Sintassi semplice: EJS offre una sintassi semplice che combina HTML e JavaScript, facilitandone l'apprendimento e l'utilizzo.
- Contenuto dinamico: EJS consente la generazione dinamica di contenuti HTML e JavaScript all'interno dei tag HTML, migliorando la flessibilità nella creazione di contenuti.
- Layout e parziali: EJS supporta layout e partial, consentendo agli utenti di suddividere i modelli in componenti riutilizzabili, riducendo la duplicazione del codice e migliorando la manutenibilità.
- Gestione degli errori: EJS fornisce messaggi di errore che aiutano gli sviluppatori nel debug, migliorando l'esperienza di sviluppo complessiva.
Perché hai bisogno di EJS?
- Generazione HTML dinamico: EJS ti consente di generare contenuto HTML dinamico basato su variabili, condizioni, loop e altra logica JavaScript. Ciò è particolarmente utile per il rendering di dati dinamici recuperati da database o API.
- Riutilizzabilità del codice: Utilizzando i modelli EJS, è possibile creare componenti o partial riutilizzabili che possono essere inclusi in più pagine. Ciò promuove la modularità del codice e riduce la duplicazione nelle applicazioni web.
- Rendering lato server: Con EJS è possibile eseguire il rendering lato server (SSR) delle pagine Web. SSR è vantaggioso per la SEO (Search Engine Optimization) in quanto consente ai motori di ricerca di eseguire la scansione e indicizzare i tuoi contenuti in modo più efficace rispetto al rendering lato client (CSR) eseguito da framework come React o Angular.
- Facile integrazione con Node.js ed Express.js: EJS si integra perfettamente con Node.js ed Express.js, rendendolo una scelta popolare per gli sviluppatori che lavorano su applicazioni JavaScript lato server. È facile da configurare e utilizzare all'interno di un progetto Express.js.
- Sintassi familiare: Se hai già familiarità con HTML e JavaScript, imparare e utilizzare EJS è semplice. La sintassi è simile all'HTML con codice JavaScript incorporato racchiuso
>tag, rendendolo accessibile a sviluppatori con diversi livelli di abilità. - Ereditarietà e layout dei modelli: EJS supporta l'ereditarietà e i layout dei modelli, consentendoti di creare layout coerenti per le tue pagine web. Puoi definire un layout di base ed estenderlo in altri modelli, semplificando il mantenimento di un aspetto coerente in tutta l'applicazione.
Come utilizzare EJS?
Passo 1: Installa EJS come dipendenza nel tuo progetto
quadro di raccolta Java
npm install ejs>
Passo 2: Crea una cartella 'views' nella directory del tuo progetto se non esiste già. All'interno della cartella views, crea un nuovo file con estensione .ejs, ad esempio index.ejs
Passaggio 3: Per integrare EJS con Express in un'applicazione Express.js, imposta EJS come motore di visualizzazione nella configurazione dell'app Express. Questa configurazione consente a Express di utilizzare EJS per il rendering delle viste.
app.set('view engine', 'ejs');>Passaggio 4: Rendering del modello EJS, nei gestori del percorso Express eseguiamo il rendering del modello EJS utilizzando ‘res.render()’ e fornire i dati necessari da passare al modello.
res.render('hello', { name: 'Geeks' });>Struttura del progetto:
Le dipendenze aggiornate in pacchetto.json il file sarà simile a:
'dependencies': { 'ejs': '^3.1.9', 'express': '^4.18.2' }>Esempio: Implementazione per mostrare l'uso di ej con un esempio.
HTML Titolo di esempio EJS> head> <body> <h1>Ciao,<%= name %>!h1> corpo> 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('ciao', { nome: 'Geeks' }); }); app.listen(port, () => { console.log(`Il server è in esecuzione su http://localhost:${port}`); });></pre> </code> <p dir='ltr'> <b> <strong>Passaggio per eseguire l'applicazione:</strong> </b> <span>Esegui l'applicazione utilizzando il comando seguente dalla directory root del progetto</span></p> <pre class='hljs'>node index.js></pre><p dir='ltr'> <b> <strong>Produzione:</strong> </b> <span>Il tuo progetto verrà mostrato nell'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="produzione"></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="/linux-man-pages/">Pagine Man Di Linux</a> </li><li> <a href="/top-10-list-world/">Elenco Dei Primi 10 - Mondo</a> </li><li> <a href="/ansible-tutorial/">Tutorial Ansible</a> </li><li> <a href="/restful/">Riposante</a> </li><li> <a href="/cpp-strings-library/">Libreria-Cpp-Strings</a> </li><li> <a href="/python-numpy-mathematical-function/">Funzione Matematica Numpy Di Python</a> </li><li> <a href="/geometry-maq/">Geometria - Maq</a> </li><li> <a href="/geography-class-8-cat/">Geografia-Classe-8</a> </li><li> <a href="/c-class-object/">Classe E Oggetto C++</a> </li><li> <a href="/compiler-tutorial/">Esercitazione Sul Compilatore</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">CIL o MSIL | Microsoft Intermediate Language o Common Intermediate Language</h2>
<div class="content">
<div class="item">
<blockquote class="quote">
<span> <i class="fa fa-quote-left"></i> Un portale di informatica per geek. Contiene articoli di informatica e programmazione ben scritti, ben pensati e ben spiegati, quiz e domande per colloqui pratici/competitivi/aziendali.</span>
</blockquote>
</div><!--//item-->
<p> <a class="more-link" href="/cil-msil-microsoft-intermediate-language"> <i class="fa fa-external-link"></i> Per Saperne Di Più</a> </p>
</div><!--//content-->
</div><!--//section-inner-->
</aside><!--//section-->
<aside class="languages aside section">
<div class="section-inner">
<h2 class="heading">Articoli Interessanti</h2>
<div class="content">
<ul class="list-unstyled">
<li class="item">
<span class="title"> <strong> <a href="/time-complexities-all-sorting-algorithms">Complessità temporali di tutti gli algoritmi di ordinamento</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/bit-magic/">Un po' di magia</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/python-functions">Funzioni Python</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/evaluation-of-expression-tree">Valutazione dell'albero delle espressioni</a> </strong> </span>
</li><!--//item--><li class="item">
<span class="title"> <strong> <a href="/volume-sphere">Volume di una sfera</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">Messaggi Popolari</h2>
<div class="content">
<ul class="list"> <li><a href="/how-open-file-java">aprire un file con Java</a>
</li><li><a href="/what-is-linux-operating-system">sistema operativo Linux</a>
</li><li><a href="/java-oops-concepts">ops concetti in Java</a>
</li><li><a href="/rename-folder-linux">rinominare la directory su Linux</a>
</li><li><a href="/java-convert-int-string">int alla conversione di stringa</a>
</li><li><a href="/numpy-histogram-python">np.istogramma</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 Tutti I Diritti Riservati | <a href="//es.techcodeview.com/">techcodeview.com</a> | <a href="/disclaimer" rel="nofollow noopener noreferrer" target="_blank">Disclaimer</a> | <a href="/about-us" rel="nofollow noopener noreferrer" target="_blank">Chi Siamo</a> | <a href="/privacy-policy" rel="nofollow noopener noreferrer" target="_blank">Politica Sulla Riservatezza</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>