In this video we are going to learn about Template Engine.
A template engine is a tool that enables frontend developers write HTML markup.
That will either insert variables into the final output of the template or run some programming logic at run-time before sending the final HTML to the browser for display.
I am going to use EJS Template engine.
EJS simply stands for Embedded Javascript.
It is a simple templating engine.
Now lets see how can we use ejs template engine.
For that first of all install ejs.
So go to the command prompt and run the command.


npm install ejs


Now go to the project and inside the index.js file.
First of all set view engine.


app.set(\"view engine\",\"ejs\");



Now create a folder inside the root direcotory.
Lets say folder name is views.
Now create some ejs file.
So just click on new file and let say file name is home.ejs.
Create another file about.ejs and one more file contact.ejs.
Now open home.ejs and write the following code.


<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Home</title>
</head>
<body>
<h1>This is Home Page</h1>
</body>
</html>


Now lets open the about.ejs and write the following code.


<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>About</title>
</head>
<body>
<h1>This is About Page</h1>
</body>
</html>

Now open contact.ejs and write the following code.

<!DOCTYPE html>
<html lang=\"en\">
<head>
<meta charset=\"UTF-8\">
<meta http-equiv=\"X-UA-Compatible\" content=\"IE=edge\">
<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">
<title>Contact</title>
</head>
<body>
<h1>This is Contact Page</h1>
</body>
</html>


Now goto the index.js file and here just add here.


app.get('/home', (request, response) => {
response.render('home');
});
app.get('/about', (request, response) => {
response.render('about');
});
app.get('/contact', (request, response) => {
response.render('contact');
});


Now lets run.
So goto the command prompt and just run the index.js file.


node index.js


Now switch to browser and go to the url localhost:3000/home.
You can see the home page.
Now go to about, its showing the About page and if go to the contact this is contact page.

Now Lets pass data to view.
So lets create a object.


app.get('/home', (request, response) => {
var student = {
\"name\":\"jenifer\",
\"age\":25,
\"sex\":\"Female\"
}
response.render('home',{'student':student});
});


Now goto the home.ejs and js display here name,age,sex.


<%= student.name %>
<%= student.age %>
<%= student.sex %>


Now re-run the index.js file, switch to browser and go to the url /home.
You can see here the name age and sex.
Alright,Now let see the if statment.
For that just goto the home.ejs and write the following code.


<% if (user.age>=18) { %>
<h2You are adult</h2>
<% }else{%>
<h2>You are not adult</h2>
<% } %>


Now save and switch to the browser.
You can see here the message your are adult.
If I change the age with 16.
Now you can see you are not adult.4
Now let see the loop.
So goto the home.ejs and write the following code.


<%for(let i = 1; i <= 10 i++) {%>
<p> <%= i%><p>
<%}%>


Now lets run this.
Switch to the browser and just refresh.
You can see here the 1 to 10.
So in this way you Template Engine.