Express nos brinda la posibilidad de utilizar plantillas para servir el contenido HTML de nuestros sitios web. Para ello existe un mecanismo mediante el cual se configura la instancia de Express que estemos utilizando para utilizar un motor de plantillas determinado. Este motor realizará la tarea de, partiendo de una plantilla HTML y un objeto de configuración/contenido, generar el HTML que será servido a los clientes.
Dentro de los motores de plantillas más conocidos se encuentran:
- Jade es el más popular y tiene una sintaxis muy limpia para escribir las plantillas
- EJS utiliza un esquema muy similar a ASP para definir las plantillas
Las plantillas de Jade prescinden de los delimitadores de los tags HTML (< y >) y utiliza un indentado de dos espacios para representar la jerarquia de tags de una página HTML.
Dada una plantilla con este contenido:
doctype html
html
head
title= titulo
body
h1 Plantilla de Jade
p Esto es un párrafose generará el siguiente contenido HTML cuando se provea un objeto con el contenido a inlcuir:
{
"titulo": "Plantilla"
}<!DOCTYPE html>
<html>
<head>
<title>Plantilla</title>
</head>
<body>
<h1>Plantilla de Jade</h1>
<p>Esto es un párrafo</p>
</body>
</html>Este motor utiliza tags especiales (<% y %>) para identificar el código que debe ser evaluado para generar el contenido HTML.
Para comparar con el caso anterior, la plantilla de EJS que genera el mismo HTML es:
<!DOCTYPE html>
<html>
<head>
<title><%= titulo %></title>
</head>
<body>
<h1>Plantilla de Jade</h1>
<p>Esto es un párrafo</p>
</body>
</html>Deben configurarse dos parámetros en la instancia de Express:
viewses el directorio en el cual se encuentran las plantillas.view enginees el motor que se va a utilizar para generar el contenido HTML a partir de las plantillas.
Por lo tanto, para utilizar Jade, primero se debe instalar el módulo:
npm install --save jadeA continuación, se debe configurar Express para que utilize Jade y tome las plantillas del directorio views:
app.set('view engine', 'jade');
app.set('views', './views');Por último, dada una ruta que debe mostrar determinados datos utilizando una plantilla index, el middleware debe utilizar la función res.render() de la siguiente manera:
app.get("/:id", function (req, res, next) {
obtenerDatos(req.params.id, function (err, datos) {
res.render('index', datos);
});
});