Hey, guys. 1
Welcome back. 2
In the last video, we saw briefly how we can get started using EJS. 3
In this video, we're going to dive a bit deeper into EJS syntax and see how we can use the different EJS tags 4
in order to achieve what we want using this templating tool. 5
There are quite a few EJS tags and these are some of the ones that you'll commonly see. 6
Now the structure of an EJS tag, no matter which type it is, it's all pretty simple. 7
We always start with an angle bracket and then a percentage sign (<%), and we usually always end with a percentage 8
sign and an angle bracket (%>). 9
Now the part that's different is usually in the opening tag. 10
For example, we might have an equal sign (=), we might have a minus sign (-), we might have another percentage (%) 11
or a pound sign (#), etcetera. 12
Let's go through each of them and see how they're different. 13
The first one you've already seen and used, which is the one with an equal sign (=), and this says that 14
whatever goes in between the open and closing parts of the tag will be interpreted as JavaScript 15
but in addition, there will be an output that's going to be put into that HTML or EJS file. 16
For example, we can insert a variable and that variable could be a name, right? 17
It could equal the string, 18
"Angela." And that means that when this EJS tag is rendered in the browser, you will see that name show 19
up on the website. 20
So it's interpreted JavaScript with an output. 21
If we take away that equal sign and we just have the pure EJS tag, no modifications to the opening tag, 22
then this is executable JavaScript code. Inside here 23
you could write any sort of JavaScript code and it will be just treated like JavaScript code, but it's 24
interpreted inside an EJS file. 25
Imagine you can write JavaScript inside HTML, 26
that's essentially what this tag allows you to do. 27
You could, for example, write a console.log and you will see in the console when that page is loaded 28
up, whatever it is you want to log. 29
But one thing to remember, though, is this does not give an output. 30
So the code in here will be evaluated, but there will be nothing that shows up when it gets converted 31
to HTML and displayed in the browser. 32
The next EJS tag has a minus sign (-) after the opening tag, 33
and what this says is whatever goes in between the opening and closing tags should be interpreted as 34
HTML. 35
That means you can actually write HTML or in our case, send the HTML to the EJS file and that will be rendered 36
and interpreted as HTML. 37
So it means that when this is displayed in the website it won't be, "h1" 38
"Hello", closing tag "h1" it will actually just be hello in a big h1 font or whatever styling you chose 39
for your website. 40
Now the next one is even simpler, and this is probably something that you'll very rarely use. 41
This is an escape EJS tag. By adding an extra percentage sign to the opening tag (<%%) or an extra percentage sign 42
before the end of the closing tag (%%>), 43
what we can do is we can escape the EJS tag, which means that you can actually show the tags. 44
Let's say you're writing a website where you want to teach people about EJS tags and you want it to say, 45
"Well, this is what an EJS tag looks like when you want to have an output." 46
Well, if you actually wrote this in your EJS file, this part would all be interpreted as EJS and you 47
would see nothing of it on the website. 48
So if you wanted to actually show the angle bracket plus a percentage sign for it to not be interpreted 49
as EJS, but just as plain text, then you can add a percentage sign after the opening tag or before 50
the closing tag. 51
Next is how you write EJS comments, just as we have the double slash (//) in JavaScript, where everything comes 52
afterwards is not executed as HTML code or JavaScript code, in EJS 53
you add a pound sign (#) or a hashtag if you will, after the opening bracket and then everything that goes 54
inside will be interpreted as not code but as a comment in that code file. 55
So none of it is executed or interpreted or rendered. 56
Finally, we have the "include" in this syntax. 57
We have a minus sign after the opening tag and then we have the keyword include and then we have a set 58
of parentheses where inside the parentheses we add the name of an EJS file. 59
What this allows us to do is to insert another EJS file into this current EJS file where this tag is and 60
we're going to explore this in greater detail in later lessons where we learn about Layouts and Partials. 61
But essentially what this allows us to do, is to create a website where we have the same, say, header 62
and footer, which is just, you know, maybe the name of our website or maybe just some copyright text 63
and some links, etcetera. 64
Now these two parts are going to be the same in all of our website, but this part is where we're going 65
to change each time. 66
Instead of having to write these bits of header and footer code every single time in our EJS, what we 67
can do is we can use "include" to simply insert a header.ejs and a footer.ejs and then all we have to do 68
is concentrate on the part that does in fact change, which is the body of the website. 69
Now hopefully you've seen some of the different examples of EJS tags, 70
so what does this look like in actual code? 71
Here I've got a variable in my index.js called bowl and in my fruit bowl there's apples, oranges and 72
pears in an array. 73
When I render my index.ejs, I pass along this array in the variable called fruits and that gets picked 74
up in my index.ejs file. 75
Now, using the special EJS brackets, 76
so just the angle and percentage sign (<%), 77
remember this is the only-code tag. 78
So only runs the code doesn't render anything on screen. 79
Then I can actually insert actual JavaScript code in my HTML or EJS file. 80
I can loop through this array and I can render each of the fruits in there as a list item. 81
And inside this list item, I'm using the other type of tag, which is the angle bracket percentage equal 82
sign (<%=), 83
and this remember is a type of output EJS tag, that means that something is actually going to be outputted 84
into HTML to be displayed in my website. 85
And in my case, that's exactly what I want because I want an unordered list with all of my fruits showing 86
up one after the other in the order that they are created in the array. And this is what it would look 87
like. 88
Now let's try an exercise and test out your ability to use some of these different EJS tags. 89
What I've got in the starting file is an index.js that has an app.get() already written, 90
and in the app.get(), I've got this data object that's being sent over when we render our index.ejs. 91
So I'm sending over some title text. 92
I'm sending over the current number of seconds on the clock. 93
So if we have a clock and currently it's 10:05:23 seconds, then this is the value (23) that I'm sending in 94
to this 95
seconds property. And I've also got an array and some HTML content. 96
In addition, I've included a footer.ejs file which just contains a little bit of footer, some copyright 97
text, 98
and what I want you to do is to modify the index.ejs file so that you end up with two potential options. 99
You end up with the title displayed in an h1, 100
you end up with the current number of seconds displayed in this paragraph element, and if the current 101
number of seconds on the clock is odd, then we're going to show no items, 102
but if it's even, then we're going to display the items that we got from our server. 103
And then finally we're going to render this HTML as actual HTML. 104
So notice I've got the "em" tags around it and I want to show this as HTML. 105
And finally, we're going to pull in this footer right here using the final type of EJS tag that we talked 106
about, which is the angle bracket percentage minus includes, 107
and then we add in the name of the file. 108
This is the exercise for you. 109
And as always, we're going to start off by cd'ing into the extracted folder. 110
We're going to run npm i to install all of the required node modules, and then you can use Nodemon to run 111
the solution.js to see what it should look like. 112
Here's our title, here's our HTML being rendered, here's our list, here's the number of current seconds, 113
look at how it's even, 114
so we're getting our list. 115
But if I refresh again, I get an odd number of seconds, 116
it says, "No items to display." 117
And then my copyright comes from my footer file right here. 118
And what you have to do is look through this index.ejs file and see how you can get all of these different 119
parts completed one by one. 120
So pause the video now and give that a go. 121
All right, let's run through the solution together. 122
First, I'm going to split my pane so that I can see the index.js side by side with the Index.ejs, so 123
I can see all of the things that are being sent over as variables over to my index.e js file. 124
So the first one I'm sending over is the title and I can replace it here, but more importantly, I 125
want it to go into the h1. 126
Let's go ahead and add the EJS tag, which is the one with an equal sign because it gives us an output value 127
and I'm going to write, title, in here. 128
So now let's hit Save. 129
And before we go any further, let's go ahead and actually run this project. 130
So making sure that you've installed all the node modules, then using Nodemon to run Index.js and then 131
we can open it up inside Chrome and you can see that the title is now being placed in here because it 132
says, "EJS Tags". 133
Next one is the current second, which comes from this property called seconds. 134
So again, let's go ahead and add our output EJS tag and put in the word seconds so that it matches this 135
one. 136
Let's hit, Save and Refresh. 137
You can see that now the current second in the time is now being shown right here. 138
Next one is to write some actual code. 139
So we've got an if-statement that's currently just being rendered on our website. 140
That's not what we want, 141
we want this to be actual code so that if the number of seconds modulo two is equal to zero (seconds % 2 === 0), which 142
means that it's currently an even number of seconds, then we're going to show an unordered list, 143
otherwise, we're going to show this paragraph element. Here because this is JavaScript code that we want 144
to be evaluated, 145
but no output is needed, 146
we use the EJS tag that is simply just a normal no-output EJS tag. Let's put that there and then enclose 147
each line of our JavaScript inside those angle brackets. 148
We've got an open and close here and then we've got an open and close here. 149
So notice how every single part of the JavaScript, all of these curly braces need to be enclosed in 150
EJS tags, but the parts which are simply just HTML do not. 151
So now let's hit Save. 152
Let's go over here, Refresh. 153
You can see right now it's an even number of seconds we get nothing showing up. 154
If I refresh until I get to an odd number of seconds, that paragraph element now shows up on screen 155
right here. 156
But if it's not, then I get this empty unordered list element. 157
Now, the thing to remember with EJS is every single line of JavaScript needs its EJS tag open and closed. 158
That means you can't just put this around the entire section of EJS and then hope somehow this is going 159
to take into account all of it, 160
because remember there are bits of HTML in here like the ul and the p, and it's also important to remember 161
not to forget these little things like the curly braces at the end also need EJS tags around them. 162
But once you get used to it, then it gets a little bit simpler. 163
So now the list goes in here 164
if the current second is even, otherwise it should display, "No items to display." 165
We've sorted this part out, but we now need to display our list. 166
How do we display our list? 167
Well, we have list items, right? 168
And we're sending over the items right here. 169
Apple, banana, cherry. 170
And so we can pick up the items in here by using a for loop. 171
And we can either use the traditional for loop, which involves the let i = 0 and so on and 172
so forth, 173
or we could use a for each. 174
So we could say we get this variable called items and then we use for each to loop through each of the 175
items in the array which I'll call fruit, for each fruit, 176
let's go ahead and do something. 177
And that something is to render it inside an li. 178
This is where that fruit should go into. 179
Now of course this is JavaScript code, so it requires the opening and closing EJS tags, and similarly down 180
here as well. 181
Now, when I go ahead and run this code, what do you think will happen? 182
Do you think we're going to get the names of the fruits or something else? 183
So let's hit Save. 184
Let's go over here and Refresh. 185
You can see I'm just getting the 186
word fruit being printed many times in my list item. 187
Why is that? 188
Well, you might have already realized I need the EJS tag that gives me an output for this to actually show 189
up correctly. 190
So let's hit Save. 191
Let's go ahead and Refresh. 192
And when we get an even number of seconds, we get apple banana cherry being rendered. 193
If you used the for loop where you have the i = 0; i++, i to the limit, that's totally 194
fine as well. 195
I thought I'd just show you a different way of doing this because I demoed the other one in the slide 196
deck already, which for loop you use is totally up to you. 197
But the fact that you can get each of the fruits rendered in the list is how you pass this part of the 198
challenge. 199
So now finally we add a little bit of HTML content which comes over as HTML content. 200
So remember the tag for this is angle bracket percentage sign minus sign (<%-). 201
And this is output escaped. 202
So it means that we can actually put in our HTML content in here and it will be interpreted as HTML. 203
So this is some strong text and that's because it's got these "strong" tags around it. 204
Whereas if we change this minus sign to equal sign, then we will get the full variable as a text string. 205
So that's not what we want. 206
Finally, we have our footer, which is in this file, footer.ejs, and in order to render it we need angle 207
bracket percentage sign minus and then the keyword include and then we add the name of the file, which 208
is footer.ejs. 209
Now for future references, 210
remember that this file has to also be in the views folder along with the file that you're writing. 211
This included. Structured kind of like this. 212
Now let's hit Save. 213
Let's go and refresh our web page. 214
You can see our footer is now being rendered in here. 215
So there you have it. 216
Did you manage to get the challenge correct? 217
Did you have any problems? If you did, take a look inside the solution.ejs and see how you can fix your 218
problems. 219
In the next lesson, we're going to talk more about passing data from our server to the client side 220
and client side to server using EJS. 221
So for all of that and more, I'll see you there.