Steps to Implement Partial/Layout Views

Benefits of Partials and Layout Templates in Express:

Step 1 : Install express ejs using:

npm install express ejs

Step 2 : Create an app.js for connecting express.

Step 3 : Create a folder named views in the same directory as your app.js file, and inside it, create an EJS template file named index.ejs insert the following code::

Javascript

// app.js
 
const express = require("express");
const app = express();
const port = 3000;
 
// Set EJS as the view engine
app.set("view engine", "ejs");
 
// Middleware to parse form submissions
app.use(express.urlencoded({ extended: true }));
 
// Define a route to render the template
app.get("/", (req, res) => {
    // Render the 'index' template and pass some data
    res.render("index", {
        title: "Express Templates",
        message: "Welcome to Express Templates!",
        greeting: "",
    });
});
 
// Handle form submissions
app.post("/", (req, res) => {
    const { name } = req.body;
    const greeting = `Hello, ${name}!`;
    // Render the 'index' template with the greeting
    res.render("index", {
        title: "Express Templates",
        message: "Welcome to Express Templates!",
        greeting,
    });
});
 
// Start the server
app.listen(port, () => {
    console.log(`Server is running at http://localhost:${port}`);
});

HTML

<!-- views/index.ejs -->
 
<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>
        <%= title %>
    </title>
    <!-- Add Bootstrap CSS link -->
    <link rel="stylesheet"
          href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
    <style>
        body {
            background-color: #f8f9fa;
        }
 
        .container {
            margin-top: 50px;
        }
 
        form {
            margin-bottom: 20px;
        }
    </style>
</head>
 
<body>
    <div class="container">
        <div class="jumbotron">
            <h1 class="display-4">
                <%= message %>
            </h1>
            <form action="/" method="post">
                <div class="form-group">
                    <label for="name">Enter your name:</label>
                    <input type="text"
                           class="form-control"
                           id="name"
                           name="name"
                           required>
                </div>
                <button type="submit" class="btn btn-primary">Submit</button>
            </form>
            <% if(greeting) { %>
                <p class="lead">
                    <%= greeting %>
                </p>
                <% } %>
        </div>
    </div>
 
    <!-- Add Bootstrap JS and Popper.js scripts -->
    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src=
"https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js">
    </script>
    <script src=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js">
    </script>
</body>
 
</html>

Output:

Explain the concept of Partials/Layout templates in Express Views.

Express is a Node web application framework that simplifies the process of building web applications. One of its key features is the flexibility it offers in rendering dynamic views.

In this article, we will discuss the concept of partials or layout templates in Express views, exploring how they enhance the organization and reusability of code within your web applications.

Table of Content

What are Views in Express ?
What are Partials/Layout Templates ?
Key Concepts Partial and Layout Views
Implementation of Partials/Layout Templates in Express
Benefits of Partials and Layout Templates in Express

Steps to Implement Partial/Layout Views

Javascript

HTML

Explain the concept of Partials/Layout templates in Express Views.

Similar Reads