EJS or Embedded Javascript Templating is
EJS or Embedded Javascript Templating is
The
template engine helps to create an HTML template with minimal code. Also, it can inject data
into the HTML template on the client side and produce the final HTML.
To install
To start, we need to set EJS as our templating engine with Express. Express is a Node.js web
application server framework designed for building single-page, multi-page, and hybrid web
applications. It has become the standard server framework for Node.js.
Data passed from the server is sent to the EJS file and then we can access that data using the
below line and it will give that data to h, p, or another text tag.
Now to access that data in the script tag of the EJS file or the .js file all you need to do is to
pass that data in another variable as below:
Now you can perform any operation on the data variable that has the same value as the EJS
passed data variable.
// Filename - index.js
// Set express as Node.js web application
// server framework.
// Server setup
app.listen(3000, function(req, res) {
console.log("Connected on port:3000");
});
The default behaviour of EJS is that it looks into the ‘views’ folder for the templates to
render. So, let’s make a ‘views’ folder in our main node project folder and make a file named
“home.ejs” which is to be served on some desired request in our node project.
<!-- home.ejs -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
</head>
<body>
<!-- Text from EJS variable
passed from server -->
<h2>
Text from EJS variable passed
from server is =
</h2>
<h2 style="color:red">
<%=name%>
</h2>
<br>
<script>
let name = '<%-name%>'
let heading = document
.getElementById('text_from_script');
heading.innerText = name;
name = "Dr. " + name;
let heading_man = document.getElementById(
'text_from_script_manipulated');
heading_man.innerText = name;
</script>
</body>
</html>
The “name” variable has been passed from the server to the ‘name.ejs’ file and displayed
using an h2 tag. To use the “name” variable in the script tag, all we did was declare a variable
and assign the EJS variable to the declared variable using: