Uso de motores de templates en Express.js: Simplifica el renderizado de tus vistas

¿Qué es un motor de templates?

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

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

¿Cómo utilizar ejs como motor de plantillas?

Instalamos ejs como dependencia de nuestra aplicación.
```
npm install ejs --save
```
Creamos el folder views en el mismo directorio donde se encuentra nuestra app.

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>

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 teníamos antes por una sencilla llamada al template.
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.

¿Cómo enviar parámetros a un template en express?

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

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 >).

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,
    });
});

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 existía 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.

Uso de motores de templates en Express.js: Simplifica el renderizado de tus vistas

¿Qué es un motor de templates?

¿Cómo utilizar ejs como motor de plantillas?

¿Cómo enviar parámetros a un template en express?

VPN

Moda

Accesorios