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 la plantilla HTML en el lado del cliente y producir el HTML final.
Instalación: Instale el módulo usando el siguiente comando:
npm install ejs --save
Nota: El npm en los comandos anteriores representa el administrador de paquetes del Node, un lugar donde se instalan todas las dependencias. –saveflag 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 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.
Los datos pasados desde el servidor se envían al archivo EJS y luego podemos acceder a esos datos usando la línea a continuación y le dará esos datos a h, p u otra etiqueta de texto.
<%= data %>
Si queremos usar estos datos para operaciones js normales como if-else y bucles u otras declaraciones de programación, podemos escribirlos de la siguiente forma:
<% if(data == "1"){%>
<h5>Cricket</h5>
<%}else{%>
<h5>Football</h5>
<%}%>
Ahora, para acceder a esos datos en la etiqueta de script del archivo EJS o el archivo .js, todo lo que necesita hacer es pasar esos datos en otra variable como se muestra a continuación:
let data = '<%-data%>'
Ahora puede realizar cualquier operación en la variable de datos que tenga el mismo valor que la variable de datos pasada por EJS.
Nombre de archivo: index.js
// Set express as Node.js web application
// server framework.
// Install it using 'npm install express' command
// and require like this:
var express = require('express');
var app = express();
// Set EJS as templating engine
app.set('view engine', 'ejs');
app.get("/", function(req, res) {
res.render("home", {name:'Chris Martin'});
});
// Server setup
app.listen(3000, function(req, res) {
console.log("Connected on port:3000");
});
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.
Nombre de archivo: home.ejs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,
initial-scale=1.0">
</head>
<body>
<center>
<!-- Text from EJS variable
passed from server -->
<h2>
Text from EJS variable passed
from server is =
</h2>
<h2 style="color:red"><%=name%></h2>
<br>
<!-- Text from EJS variable
passed from script tag -->
<h2 style="color: blue;">
Text from EJS variable passed
from script tag =
</h2>
<h2 style="color: blue;"
id="text_from_script">
</h2>
<br>
<!-- Text from EJS variable passed
from script tag after manipulation -->
<h2 style="color: green;">
Text from EJS variable passed from
script tag after manipulation =
</h2>
<h2 style="color: green;"
id="text_from_script_manipulated">
</h2>
</center>
<script>
let name = '<%-name%>'
let heading = document
.getElementById('text_from_script');
heading.innerText = name;
name = "Mr. " + name;
let heading_man = document.getElementById(
'text_from_script_manipulated');
heading_man.innerText = name;
</script>
</body>
</html>
La variable de nombre se pasó del servidor al archivo name.ejs y se mostró usando la etiqueta h2, para usar la variable de nombre en la etiqueta del script, todo lo que hicimos fue declarar una variable y pasar la variable EJS a la variable declarada usando:
let name = '<%-name%>'
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 siguiente comando para ejecutar su programa y ver el resultado como se muestra.
node index.js
Producción:
Publicación traducida automáticamente
Artículo escrito por sethivansh6 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA