Quartz 4

Views

2 min read

Here’s a comprehensive breakdown of the “Views” lesson on The Odin Project:

1. Introduction to Views and Template Engines

Views display dynamic HTML using template engines, where variables, conditionals, and loops are embedded. EJS (Embedded JavaScript) is used in this lesson for its HTML-like syntax.

2. Setting Up EJS

  • Install EJS: npm install ejs.
  • Create a views folder for EJS templates.
  • In app.js, configure EJS: 
    const path = require("node:path");
app.set("views", path.join(__dirname, "views"));
app.set("view engine", "ejs");

3. EJS Syntax

  • Use <% %> for logic and <%= %> to output values: 
    <% const animals = ["Cat", "Dog", "Lemur", "Hawk"]; %>
<ul>
  <% animals.map(animal => { %>
    <li><%= animal %>s are cute</li>
  <% }) %>
</ul>

4. Rendering Views in Express

  • Create an index.ejs in views: 
    <html><body><%= message %></body></html>
  • Route setup in app.js: 
    app.get("/", (req, res) => {
  res.render("index", { message: "EJS rocks!" });
});

5. res.locals and Undefined Variables

  • Properties in res.locals are globally accessible in views.
  • Accessing an undefined variable directly causes a reference error, while locals.variable returns undefined.

6. Reusable Templates

  • Use include to import templates like a navbar: 
    <%- include('navbar', { links: links }) %>
  • Define navbar.ejs: 
    <nav><ul><% links.forEach(link => { %><li><a href="<%= link.href %>"><%= link.text %></a></li><% }) %></ul></nav>

7. Nested Directories

  • Organize templates in subdirectories and update include paths accordingly: 
    <%- include('users/user', { user: user }) %>

8. Serving Static Assets

  • Define the static directory for CSS, images, etc.: 
    const assetsPath = path.join(__dirname, "public");
app.use(express.static(assetsPath));
  • Link a CSS file in index.ejs: 
    <link rel="stylesheet" href="/styles.css">

This guide covers template rendering, dynamic data handling, and layout reusability in EJS. For the complete lesson, visit The Odin Project - Views.

Graph View