Template Engine EJS no Express com Node.js

Como alternativa ao Handlebars, vamos examinar brevemente o uso de outra template engine - EJS. Esta engine utiliza uma sintaxe amplamente inspirada na template engine Web Forms da plataforma ASP.NET, desenvolvido pela Microsoft.

Primeiro, adicionamos o pacote ejs ao projeto com o comando:

npm install ejs --save

No arquivo app.js, definimos o seguinte código:

const express = require("express");

const app = express();

app.set("view engine", "ejs");

app.use("/contact", function (request, response) {
  response.render("contact", {
    title: "Meus Contatos",
    emailsVisible: true,
    emails: ["gg@mycorp.com", "lol@mycorp.com"],
    phone: "+1234567890",
  });
});
app.use("/", function (request, response) {
  response.send("Página Principal");
});
app.listen(3000, () => console.log("Servidor iniciado em http://localhost:3000"));

Aqui, definimos o mesmo código de um dos tópicos anteriores, mas agora configuramos a engine ejs:

app.set("view engine", "ejs");

Em seguida, adicionamos à pasta views do projeto um novo arquivo chamado contact.ejs (as visualizações em EJS têm a extensão .ejs por padrão):

<!DOCTYPE html>
<html>
  <head>
    <title><%=title %></title>
    <meta charset="utf-8" />
  </head>
  <body>
    <h1><%=title %> em EJS</h1>

    <% if(emailsVisible) { %>
    <h3>Endereços de Email</h3>
    <ul>
      <% for(var i=0; i < emails.length; i++) { %>
      <li><%=emails[i] %></li>
      <% } %>
    </ul>
    <% } else { %>
    <h3>Endereço de Email Ausente</h3>
    <% } %>
    <p>Telefone: <%=phone %></p>
  </body>
</html>

Para trabalhar com o modelo de visualização, utilizamos expressões JavaScript, que são definidas com a tag <% expressão %>. Cada bloco de código, como estruturas condicionais e loops, deve ser delimitado por chaves, como em JavaScript, e cada bloco deve ter uma chave de abertura e uma de fechamento:

<% for(var i=0; i < emails.length; i++) { %>
    .........................
<% } %>

Ao acessar o endereço /contact, a aplicação irá gerar a página web:

Partial views no Express em Node.js

Templates Parciais

O EJS permite inserir código de um template em outro usando a função include. Por exemplo, vamos definir na pasta views um diretório chamado partials, no qual adicionamos dois arquivos. O primeiro arquivo, menu.ejs, terá o seguinte código:

<nav><a href="/">Página Principal</a> | <a href="/contact">Contatos</a></nav>

O segundo arquivo, footer.ejs, representará o rodapé:

<footer><p>MyCorp - Copyright © 2024</p></footer>

Agora, incluímos esses arquivos em contact.ejs:

<!DOCTYPE html>
<html>
<head>
    <title><%=title %></title>
    <meta charset="utf-8" />
</head>
<body>
    <%- include("partials/menu.ejs") %>
    <h1><%=title %> em EJS</h1>

    <% if(emailsVisible) { %>
        <h3>Endereços de Email</h3>
        <ul>
            <% for(var i=0; i<emails.length; i++) { %>
                <li><%=emails[i] %></li>
            <% } %>
        </ul>
    <% } else { %>
        <h3>Endereço de Email Ausente</h3>
    <% } %>
    <p>Telefone: <%=phone %></p>

    <%- include("partials/footer.ejs") %>
</body>
</html>

A função include recebe o caminho do template a ser inserido. O arquivo app.js permanece o mesmo. Como resultado, o conteúdo dos templates incluídos será adicionado à página web:

Templates parciais em EJS com Express.js e Node.js