Aulas
Disciplinas

Cursos / Informática para Internet / Desenvolvimento Backend / Aula

arrow_back Aula 10 - View Engines

EJS como view engine

Primeiramente, será usada uma biblioteca chamada EJS que facilitará a criação dinâmica do HTML.

Instalando o EJS

Essa biblioteca permite o acesso a variáveis do nodejs para construir o HTML e criá-lo dinamicamente.

Para fazer o uso dessa biblioteca, deve antes fazer a instalação. Então, execute no terminal o comando:

    npm install ejs

Utilizando o EJS

Após instalar a biblioteca, é preciso informar ao express que será usado esse template engine. A configuração será feita no arquivo index.js. Então, nas linhas que sucedem à configuração geral do Express, adicione a linha abaixo:

    app.set('view engine', 'ejs')

Daí em diante o EJS já pode ser utilizado e, para isso, crie na raiz do projeto uma pasta de views e dentro dela ficarão os arquivos HTML com extensão .ejs.

Dentro dessa página, crie um arquivo index.ejs que deve conter o código abaixo: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simples exemplos de EJS</title>
</head>
<body>
    <p>Exemplo de EJS!!</p>
    <p><%=variavel%></p>
</body>
</html>

Agora, sempre que o usuário acessar algum endereço, essa página deverá ser retornada.

Renderizando o HTML

Para a página ser exibida ao usuário, uma nova rota deve ser criada para que, ao ser acessada, ao invés de retornar json, retorne a página HTML. Então, no arquivo index.js adicione a seguinte rota:

    app.get('/home', (req, res) => {
            const number = Math.random()
            res.render('pages/index', {variavel: number})
    })

Versão 5.3 - Todos os Direitos reservados