Vistas
Escribir todo el HTML dentro del código JavaScript es muy engorroso y lo que se recomienda es utilizar un motor de plantillas (template engine) que nos permita separar nuestro código HTML de nuestro código JavaScript.
Existen varios motores de plantillas como Pug, Mustache y EJS. Como ilustración vamos a usar Pug en este capítulo.
El primer paso es instalar el motor de plantillas utilizando npm o yarn. Por ejemplo, para instalar Pug con yarn ejecutaríamos el siguiente comando:
$ yarn add pug --dev
El segundo paso es configurar el motor de plantillas y la carpeta donde se van a almacenar las vistas. Por ejemplo, para configurar Pug y la carpeta views
agregaríamos las siguiente dos líneas en nuestra aplicación después de definir la variable app
:
app.set('view engine', 'pug');
app.set('views', 'views');
Para crear una vista debes crear un archivo con extensión .pug
en la carpeta views
(o la que hayas configurado).
Pug utiliza una sintaxis similar a HTML pero más compacta. Veamos un ejemplo. Crea un archivo llamado index.pug
en la carpeta views
con el siguiente contenido:
html
head
title Vista con Pug
body
h1 Esta es mi primera vista con Pug
Para utilizar esta vista desde una ruta debemos usar el método res.render
. Agrega la siguiente ruta al archivo app.js
:
app.get('/', (req, res) => {
res.render('index');
});
Fíjate que no es necesario agregar la extensión del archivo, Express ya sabe cuál es.
Inicia el servidor e ingresa desde un navegador a http://localhost:3000/. Deberías ver el texto "Esta es mi primera vista con Pug" y el título de la pestaña debería ser "Vista con Pug".
Pasando información a la vista
También es posible pasar información desde la ruta a la vista. Por ejemplo, si queremos pasar el texto que va en el title
y el h1
desde la ruta podemos hacer lo siguiente:
html
head
title= title
body
h1= message
Y pasarle esas variables title
y message
desde la ruta:
app.get('/', (req, res) => {
res.render('index', { title: "Variables en Pug", message: "Ya sé pasar info a la vista" });
});
Si reinicias el servidor y refrescas la página deberías ver el texto "Ya sé pasar info a la vista" y el título de la pestaña debería ser "Variables en Pug".
Creando un layout
Esta información es específica de Pug. Para ver cómo se hace en otros motores de plantillas debes consultar su documentación.
Existen elementos que se repiten en todas las páginas como la estructura básica de HTML, el menú principal, etc. (a esto se le conoce como un layout). Con Pug puedes crear un archivo con estos elementos y reutilizarlo en tus vistas.
Por ejemplo, crea un archivo llamado layout.pug
dentro de la carpeta views
con el siguiente contenido:
html
head
title Mi super página
body
block content
La línea block content
se va a reemplazar con el código de cada vista. Ahora vamos a crear una vista llamada index.pug
(también en la carpeta views
) que va a "extender" el layout que acabamos de crear:
extends layout.pug
block content
h1 Hola Mundo
Todo lo que se encuentre debajo de block content
se va a reemplazar en el layout donde esté definido el bloque con el mismo nombre.
Puedes tener varios bloques si es necesario.