express: 3. jade

Introducción al sistema de plantillas de jade

Georgia O'Keeffe

archivado en: JavaScript / 11 octubre, 2015 / taller:

Sigo con este tutorial sobre express. Ahora que ya sabemos cómo rutear nuestro servidor (y ya veremos cómo hacerlo de forma más sofisticada), vamos a ver cómo escupir devolver páginas html mediante un sistema de plantillas denominado jade.

Ojo, lo razonable es usar express con algún  frame mvc js, como angular, pero es interesante conocer aunque sea a vuelapluma cómo funcionan las plantillas.

Express dispone de varios sistemas de plantillas. A mí el que más me gusta es handelbars, pero vamos a empezar por jade, que es más sencillico. Y para eso lo primero es instalarlo (con el flag --save si queremos incorporarlo a nuestro package.json).

npm install jade --save

Luego hay que decirle a la aplicación que debe usar ese sistema de plantillas. Para eso hay que modificar dos parámetros de configuración:

  1. view engine, el "motor" de plantillas que debe usarse por defecto si no se especifica otro.
  2. views, una cadena o un array donde se indican el o los directorios donde estarán las vistas. Si es un array, va buscando por orden. Si no encuentra la plantilla que sea en el primero, pasa al segundo y así sucesivamente.

Para modificar esos parámetros se usa el método set, que recibe como parámetro un par clave-valor con lo que tiene que cambiar y el valor que debe tener.

/* Cargamos el módulo express */

var express = require("express");

var app = express();

/* Definimos el sistema de plantillas */

app.set('view engine', 'jade');

/* Indicamos dónde están las plantillas */

app.set('views', './views/jade');

Ahora, para hacernos una idea, podemos crear una plantilla jade (index.jade) muy sencilla. Recibe dos valores dinámicos (title y message) y mediante las tabulaciones se van definiendo los nodos padres e hijos (como si fuera phyton xD).

./views/jade/index.jade

html

head

title!= title

body

h1!= message

Y ya solo falta indicar que renderice esa vista con el método render() cuando reciba una petición get de la ruta /.

/

app.get('/', function (req, res) {

res.render('index', { title: 'tutorial de express', message: 'Haga Basin'});

});

Por último, levantamos el server como vimos en entradas anteriores.

var server = app.listen(3000, function () {

console.log('Servidor levantado en el puerto 3000');

});

Bueno, pues por hoy está bien.

|| Tags: , ,

Este artículo aún no ha sido valorado.

¿Te ha parecido útil o interesante esta entrada?
dormido, valoración 1 nadapensativo, valoración 2 un poco sonrisa, valoración 3 a medias guiño, valoración 4 bastante aplauso, valoración 5 mucho

Tú opinión es muy importante, gracias por compartirla!

Los comentarios están cerrados.