Ir a la p谩gina de inicio
Home / Apuntes de NodeJS (Programaci贸n desde Cero) en espa帽ol
Compartir en twitter

馃敟 USO DE MOTORES DE TEMPLATES EN EXPRESS.JS: SIMPLIFICA EL RENDERIZADO DE TUS VISTAS

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?

  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 ten铆amos 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.

驴C贸mo enviar par谩metros a un template en express?

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