- What is Template Rendering? 2:35
- Review: What is Template Rendering 5 questions
- What is Pug? 3:00
- Using Pug in Your Express App 4:53
- Review: Pug Basics 5 questions
- Express’s Response.render Method 7:42
- Review Response.render 2 objectives
- Using Logic in Pug 6:12
- Breaking Your Project’s Templates into Partials 7:29
- Review: Pug Inheritance & Logic 5 questions
Preview
Video Player
00:00
00:00
Express’s Response.render Method
7:42Using Response.render is where we'll get to start putting dynamic data into the Express app!
You just saw how Express
renders HTML with Pug.
0:00
However, we've still been
working with only static data,
0:03
sending a fixed HTML
string to the browser.
0:06
The real power of templates comes into
play when you use variables to inject
0:10
customized content, such as a user's name,
a list of shopping cart items, or
0:14
text of a blog post.
0:19
In this video,
we'll create a flash card template.
0:21
The text for this title here, and
the hint are not in the template.
0:24
They are being supplied to
the template through variables,
0:31
which are injected into
the template as it's rendered.
0:34
Let's see how this is done.
0:37
We'll start by shaping our
index.pug file a bit more.
0:40
We are building a flash card up.
0:43
So, I will rename the title
to be Flash Cards.
0:45
I'll also copy that and
paste that into the h1 tag too.
0:51
Let's add some structure to the page now.
0:57
I'll wrap the h1 tag in a header element.
1:00
And underneath that, I'll create a section
element, with the id of content.
1:06
I'll leave the content empty for now.
1:14
Underneath it,
let's put a footer element, and
1:16
a paragraph inside it that
says an app to help you study.
1:21
Let's put an h2 tag in
to welcome the student.
1:28
The welcome page is in good shape.
1:35
A lot of this HTML, like the doctype HTML,
1:38
and body tags are similar to what we'll
use on the other pages on the site.
1:45
Let's copy this code and
use it for an individual card.
1:51
I'll name the new page card.pug.
1:54
Before we add a variable to the card.pug
file, lets see how they're used.
2:01
Here's the form you're
already familiar with.
2:07
Pug will print the text
static text inside an h1 tag.
2:09
Here's how you render a variable in Pug.
2:15
You use the equal sign after the tag.
2:18
After the equal sign,
Pug expects a variable.
2:21
In this case the variable name is variable
If it is undefined, this h1 will be empty.
2:25
In cab.pug the h2 element should
hold the flash card text.
2:33
So, remove welcome student and
2:38
I will type the = sign next to the tag,
followed by a space.
2:41
Lets name the variable prompt,
because flashcards have prompts.
2:48
The question you ask.
2:52
The prompt is on one side and
then the answer is on the other.
2:54
Now let's switch over to the app.js file.
2:58
To see the flashcards,
someone must visit the slash cards route.
3:03
So I'm going to rename
the hello route to cards.
3:07
This will then serve the cards for
the app.
3:15
We'll need to use the pug template, so
I'll change this to the render method.
3:18
And pass in card as the template.
3:28
To see how to pass in variables to
the template, let´s look at the docs.
3:31
The response dot render method
takes in two optional parameters.
3:36
The square brackets indicate
that they are optional.
3:43
The second parameter is called locals.
3:46
Placing an object here will
define locals for the view.
3:49
Locals is the name for
3:54
variables we want the view to have
access to when it's being rendered.
3:55
The properties of the object we
pass in as the second argument
4:01
will define the locals in the template.
4:05
In app js I'll pass in an object.
4:08
Adding the property prompt.
4:14
I will set it to "Who is buried
4:18
in Grant´s tomb?".
4:25
If I save that and switch over to
the browser and go to the cards URL,
4:30
you'll see, who is buried in Grant's tomb.
4:37
Let's go back to the documentation and
4:44
I'll show you another way to create the
same local variable name for our template.
4:47
We can add properties to the res.locals,
to pass in values to the template.
4:52
The name of the property will
define the local variable name.
4:58
Let's try it out.
5:02
In app.JS let's cut this string.
5:04
And delete the object.
5:11
Then I'll make a line
above the render call and
5:16
set res.locals.prompt to the string.
5:22
Save the file, head over to the browser
again, refresh the page and
5:27
nothing's changed.
5:33
Which is what we're looking for.
5:34
I'll go back and
undo to use the first way again.
5:37
Look at the H2 element.
5:45
Right now, the variable is only
the text inside of the H2 tag.
5:50
If we wanted to use some other static
text plus a variable inside we can use
5:58
interpolation similar to the way that you
can use template literals in JAVA Script.
6:04
To interpolate, or
6:12
add variables to static text you use
the hash symbol with curly brackets.
6:14
The curly brackets surround the variable
whose value you want to combine with
6:20
the text.
6:24
If name were equal to
Andrew in this example,
6:25
this is the output you'd
expect on the page.
6:29
Note that interpolation doesn't work for
attributes though.
6:32
You'll need to concatenate
strings with any
6:37
values you want to put into attributes,
or use template literals.
6:39
To see interpolation in action,
let's create a hint for the prompt.
6:46
I'll pass in another
variable into the template.
6:51
I'm going to call it hint.
6:55
The value will be think
6:56
about whose tomb It is.
7:01
I want to start with the text, hint,
7:05
no matter what the hint is,
I will hit return and
7:10
type, p, an indent with i Hint: and
7:17
then the hint locals.
7:21
The syntax is very similar
to what you would use
7:25
in a JavaScript template literal.
7:28
With a # symbol instead of a $ symbol.
7:30
You might be wondering what other
JavaScript like things you can put into
7:34
Pug templates, we'll get into that next.
7:39