How to use Ejs in JavaScript ?
Last Updated :
11 Jan, 2024
EJS or Embedded Javascript Templating is a templating engine used by Node.js. 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.
Installation:
Install the module using the following command:
npm install ejs --save
Note:
The npm in the above commands stands for the node package manager, a place where all the dependencies. –save
flag is no longer needed after the Node 5.0.0 version, as all the modules that we now install will be added to dependencies.
Now, the first thing we need to do is to set EJS as our templating engine with Express which is a Node.js web application server framework, which is specifically 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.
<%= data %>
If we want to use this data for normal js operations like if-else and loops or other programming statements we can write it in the following form:
<% if(data == "1"){%>
<h5>Cricket</h5>
<%}else{%>
<h5>Football</h5>
<%}%>
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:
let data = '<%-data%>'
Now you can perform any operation on the data variable that has the same value as the EJS passed data variable.
Filename: index.js
javascript
let express = require( 'express' );
let app = express();
app.set( 'view engine' , 'ejs' );
app.get("/", function (req, res) {
res.render("home", {name: 'Chris Martin' });
});
app.listen(3000, function (req, res) {
console.log("Connected on port:3000");
});
|
The default behavior 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.
Filename: home.ejs
html
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content=
" width = device -width,
initial-scale = 1 .0">
</ head >
< body >
< center >
< h2 >
Text from EJS variable passed
from server is =
</ h2 >
< h2 style = "color:red" ><%=name%></ h2 >
< br >
< h2 style = "color: blue;" >
Text from EJS variable passed
from script tag =
</ h2 >
< h2 style = "color: blue;"
id = "text_from_script" >
</ h2 >
< br >
< h2 style = "color: green;" >
Text from EJS variable passed from
script tag after manipulation =
</ h2 >
< h2 style = "color: green;"
id = "text_from_script_manipulated" >
</ h2 >
</ center >
< script >
let name = '<%-name%>'
let heading = document
.getElementById('text_from_script');
heading.innerText = name;
name = "Mr. " + name;
let heading_man = document.getElementById(
'text_from_script_manipulated');
heading_man.innerText = name;
</ script >
</ body >
</ html >
|
Name variable has been passed from server to name.ejs file and showed using h2 tag, to use the name variable in the script tag all we did is declare a variable and pass the EJS variable to declared variable using:
let name = '<%-name%>'
Steps to run the program:
- After creating all the files go to the root directory of your project folder.
- Run command prompt in this directory.
- Type the following command to run your program and see the output as displayed.
node index.js
Output:
Share your thoughts in the comments
Please Login to comment...