Table of Contents

EJS

What is EJS? Why do we use it?

EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. EJS stands for Embedded JavaScript EJS let you use variables, loops, conditionals in HTML Template is a dynamic HTML file

Installation

npm install ejs --save

Configure our app to use EJS

Whenever we render a file, Express will look for it in the views directory by default We can override this by including the following lines in Javascript file

app.use(express.static("public"));

Setup View Engine

Setup view engine EJS by including the following lines. You don't have to write .ejs after every template name

app.set("view engine", "ejs");
res.render("home"); // instead of "home.ejs"

Setup Partials

Partials, also known as "layouts", are template that can include in other template e.g. header, footer, navbar etc. We use partials to dry up our code.

To setup partials, put the following lines in each EJS templates

<% include partials/header %>

<h1>This is the home page!</h1>

<% include partials/footer %>

Sample header:

<!DOCTYPE html>
<html>
<head>
    <title>Demo App</title>
  <!-- note the '/' before app -->
    <link rel="stylesheet" type="text/css" href="/app.css">
</head>
<body>

Sample footer:

<p>Trademark 2018</p>
  </body>
</html>

Pass variables to EJS templates

Something you want to display

Syntax

<%= varName %>

In .js file: pass an object (key:value pair) in res.render(, )

EJS Control Flow (233)

Use in logical operation (no need to display)

Syntax

<% %>
<h1>You fell in love with: <%= thingVar.toUpperCase() %></h1>
<% if (thingVar.toLowerCase() === "rusty"){ %>
  <p>GOOD CHOICE!</p>
<% } else { %>
  <p>Bad choice!</p>
<% } %>

<% for (var i = 0; i < posts.length; i++) { %>
  <li>
    <%= posts[i].title %> - <strong><%= posts[i].author %></strong>
  </li>
<% } %>

<% posts.forEach(function(post){ %>
  <li>
    <%= post.title %> - <strong><%= post.author %></strong>
  </li>
<% }); %>

Post Requests!!! (235)

Write post routes, and test them with Postman

mkdir [dir]
npm init
npm install express --save
npm install ejs --save
touch app.js
mkdir views
touch views/home.ejs

Use Package "body parser" to handle <form> data

Express doesn't create req.body for us need to explict tell Express to take the "req.body" & convert it into a Javascript object for us to use. The conversion can be done using body parser

To install package body-parser

npm install body-parser --save

Tell Express to include and use body-parser:

var bodyParser = require("body-parser");
app.use(bodyParser.urlencoded({extended: true}));

Post Request

Form attributes: action="/<routePage>" method="POST" Form attribute: name="var" is added to the req.body as req.body.var

<form action="/addfriend" method="POST">
  <input type="text" placeholder="name" name="newFriend">
  <button>I made a new friend!</button>
</form>

Post route

Use res.redirect([status,] path) to redirect to the URL derived from the specified path

app.post("/addfriend", function(req, res){
  var newFriend = req.body.newFriend; // get from form
  friends.push(newFriend);
  res.redirect("/friends");
});