Para poder implementar vistas en ExpressJS, te recomiendo pasar por este artículo primero antes de continuar.
Ya domino el armado de vistas, dame algo mas difícil!
Cuando llamamos a las vistas a través del ruteo de ExpressJS usando pug, nos limitamos a hacerlo sobre una única página. Es lógico pensar que para crear mas vistas, debemos establecer rutas nuevas y llamarlas mediante la url. Pero armando un sitio web, necesitamos que esas urls se puedan llamar directamente desde enlaces en las vistas.
Empecemos armando las vistas!
Home y Contacto
Crearemos dos vistas pug. Una vista home (views/home.pug):
doctype html
html
head
title Home
body
a(href='#') Enlace a contacto
Y una vista Contacto (views/contact.pug):
doctype html
html
head
title Contacto
body
a(href='#') Enlace a home
Luego crearemos una ruta para cada vista:
app.get('/home', function (req, res) {
res.render('home');
});
app.get('/contact', function (req, res) {
res.render('contact');
});
La vista home debe enlazar a contacto mediante un link y viceversa. Y como estamos dentro del contexto de nuestro servidor, las url que generamos son:
Entonces para poder usar dicha ruta en nuestras vistas, es tan simple como cambiar el href de nuestros links. Por ejemplo en contact:
a(href='home') Enlace a home
Y en home:
a(href='contact') Enlace a Contactos
No necesitamos ni recomendamos usar la url completa dado que puede cambiar tanto de puerto como dirección.
Como ven es muy sencillo, y podemos enlazar todas las vistas que queramos siempre que tengamos el ruteo adecuado en nuestro index.js.
Top comments (0)