EXPRESSJS EJS Template
official webiste ejs.co
Embedded javaScript Templating-> EJS Template -> Template engine Based on javaScript
EJS provides a clean and convenient way to create view in expessjs
BENEFITS:create Dynamic and Reuable Template
Ejs Template Tag syntax
TAG description
<% %> controll flow, no output
<% = %> Output escaped value (safe)
<% - % > Output unescaped value(unsafe)
<% # %> comment not showing output
<%-%> Remove the folling newline
<%_%> remove white space before IT
<%_%> remove all white space after IT
benifit Prevents(save) for XSS attacks
Example
<ul>
<% for(let i=1;i<=3;i++){%>
<li> item <% = i %> <li>
<% } %>
</ul>
create new project
npm install -y
npm install express nodemon ejs
note fist nodejs,exprss nodemon for contine server run and ejs template engine
GO package.json file scripting run developing
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start":"nodemon index.js"
},
if you want to javaScript ES6
then Go package.json after"main": "index.js", write
"type":"module",
THAN create index.js file and write inclue
const expess =require('expess')
or ES6
import express from 'express';
RUN
npm run start
variable value print
res.render("about" ,{title:'About page',message:'wekcome to EJS'})
<title> <%= title %> </title>
javaScript control print loop ,condition
<% if(message){%>
<p><%= message %> </p>
<%}else{ %>
<span>Ther is no message</span>
<% } %>
loop
<% let items = ["apple","Banana","orange","Cherry"] %>
<ul>
<% items.forEach( item => { %>
<li> <%= item %> </li>
<% }) %>
</ul>
// indexing array
// array object
app.get('/about',(req,res)=>{
var users=[
{name:'hotdr kumar',age:45,city:'mumbai'},
{name:'akshsy kumar',age:34,city:'patna'},
{name:'tsrd kumar',age:65,city:'ghar'},
{name:'tsmrd kumar',age:54,city:'hforla'},
];
res.render("about",{
title:"Home page",
message:"welcome",
items:users
})
})
//view template
<table border="1" width="500px">
<% items.forEach( item => { %>
<tr>
<td> <%= item.name _%></td>
<td> <%= item.age _%></td>
<td> <%= item.city _%></td>
</tr> <% }) %>
</table>
@@@@@@@@@@@@ EJS Template
From Submission
Partials
Serving Static Files(css,js,Images)
app.use(express.urlencoded('extended:false')) // use for form submited in index page
app.get('/form',(req,res)=>{
res.render('form')
})
app.post('/submit',(req,res)=>{
const name=req.body.myname
const message=`Hello,${name} You submitted the form`
res.send(message)
})
EJS TEMPLATE :Partials
header,menu,sidebar reusbility
method <%- include ('header')-%>
method <%- include ('footer')-%>
app.use(express.static('public')) // use for css index.js
)
thanks for this is very helpful