Embedded JavaScript Templates - EJS
Embedded JavaScript Templates (EJS) é uma motor de visualização que facilita a criação de páginas HTML com código JavaScript.
Injetar valores de propriedades
Sintaxe
- Não escapar caracteres (mostrar as tags passadas pelo objeto JavaScript)
<%= [nome da propriedade] %>- Escapar caracteres (executar as tags passadas pelo objeto JavaScript)
<%- [nome da propriedade] %>Exemplo
Utilizando <%= ... %>
exports.paginaInicial = (req, res) => {
res.render("index", {
titulo: "Este será o <span style='color: red'>título</span> da página",
});
return;
};<h1><%= titulo %></h1>
<!--
Na página: Este será o <span style='color: red'>título</span> da página
-->Utilizando <%- ... %>
exports.paginaInicial = (req, res) => {
res.render("index", {
titulo: "Este será o <span style='color: red'>título</span> da página",
});
return;
};<h1><%= titulo %></h1>
<!--
Na página: Este será o título da página
|
|
Estará em vermelho
-->Estrutura condicional
Sintaxe
<% if([condição]) { %>
// código quando a condição for verdadeira
<% } else { %>
// código quando a condição for false
<% } %>Exemplo
<% if(typeof !== "undefined") { %>
<%= titulo %>
<% } else { %>
O título não foi enviado.
<% } %>Estrutura de repetição
Sintaxe
<% [array].forEach([arrow function]) %>Exemplo
<% numeros.forEach(num => { %>
<% num %>
<% }); %>Importar conteúdos de outras páginas
Sintaxe
<%- include([caminho até a página HTML]) %>Exemplo
<!-- Arquivo: include/head.ejs -->
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Modelo</title>
</head>
</html><% include("include/head) %>
<body>
<section class="container">
<h1>
<% if(typeof !== "undefined") { %>
<%= titulo %>
<% } else { %>
O título não foi enviado.
<% } %>
</h1>
</section>
<script src="./assets/js/bundle.js"></script>
</body>
</html>