Categories
28°C, New York
Home EJS How to use Partials In EJS

How to use Partials In EJS

Passing Data to the Template

Handling Form Data

EJS supports partials, which are reusable snippets of code. To use partials, you typically create a partials directory inside views.

Create a Header Partial:

In views/partials/header.ejs, add some HTML content.

<header>
    <h1>Welcome to GFG EJS data passsing example</h1>
</header>

Create a Footer Partial:

In views/partials/footer.ejs, add some HTML content.

<footer>
    <p>Copyright © from footer</p>
</footer>

Include the Partial:

Modify index.ejs to include the partials.

HTML 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width,
                   initial-scale=1.0">
    <title>Exapmle</title>
</head>
<body>
    <%- include("partials/header.ejs") %>
    <h1>
        Hello <%= name %>!
    </h1>
    <ul>
        <% items.forEach(item => { %>
            <li><%= item %></li>
        <% }) %>
    </ul>
    <%- include("partials/footer.ejs") %>
</body>
</html>

The <%- include(“partials/header”) %> and <%- include(“partials/footer.ejs”) %> line includes the content of header.ejs and footer.ejs in the index.ejs template.

Output:

Output

Passing Data to EJS Templates

EJS (Embedded JavaScript) is a simple templating language that lets you induce HTML language with plain JavaScript. It’s especially popular in Node.js operations for rendering dynamic web runners. It is used to dynamically render HTML pages on the server side. This article will give a detailed companion on how to pass data to EJS templates.

Similar Reads

Step to Create a NodeJS and Installing Module

Firstly, let’s set up a basic Node.js project with EJS....

Passing Data to the Template

In the app.js file, the res.render method is used to pass data to the EJS template. The second argument to res.render is an object containing key-value pairs. The keys correspond to the variable names in the EJS template, and the values are the data you want to pass....

Using Partials

EJS supports partials, which are reusable snippets of code. To use partials, you typically create a partials directory inside views....

Handling Form Data

EJS can also be used to render forms and handle form submissions. Here’s a simple example:...

Conclusion

EJS is a powerful yet simple templating language that integrates seamlessly with Node.js. By following this guide, you should be able to set up an EJS-powered application, pass dynamic data to your templates, use partials to organize your code, and handle form data efficiently. EJS allows for the creation of maintainable and dynamic web applications, making it a valuable tool in any web developer’s toolkit....

Tags:
#EJS-Templating Language #Express.js #Node.js #Web Technologies

Passing Data to the Template

Handling Form Data