post thumbnail

Node.js y Express: Vistas

Publicado Por: Oscar González, El 02/09/2013


Detalles del Curso:

Dificultad: Novato

Duración: 30 min


Hemos habilitado un repo en GitHub para que puedas descargar el código de esta entrada:

Échale un vistazo aquí.

En el capitulo anterior de Node.js y Express estuvimos hablando de como construir una aplicación de express desde cero. Hoy continuaremos este curso hablando de las vistas.


Desarrollando una vista

Vamos a abrir el directorio de nuestro proyecto que veníamos desarrollando desde el capítulo anterior y creamos un directorio llamado "views".

Ahora en tu editor de texto favorito creamos un archivo dentro del nuevo directorio llamado "index.jade".

¿Qué es Jade.js?

Jade es un templating language (lenguaje de plantilla) desarrollado por la misma gente responsable de Express, por lo que deberían funcionar muy bien juntos.

Si has usado Haml en Rails, o sinatra, o similar, entonces veras que Jade es bastante parecido.

Jade es simple y facil de aprender.

Entonces para crear nuestra primera vista abrimos el archivo "index.jade" y empezamos a escribir:

// index.js

h1 ¡Hola, Express!

Esto simplemente genera una etiqueta h1 con el el texto "¡Hola, Express!". Por ahora vamos a dejar esta vista así y vayamos al archivo "app.js" para configurar la app para soportar estas vistas.


Soportando vistas

Abrimos "app.js" y buscamos el código donde esta la configuración de la aplicación:

// app.js

app.set('port', process.env.PORT || 3000);
app.use(express.bodyParser());

Por razones estéticas voy a agregar el código de configuración para soporte de vistas debajo de app.set('port', process.env.PORT || 3000);.

// app.js

app.set('port', process.env.PORT || 3000);

app.set('views', __dirname + '/views');
app.set('view engine', 'jade');
app.use(express.bodyParser());

Con esto decimos que nuestras vistas están en el mismo directorio del archivo actual + "/views" y que el motor de vistas es Jade.

Ahora vamos a la primera ruta que definimos en el capítulo anterior, "/":

// app.js

app.get('/', function(request, response) {

    response.send('¡Hola, Express!');

});

Y la vamos a modificar para que en lugar de enviar un mensaje, envíe una vista:

// app.js

app.get('/', function(request, response) {

    response.render('index');

});

Solo hay que cambiar send por render y el nombre de la vista.

Si bien este código teóricamente hablando, funciona, al correrlo nos vamos a encontrar con un error, y es porque no hemos instalado en nuestro proyecto el modulo de Jade.

Abrimos nuestro archivo package.json y agregamos jade a las dependencias:

// package.json

{
  "name": "application-name",
  "version": "0.0.1",
  "dependencies": {
    "express": "3.3.5",
    "jade": "0.35.0"
  }
}

Se agregó Jade, versión 0.35.0.

Ahora en la consola instalamos el paquete:

$ cd { directorio del proyecto }
$ npm install

Y ya podemos correr el proyecto:

node app.js

Ahora si vamos al http;//localhost:3000/ veremos el mensaje "¡Hola, Express!" en una etiqueta h1.


Pasando parámetros a las vistas

Realmente el poder de las vistas reside en pasarle parámetros desde el controlador. Busquemos el código de la ruta "/":

app.js

app.get('/', function(request, response) {

    response.render('index');

});

Para pasar parámetros, solo tenemos que enviar un objeto en el response:

// app.js

app.get('/', function(request, response) {

    response
    .render('index', {

        title: '¡Hola, Express!',
        username: 'oscar'

    });

});

Vamos ahora a la vista a menejar estos parámetros:

h1= title

span Tu nombre usuario es: #{username}

Al la etiqueta h1 le asignamos el contenido de title y luego en un "span" escribimos un mensaje más el contenido el parámetro username.


Utilizando bloques

Otra de las cosas que podemos hacer con jade es utilizar bloques. Un bloque es la extensión de un layout. Veamos como funciona.

Vamos al directorio de las vistas, "./views", y creamos un archivo llamado "layout.jade":

// layout.jade

doctype 5
html
  head
    title= title
  body
    #content
      block content
  1. El title de la página viene dado por la ruta como un parámetro, igual que como hicimos en la vista index.js
  2. En el body tenemos un div de id=content
  3. Y dentro del div tenemos un bloque llamado contenido

Como podemos observar, en Jade la indentación determina que cosa va dentro de que.

Ahora, vamos a index.js y modificamos esta vista para se el bloque que extiende el layout.

// index.jade

extends layout

block content
    h1= title

    span Tu nombre usuario es: #{username}
  1. Se extiende layout
  2. El contenido del bloque content es ésta vista

Corramos nuestro proyecto y observemos en el código que la vista como tenemos header, body, un div con id content, y dentro el contenido de la vista índex.


Conclusión

En este capítulo aprendimos a utilizar las vistas en Node.js

  1. Aprendimos como incluir el directorio de las vistas;
  2. Crear una vista;
  3. Retornar una vista en el response de una ruta;
  4. Pasar parámetros a una vista;
  5. Utilizar bloques.

Cualquier duda házmela saber en los comentarios.

Hasta la próxima.


¿Te ha gustado esta publicación?

Compártela:

Por Oscar González

Conoce más sobre este autor aquí


comments powered by Disqus