EJS Flashcards
(7 cards)
what is ejs and templating
templates are fixed layouts that can fetch multiple results based on the information change eg a resume template has fixed design we only need to change data for resume generation it can genarate varipus resume with fixed design and different information
whenever in our webiste we are using similar layouts we dont create html file dfor all the instance either we create a template(layout) of html file to send with different information
there are various tools for templating but we are uismng ejs : embedded javascript templates
ejs is simple templating language that let you genrate an html template in which can also write plain javascript logic
using ejs
ejs is package which is rquire automatically by express so we dont have to require it but we have to set veiw(template) engine means there is a property in express as veiw engine means the engine used to define / write veiws(template) in this case we need to define it as ejs and this can be done throught app.set. app.set is used to set a value for a setting or a configuration option inside the Express application.
The syntax is:
app.set(settingName, value)
For example:
app.set(‘view engine’, ‘ejs’);
This tells Express, “Hey, when you render views, use EJS templates.”
so to render ejs template the code is
app.set(“veiw engine”,”ejs”);
app.get(“/’,(req,res)=>{
res.render(home.ejs);
})
few things to note:
1) when we send the ejs template we render(res.render) ejs template not send (res.send) them as res.send can send strings,arrays,html but it will make the code bulky and unreadable
2)to store our ejs template we create veiws directory in our main directory as when express searches for template to render it look for veiw directory therefore directory structure looks like this
ejsDir->veiw->home.ejs (this home.ejs contain web page layout code)
to run file in directory directory using nodemon
code in powershell : nodemon path of file
example : nodemon C:\Users\LENOVO\OneDrive\Desktop\Backend\ejsDir\index.js
views directory error fixing
when you view folder : home.ejs is in the ejsDir and you are running sever from backend which is parent folder of ejsDir then node cant find home.ejs therefore to fix this error we define the path for views i.e you say to node whenever you search for view folder search in the path specified
1) require the path :
const path = require(“path”);
2) app.set(“views”, path.join(__dirname, “/views”));
__dirname is automatically the path to the folder where index.js is running (i.e., ejsDir).
path.join(__dirname, ‘views’) correctly joins it to ejsDir/views.
res.render(‘home’) will look for home.ejs inside that views folder.
interpolation syntax
these are embedded expression in our html markup means will insert(embedded) some expression in our html code whose value will be evaluated later on
using this we can make our ejs dynamic i.e vary according to data not just static
these are like literal `` in which we used ${} to make our output dynamic
the interpolation works through tags
the output tag is : gives output in form for html escaped : string or text form
<%= opening tag
%> closing tag
example :
in ejs
<h3> <%= 1+2 %></h3>
// prints 3
<h3> <%= "apnacolloge".toUpperCase() %></h3>
// prints APNACOLLEGE
etc
html escaped mean
steps for passing database data to ejs
we often get data from the database so how to use them in ejs file to make templaing easy
1) store the value in a varible that you care getting from the database
2) while rendering, name it in form of key value pair inside the object
example res.render({num:rolldice})
3) you can now use this num directly in ejs like <%= num *2 %>
note Shortcut (ES6 feature):
“If the key and the variable name are the same”,
you don’t have to repeat them.
Instead of { num: num, num2: num2 },
you can just write: {num,num2} example:
let rollDice=Math.floor((Math.random()6)+1);
let rollDice2=Math.floor((Math.random()6)+1);
res.render(“rollDice.ejs”,{rollDice,rollDice2}); note key name and varible name should be same
app.get(“/rolldice”,(req,res)=>{
let rollDice = store data from database you will learn this in future;
res.render(rolldice.ejs,{rolldice});
}
how to use use control flow in ejs
to use control flow like if else,loops,while statement we use this interpolation tags:
<% you js code here %>
example: print you can roll dice again if dice number is 6
so : <% (rollDice==6) { %>
<h2>you can roll dice again</h2>
<% } %>
from above example we can see there should be only js part in the <% %> all ohter part should be in the form of html tags
same in case of loops
example : given are name of follower print there list
followers is rended from the index.js file
<ul>
<% for(name in followers){%>
<h2> <%=name %></h2>
<% } %>
</ul>
includes in ejs
these are the ways to create sub template in our code
means it is used to include the repitive code or a html template in our different page routes
example : header and footer are almost common in every footer so we make there sub template and then using the include we include them in our desired routes templates
to create sub template and use them these are the steps
1) make a folder (name: include note any name can be given)
2) create the sub template - header.ejs and write you subtemplate code
3) go to your main template route where you want to add these sub template and write the following
<%- includes(“foldername/header.ejs”) %>
synatax is <%- includes(“foldername/filename”) %>
note here <%- is used whose return type is unescaped
