📌  相关文章
📜  ejs (1)

📅  最后修改于: 2023-12-03 14:40:57.152000             🧑  作者: Mango

EJS - Embedded JavaScript Templates

EJS Logo

EJS is a popular templating language that allows for easy and efficient generation of HTML markup with JavaScript. It provides a simple and straightforward syntax for embedding JavaScript code within HTML templates.

Features

  • Simple Syntax: EJS uses a concise and intuitive syntax that closely resembles plain HTML, making it easy to write and understand.

  • Embedded JavaScript Code: EJS allows you to embed JavaScript code within <% %> delimiters, enabling dynamic content generation and logic execution.

  • Template Reusability: EJS supports partials, which are reusable templates that can be included within other templates. This allows for efficient code organization and reuse.

  • Server-side and Client-side Rendering: EJS templates can be rendered on both the server-side and the client-side, allowing for flexible architecture and code sharing between the frontend and the backend.

  • Data Injection: EJS allows for the injection of data into the templates, enabling the dynamic rendering of content based on variables, loops, and conditionals.

Installation

You can install EJS using npm:

npm install ejs
Getting Started

To use EJS in your application, you need to set up the rendering engine. Here's an example of how to configure EJS in an Express.js application:

const express = require('express');
const app = express();

app.set('view engine', 'ejs');
app.set('views', __dirname + '/views');

app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Demo', message: 'Hello, World!' });
});

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

In this example, we set the view engine to 'ejs' and specify the views directory. Then, we create a route handler for the root path '/' and render the 'index' template with some data passed in as an object.

Usage
Markup

EJS templates can contain regular HTML markup with embedded JavaScript code using the <% %> delimiters. Here's an example of a basic EJS template:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <h1><%= message %></h1>
  </body>
</html>

In this example, the <%= title %> and <%= message %> are placeholders that will be replaced with the corresponding values passed in during rendering.

Data Injection

Data can be injected into EJS templates by passing an object to the res.render() method in Express.js. Here's an example:

app.get('/', (req, res) => {
  res.render('index', { title: 'EJS Demo', message: 'Hello, World!' });
});

In this example, the 'index' template will have access to the title and message variables within its JavaScript code.

Iteration and Conditionals

EJS supports iteration and conditionals using JavaScript code blocks. Here's an example of a loop and an if statement in an EJS template:

<ul>
  <% for(let i=0; i<users.length; i++) { %>
    <li><%= users[i].name %></li>
  <% } %>
</ul>

<% if(users.length === 0) { %>
  <p>No users found.</p>
<% } %>

In this example, the template iterates over an array of users and displays their names. If the users array is empty, a message is displayed instead.

Partials

Partials in EJS allow you to reuse portions of templates across multiple files. Here's an example of using partials in an EJS template:

<!DOCTYPE html>
<html>
  <head>
    <title><%= title %></title>
  </head>
  <body>
    <%- include('header') %>
    
    <h1><%= message %></h1>

    <%- include('footer') %>
  </body>
</html>

In this example, the 'header' and 'footer' partials are included within the main template. This allows for modular and reusable code organization.

Conclusion

EJS is a powerful and flexible templating language that simplifies the process of generating dynamic HTML content. With its simplicity, server-side rendering capabilities, and support for data injection and code logic, EJS is an excellent choice for building dynamic web applications.

For more information, visit the EJS GitHub repository or refer to the official EJS documentation.