EJS: EJS o Embedded Javascript Templating es un motor de plantillas utilizado por Node.js. El motor de plantillas ayuda a crear una plantilla HTML con un código mínimo. Además, puede inyectar datos en una plantilla HTML en el lado del cliente y producir el HTML final. EJS es un lenguaje de plantillas simple que se utiliza para generar marcado HTML con JavaScript simple. También ayuda a incrustar JavaScript en páginas HTML. Para empezar, usando EJS como motor de plantillas, necesitamos instalar EJS usando el comando dado:
npm install ejs --save
Nota: npm en los comandos anteriores representa el administrador de paquetes del Node, un lugar donde se instalan todas las dependencias. –save flag ya no es necesario después de la versión Node 5.0.0, ya que todos los módulos que instalamos ahora se agregarán a las dependencias.
Ahora, lo primero que debemos hacer es configurar EJS como nuestro motor de plantillas con Express, que es un marco de servidor de aplicaciones web de Node.js, que está diseñado específicamente para crear aplicaciones web híbridas, de una sola página y de varias páginas. Se ha convertido en el marco de servidor estándar para node.js.
Javascript
// Set express as Node.js web application
// server framework.
// To install express before using it as
// an application server by using
// "npm install express" command.
var express = require('express');
var app = express();
// Set EJS as templating engine
app.set('view engine', 'ejs');
El comportamiento predeterminado de EJS es que busca en la carpeta ‘vistas’ las plantillas para representar. Entonces, hagamos una carpeta de ‘vistas’ en nuestra carpeta de proyecto de Node principal y hagamos un archivo llamado «home.ejs» que se va a servir en alguna solicitud deseada en nuestro proyecto de Node. El contenido de esta página es:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size:7em;
}
</style>
</head>
<body>
<center>This is our home page.</center>
</body>
</html>
Ahora, representaremos esta página en una determinada solicitud del usuario como:
Javascript
app.get('/', (req, res)=>{
// The render method takes the name of the HTML
// page to be rendered as input
// This page should be in the views folder
// in the root directory.
res.render('home');
});
Ahora, la página home.ejs se mostrará al solicitar localhost. Para agregar contenido dinámico, este método de representación toma un segundo parámetro que es un objeto. Esto se hace como:
Javascript
app.get('/', (req, res)=>{
// The render method takes the name of the HTML
// page to be rendered as input.
// This page should be in views folder in
// the root directory.
// We can pass multiple properties and values
// as an object, here we are passing the only name
res.render('home', {name:'Akashdeep'});
});
var server = app.listen(4000, function(){
console.log('listening to port 4000')
});
Ahora, incrustaremos el nombre en la página HTML como:
html
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size:7em;
}
</style>
</head>
<body>
<center>
This is our home page.<br/>
Welcome <%=name%>, to our home page.
</center>
</body>
</html>
Se utiliza para incrustar contenido dinámico en la página y para incrustar JavaScript normal. Ahora incrustando JavaScript normal:
Javascript
app.get('/', (req, res)=>{
// The render method takes the name of the html
// page to be rendered as input.
// This page should be in views folder
// in the root directory.
var data = {name:'Akashdeep',
hobbies:['playing football', 'playing chess', 'cycling']}
res.render('home', {data:data});
});
var server = app.listen(4000, function() {
console.log('listening to port 4000')
});
El contenido HTML final:
HTML
<!DOCTYPE html>
<html>
<head>
<title>Home Page</title>
<style type="text/css" media="screen">
body {
background-color: skyblue;
text-decoration-color: white;
font-size:5em;
}
</style>
</head>
<body>
Hobbies of <%=data.name%> are:<br/>
<ul>
<% data.hobbies.forEach((item)=>{%>
<li><%=item%></li>
<%});%>
</ul>
</body>
</html>
Pasos para ejecutar el programa:
- Después de crear todos los archivos, vaya al directorio raíz de la carpeta de su proyecto.
- Ejecute el símbolo del sistema en este directorio.
- Escriba el comando node file_name.js para ejecutar su programa y ver el resultado como se muestra.
Producción:
Publicación traducida automáticamente
Artículo escrito por akashdeep18 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA