EJS Variables (Injecting Values)

EJS Variables: In this tutorial, we are going to learn about the EJS variable (injecting values) with examples.
Submitted by Godwill Tetah, on July 08, 2019

Hi! Welcome to NODE AND EJS TEMPLATE ENGINE SERIES. Today, we will talk about EJS variables or how we can inject values?

Just like normal JavaScript, EJS can read assigned value to variables on the server and render them in the template.

Take Note! You should have Node.js installed in your before you can start using EJS in this article.

To download Node JS, visit nodejs.org, then install.

* BASIC NODE.JS/EXPRESS KNOWLEDGE REQUIRED

To begin, ensure you have EJS and express installed via npm.

To install EJS, simply open a terminal/command prompt and type the following command:

    npm install ejs
        or
    npm install ejs –save

You can use either command prompt or PowerShell as terminal.
We will create 2 files, as usual, one for our express server file and the second our EJS file.
EJS helps us embed JavaScript code if statements and loops inside HTML.

Let's briefly go through the EJS tags first. These tags may be weird, but it's super easy when you understand.

<%= %> : Prints value: For example <%= 2 + 2 %> prints out 4.
<% %> : is used to include some programming methods we want to use. Like If/else and loops.

Open your text editor and type the following code, save as app.js.

var express = require('express');
var ejs = require('ejs');
var app = express();
app.set('view engine', 'ejs');

app.get("/", function(req, res) { // root route or home route
    res.render("home", {
        x: "Lucy Christ",
        age: 16
    });
});
app.listen(3000, function() {
    console.log("server is listening!!!");
});

Unlike any other express app, we used res.render then the EJS file and not res.send. Also, I didn't require the EJS app. There's no problem!. You can do so if you wish.

Now, let's create our ejs file.

Open a text editor and type the following code, save as home.ejs

<h1>Hello, my name is <%=x%> and i am <%=age%> </h1>

As usual, create a folder in your app.js directory called views.
Cut and paste the ejs file in the views folder.
Take Note: The folder name views is not a random word I selected but it's the reserved folder name where express checks for template engine by default.
In our express server, we used app.set() and passed in our template engine, unlike our other examples.

Finally, initiate the app.js file with node app.js in a terminal and view the port in a browser.
localhost:3000

Explanation:

You can clearly see that wherever the name the variable is declared in the ejs code, the value is printed out just like in normal JavaScript.
Take note of the tags I used in my ejs code.