🥇 Templates.

Express permite conectar diferentes motores de plantillas, es muy flexible en ese sentido. Incluso podríamos conectar nuestro un motor de plantillas creado por nosotros mismos.

Un motor de plantillas es simplemente texto que es procesado y convertido en html. Quiza te preguntes porque no utilizar directamente html, bueno, pues a diferencia de html, el texto de las plantillas se considera como “texto simplificado”.

🍿 Utilizando ejs como motor de plantillas.

  1. Instalamos ejs como dependencia de nuestra aplicación.

    npm install ejs --save
    
  2. Creamos el folder views en el mismo directorio donde se encuentra nuestra app.

  3. Dentro del folder views creamos el archivo inicio.ejs.

    <html>
        <head>
            <link rel="stylesheet" href="/css/main.css" />
        </head>
        <body>
            <p>Pagina de inicio!</p>
        </body>
    </html>
    
  4. Ahora vamos a mandar llamar nuestro template para la pagina de inicio.

    // ruta para el home
    app.get('/', function(peticion, respuesta) {
        respuesta.render('inicio.ejs');
    });
    

    Como ves, reemplazamos todo el bloque html que teniamos antes por una sencilla llamada al template.

  5. Refrescamos la url http://localhost:3000/ y veremos que la información que la información de la pagina de inicio se muestra igual, pero a diferencia de antes, ahora separamos el contenido de nuestra vista en un template .ejs.

🍿 Pasando parametros a nuestro view.

  1. Vamos nuevamente a nuestra app.js, aun tenemos una ruta que utiliza html directamente, /matricula/:id.

  2. Creamos un nuevo archivo dentro de views llamado matricula.ejs.

    <html>
        <head>
            <link rel="stylesheet" href="/css/main.css" />
        </head>
        <body>
            <p>La matricula es <%= id %></p>
        </body>
    </html>
    

    Como vemos hemos introducido una variable llamada id (para imprimirla la encerramos entre los símbolos <%= variable >).

  3. Ahora vamos a nuestra app.js y vamos a actualizar el código de manera que pasemos como segundo argumento de render un objeto con la propiedad id.

    // ruta para nuestra matricula con un id
    app.get('/matricula/:id', function(peticion, respuesta) {
        respuesta.render('matricula.ejs', {
            id : peticion.params.id
        });
    });
    
  4. Abrimos la url http://localhost:3000/matricula/123/ y veremos que tenemos el mensaje.

    La matricula es 123
    

    Si cambiamos 123 por otro numero o texto, la matrícula igualmente cambiará de valor al ser impresa en el mensaje anterior.

Hasta este punto hemos reemplazado el html que existia en nuestras rutas, esto nos permite tener una mejor organización de nuestro código al poderlo dividir en archivos que cumplen objetivos específicos.

Middleware. Query String.
comments powered by Disqus