Template Engine - node Js

 admin.js

 

 Here the intresting thing is that just adding it in 1 route we can access the data in the other field. That's really intresting. Here we are not using module.exports as it has got two exports.

 

shop.js

 


 

and if we console it than we wil get the data.

The main disadvantgae is that data is shared among all user. So, it can be access by anyone

 

Templating Engine

npm i --save ejs pug express-handlebars

To use a templating engine evrweher

 

Use app.set (Although app.set has more features u can read it in express documentation
)

Although the view folders by default is already currrent directory/views but for demonstration purpose we aare still doing it.

 create shop.pug

 But we are not telling node js to render it..although we have set everything but we havnt yet told them ..so lets tell them

 Outputing dynamic content using pug

We can pass dynamic content as shown below

 and than we can driectly use it in our admin.js

Here you are seeing title is dynamic instead of static content



 

 In this you are seeing each prodduct in prods a special syntax provided by pug and also html is written as per pug

 EJS

1) 404 page


 

Working on Layout wth partials

Create folder named includes

We are sharing three common code head.ejs ,nav.ejs and endi.js

1) Head.ejs


It contains shared head code 


Add the common code to than 404 page . the location should be seeing from 404 page to the partial file and it will than get render

We are adding - so as to add script as well. It is done so as hackers can't add unitenitional files. If we don't add than it will render as text.

 

ii)end.ejs

 

 

j

 

Comments

Post a Comment

Popular posts from this blog

Form Part 2

App.jsx import React , { useState } from 'react' ; const App = () => { const [ Name , setName ] = useState (); const [ Pass , setPass ] = useState (); const [ seename , seename1 ] = useState (); const [ seepass , seepass1 ] = useState (); const inputEvent = ( event ) => { setName ( event . target . value ); }; const inputEvent1 = ( event ) => { setPass ( event . target . value ); }; const onSubmit = ( event ) => { event . preventDefault (); seename1 ( Name ); seepass1 ( Pass ); } return ( < > < div > < form onSubmit = { onSubmit } > < h1 > Hello { seename } { seepass } </ h1 > < input type = "text" placeholder = "Enter your Name" value = { Name } ...
Read more

Event mini project by Thapa#33

 Index.jsx import React from 'react' import ReactDOM from 'react-dom' ; import "./index.css" ; import App from "./App" ; ReactDOM . render ( < App /> , document . getElementById ( "root" )); index.css * { margin : 0 ; padding : 0 ; } div { width : 100% ; height : 100vh ; background : rgb ( 221 , 39 , 221 ); display : flex ; flex-direction : column ; justify-content : center ; align-items : center ; } button { padding : 12px 20px ; background : #9b59b6 ; color : white ; border : 2px solid #ecf0f1 ; outline : none ; border-radius : 5px ; text-transform : uppercase ; cursor : pointer ; } app.jsx import React , { useState } from 'react' ; const App =() => { const Purple = "yellow" ; const Old = "Click Me" const [ bg , setBg ] = useState ( Purple ); const [ name , newName ] = useState ( Old ); const bgChange =() => { let ...
Read more

De-mystifying 'this' keyword of Javascript

 Hello today I will be talking about 'this' keyword of javascript.It is one of the most confusing term of javascript. Since it is quite a confusion thing I will be compiling stuffs based on the materials I have learnt from the internet so as to help myself in the future. 'this' keyword can be considered quite the literal this word is English alphabet atleast for the initial understanding. Let's consider a main table of a house. It will be termed in js langauge as this.table = "main table" If we console log window.table or this.table than we will be considering the main house's table console.log(window.table) //main table Now let consider the dinning table of the house. It will be  this.dinning={ table:"dinning table"} If we want to call it will be  this.dinning.table // dinning table   Now let consider a private room and in this case it will be a function and if we want to use there we can use as mentioned below let johnsroom = { table:'j...
Read more