EJS Abbreviations, Full Forms, Meanings and Definitions
Last Updated :
11 Mar, 2024
Embedded Javascript is abbreviated as EJS. Before knowing about EJS let’s learn what is a templating language. A templating language is a tool or a syntax that allows users to render the data into dynamic web pages that are in a structured format.
Examples of a templating language are:
- ERB, Haml, and Slim for Ruby and Rails,
- Jinja for Python and
- EJS for NodeJS
What is EJS by Definition?
EJS lets you generate HTML markup with plain Javascript. It allows the users to render dynamic web pages to the client side with the information gathered from the server side. Since NodeJS is the most widely used and preferred backend language by the developers, EJS comes in handy, having the majority of the users.
|
TAG
|
NAME
|
FUNCTION
|
|
<%
|
Scriplet Tag
|
Used for Control flow. No output will be generated
|
|
<%_
|
White Space Slurping
|
It is used to remove all the white spaces before it.
|
|
<%=
|
–
|
Outputs the value provided inside this tag to the template, excluding the html tags
|
|
<%-
|
–
|
Outputs all the values inside the tag into the template incluing the html.
|
|
<%#
|
Comment Tag
|
Used for specifying comments hence produces no output.
|
|
%>
|
Ending Tag
|
Plain Ending Tag to enclose the statement
|
|
<%%
|
–
|
Outputs a literal ‘<%’
|
|
-%>
|
NewLine Slurp Tag
|
Trims the following new line
|
|
_%>
|
WhiteSpace Slurping ending tag.
|
Removes all the whiteSpace after it.
|
Steps to Create a Node JS App and Installing Module:
Step 1: Create a NodeJS App using the following command.
npm init -y
Step 2: Install the required packages in your application using the following command.
npm install ejs express
Folder Structure:
Example: In the EJS file , home.ejs, deliver the date and content of the JSON response as an output to the dynamic web page by making use of the ejs tag <%=. We use them under the try catch block to display the error message and to check whether what had went wrong while fetching and rendering the response.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<div class="panel-body">
<small>
<%=post.date %>
</small>
<p>
<%=post.content%>
</p>
<small>By: <%=post.author%> </small>
</div>
</body>
</html>
|
Javascript
const express = require('express');
const app = express();
const PORT = process.env.PORT || 3000;
const post = {
date: '2024-03-11',
content: 'This is the content of the post.',
author: 'GeeksforGeeks'
};
app.set('view engine', 'ejs');
app.get('/', (req, res) => {
res.render('index', { post: post });
});
app.listen(PORT, () => {
console.log(`Server is running on port ${PORT}`);
});
|
Output:
Output
Includes ( ) functionality, ” the code optimizer “:
We can embedd one EJS file into another using the command includes( ). The file name along with the path has to be mentioned in the bracket, Example: “./views/users.ejs“. This functionality in EJS reduces a lot of code that would have been repeated each time we move from one page to other, where those pages share some set of characteristics in common, for example , the navigation bar and the contact bar below the web page.
If we want to include the edit.ejs file into the users.ejs file at the top, we use this line of command: includes(“./views/edit.ejs”)
Note: We use raw output tag <%- with the include function to avoid double escaping the HTML output.
Conclusion:
By using plain JavaScript, EJS simplifies the process of generating HTML on the server side and delivering dynamic content to the client side. Also EJS serves a valuable tool for developers and programmers those who are working with NodeJS as their preffered backend language.As the development community continues to prefer NodeJS and Express, EJS remains a preferred choice for templating due to its simplicity and integration capabilities.
Share your thoughts in the comments
Please Login to comment...