123 Main Street, New York, NY 10001

Nodejs template engines with Express

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


            
)

1 thought on “Nodejs template engines with Express”

Comments are closed.