EJS In Node.js Template Example
What is EJS?
EJS is among the most popular template view engines for node.js and express.js.
EJS simply stands for Embedded Javascript. It is a simple templating language that lets users generate HTML with plain javascript.
When to use EJS?
EJS is mostly useful whenever you have “dynamic” content on site and you want to display it. The best example is for online shops. Knowing that your product informations are stored in database. So, from database you are taking that informations and with the help of EJS displaying it on the web page. That proccess is called “dynamic” because you are manipulating with data.
Basic EJS syntax:
<% ‘Scriptlet’ tag, for control-flow, no output
<%= Outputs the value into the template (HTML escaped)
<%- Outputs the unescaped value into the template
EJS template quick start
This is the base(layout). This way you run EJS as your main view engine:
1. First install express.js and ejs from npm. You do it this way:
npm install express ejs
2. Second create app.js and paste next code:
app.js
const express= require(‘express’);
const path= require(‘path’);
var app=express();
//run EJS
app.set(‘views’,path.join(__dirname,’views’));
app.set(‘view engine’,’ejs’); // run EJS
app.get(‘/’,(req,res)=>{
res.render(‘index’,{myVar:37});
})
app.listen(3000);The last but not least in the main folder create new folder named views and there new file index.ejs
index.ejs
<h1> Hello From EJS : <%= myVar %> </h1>That’s it. Now you are ready to start playing with EJS.
Down are EJS syntax rules you must follow to use it at its best:
- Passing Variables In EJS
To pass a variable in EJS you need two things:
app.js
app.get(‘/’,(req,res)=>{
res.render(‘page_to_render’,{ key:value });
})And in your page_to_render include the variable you have put in key:’value’
page_to_render
<h1> <%= key %> </h1>When we request ‘/ ‘ ,it will redirect us to the ‘page_to_render’ with the object. And in ‘page_to_render’ we output that value.
- If Else Statements with EJS
index.ejs
<h1>Hello World
<% if(1+1===2){ %>
<p>It’s 2</p>
<% }else{ %>
<p> It isn’t 2 </p>
<% } %></h1>
In this example we have used <% … %> instead of <%= …%> , because if statements use <% … %> . When you want to pass EJS variable you will use <%= … %> (previous example)
- Including Partials With EJS
To include partials in EJS you need to create folder ‘partials’ and there partial file. My partial file is named ‘hello.ejs’
hello.ejs
<h1> Hello From EJS</h1>and now include the file in index.ejs :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><%- include(‘./partials/hello.ejs’) %></body>
</html>
And yes you use <%- %> to include partials in EJS.
- Loop Through Objects With EJS Loops
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body><% var obj={name:’John’,age:20, country:’Russia’};
const objValues= Object.values(obj);
for(let i of objValues){ %>
<h1> <%= i %> </h1>
<% } %></body>
</html>
Also with loops, we are using control-flow EJS tags!
