In module 3, we will dive into the world of templating engines in
Express.js. Templating engines enable you to generate dynamic
HTML content by injecting data into templates.
3.1 Working with Template Engines…..
What are Templating Engines?
Templating engines are libraries or frameworks that help you create
dynamic HTML content by combining templates and data. They
provide a way to structure and organize your HTML templates while
allowing you to inject dynamic data seamlessly. In Express.js, you can
choose from various templating engines, with EJS (Embedded
JavaScript) and Handlebars being popular choices.
EJS (Embedded JavaScript)
EJS is a templating engine that lets you embed JavaScript code
directly within your HTML templates. This makes it easy to
incorporate data and logic into your views. Here's a simple example
of using EJS in Express:
- javascript
const express = require('express');
const app = express();
const port = 3000;
// Set EJS as the view engine
app.set('view engine', 'ejs');
// Define a route that renders an EJS template
app.get('/', (req, res) => {
const data = { message: 'Hello, EJS!' };
res.render('index', { data });
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
In this example:
We set EJS as the view engine using “app.set('view engine',
'ejs')”.
We define a route that renders an EJS template called 'index'.
The template is located in a directory named 'views'.
We pass data to the template using the “{ data }” object. This
data can be accessed in the EJS template.
Handlebars
Handlebars is another popular templating engine for Express.js. It
follows a more minimalistic syntax compared to EJS. Here's an
example of using Handlebars in Express:
- javascript
const express = require('express');
const exphbs = require('express-handlebars');
const app = express();
const port = 3000;
// Set Handlebars as the view engine
app.engine('handlebars', exphbs());
app.set('view engine', 'handlebars');
// Define a route that renders a Handlebars template
app.get('/', (req, res) => {
const data = { message: 'Hello, Handlebars!' };
res.render('index', { data });
});
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
In this example:
We use the “express-handlebars” package to integrate
Handlebars with Express.js.
Handlebars templates are stored in a directory named 'views'
by default.
We pass data to the template, which can be accessed using
Handlebars syntax.
3.2 Rendering Dynamic Views and Templates
Now that we have set up our preferred templating engine, let's
explore how to render dynamic views and templates in Express.js.
Rendering Views
In Express.js, you render views using the “res.render()” method. This
method takes two arguments:
the name of the view (without the file
extension) and an optional object containing data to pass to the
view.
- javascript
app.get('/', (req, res) => {
const data = { message: 'Hello, Express!' };
res.render('index', { data });
});
In this example, the 'index' view is rendered with the provided data.
The templating engine processes the template, injects the data, and
sends the resulting HTML to the client.
Using Data in Templates
Both EJS and Handlebars allow you to access and display data within
your templates. Here's how you can do it in each:
EJS Example:
- html
<!-- views/index.ejs -->
<!DOCTYPE html>
<html>
<head>
<title>Express EJS Example</title>
</head>
<body>
<h1><%= data.message %></h1>
</body>
</html>
In EJS, you use “<%= ... %>” to embed JavaScript code and output
data within your HTML template. In this case, “data.message” is
displayed as an “<h1>” heading.
Handlebars Example:
- html
<!-- views/index.handlebars -->
<!DOCTYPE html>
<html>
<head>
<title>Express Handlebars Example</title>
</head>
<body>
<h1>{{ data.message }}</h1>
</body>
</html>
In Handlebars, you use “{{ ... }}” to display data. Here,
“data.message” is displayed as an “<h1>” heading.
Both EJS and Handlebars offer additional features for controlling the
flow of your templates, including conditionals, loops, and partials
(reusable template components).
3.3 Passing Data to Views from Express
In Express.js, you can pass data to views from your route handlers,
allowing you to dynamically generate content based on server-side
data. We've already seen examples of this in previous sections, but
let's dive deeper into how to pass data to views.
Data Object
To pass data to a view, you create a JavaScript object containing the
data you want to make available in the view. This object is then
passed as the second argument to “res.render()”.
- javascript
app.get('/', (req, res) => {
const data = { message: 'Hello, Express!' };
res.render('index', { data });
});
In this example, the “data” object contains a single key-value pair,
where the key is 'message' and the value is 'Hello, Express!'. This
data can be accessed in the view using the templating engine's
syntax.
Dynamic Data
In practice, data passed to views is often generated dynamically
based on user requests, database queries, or other
server-side logic.
For example, you might fetch user information from a database and
pass it to a user profile view:
- javascript
app.get('/profile/:id', (req, res) => {
const userId = req.params.id;
// Fetch user data from the database based on userId
const userData = /* Database query logic */;
res.render('profile', { user: userData });
});
In this example, the “userData” object contains user-specific data
fetched from the database. This data is then passed to the 'profile'
view, where it can be used to render the user's profile page.
Conditional Rendering
One common use case for passing data is to conditionally render
content based on the data. For instance, you might want to display a
different message to logged-in and logged-out users:
- javascript
app.get('/', (req, res) => {
const isAuthenticated = /* Check if user is authenticated */;
const message = isAuthenticated ? 'Welcome, User!' : 'Please log
in.';
res.render('index', { message });
});
In this example, the “isAuthenticated” variable is used to determine
whether the user is logged in. Based on this condition, a different
message is passed to the 'index' view, which is then displayed
accordingly
Launch your Graphy