1
00:00:00,230 --> 00:00:03,060
You just saw how Express
renders HTML with Pug.

2
00:00:03,060 --> 00:00:06,680
However, we've still been
working with only static data,

3
00:00:06,680 --> 00:00:10,230
sending a fixed HTML
string to the browser.

4
00:00:10,230 --> 00:00:14,350
The real power of templates comes into
play when you use variables to inject

5
00:00:14,350 --> 00:00:19,450
customized content, such as a user's name,
a list of shopping cart items, or

6
00:00:19,450 --> 00:00:20,780
text of a blog post.

7
00:00:21,900 --> 00:00:24,330
In this video,
we'll create a flash card template.

8
00:00:24,330 --> 00:00:31,370
The text for this title here, and
the hint are not in the template.

9
00:00:31,370 --> 00:00:34,390
They are being supplied to
the template through variables,

10
00:00:34,390 --> 00:00:37,950
which are injected into
the template as it's rendered.

11
00:00:37,950 --> 00:00:40,030
Let's see how this is done.

12
00:00:40,030 --> 00:00:43,670
We'll start by shaping our
index.pug file a bit more.

13
00:00:43,670 --> 00:00:45,500
We are building a flash card up.

14
00:00:45,500 --> 00:00:51,512
So, I will rename the title
to be Flash Cards.

15
00:00:51,512 --> 00:00:56,140
I'll also copy that and
paste that into the h1 tag too.

16
00:00:57,385 --> 00:00:59,410
Let's add some structure to the page now.

17
00:01:00,530 --> 00:01:03,320
I'll wrap the h1 tag in a header element.

18
00:01:06,470 --> 00:01:14,170
And underneath that, I'll create a section
element, with the id of content.

19
00:01:14,170 --> 00:01:16,550
I'll leave the content empty for now.

20
00:01:16,550 --> 00:01:21,821
Underneath it,
let's put a footer element, and

21
00:01:21,821 --> 00:01:28,340
a paragraph inside it that
says an app to help you study.

22
00:01:28,340 --> 00:01:32,082
Let's put an h2 tag in
to welcome the student.

23
00:01:35,699 --> 00:01:37,790
The welcome page is in good shape.

24
00:01:38,830 --> 00:01:44,220
A lot of this HTML, like the doctype HTML,

25
00:01:45,530 --> 00:01:51,270
and body tags are similar to what we'll
use on the other pages on the site.

26
00:01:51,270 --> 00:01:54,930
Let's copy this code and
use it for an individual card.

27
00:01:54,930 --> 00:02:01,580
I'll name the new page card.pug.

28
00:02:01,580 --> 00:02:07,530
Before we add a variable to the card.pug
file, lets see how they're used.

29
00:02:07,530 --> 00:02:09,880
Here's the form you're
already familiar with.

30
00:02:09,880 --> 00:02:15,000
Pug will print the text
static text inside an h1 tag.

31
00:02:15,000 --> 00:02:18,170
Here's how you render a variable in Pug.

32
00:02:18,170 --> 00:02:21,260
You use the equal sign after the tag.

33
00:02:21,260 --> 00:02:25,020
After the equal sign,
Pug expects a variable.

34
00:02:25,020 --> 00:02:31,730
In this case the variable name is variable
If it is undefined, this h1 will be empty.

35
00:02:33,280 --> 00:02:38,530
In cab.pug the h2 element should
hold the flash card text.

36
00:02:38,530 --> 00:02:41,420
So, remove welcome student and

37
00:02:41,420 --> 00:02:47,050
I will type the = sign next to the tag,
followed by a space.

38
00:02:48,240 --> 00:02:52,920
Lets name the variable prompt,
because flashcards have prompts.

39
00:02:52,920 --> 00:02:54,520
The question you ask.

40
00:02:54,520 --> 00:02:58,840
The prompt is on one side and
then the answer is on the other.

41
00:02:58,840 --> 00:03:01,460
Now let's switch over to the app.js file.

42
00:03:03,300 --> 00:03:07,712
To see the flashcards,
someone must visit the slash cards route.

43
00:03:07,712 --> 00:03:13,190
So I'm going to rename
the hello route to cards.

44
00:03:15,020 --> 00:03:18,100
This will then serve the cards for
the app.

45
00:03:18,100 --> 00:03:24,698
We'll need to use the pug template, so
I'll change this to the render method.

46
00:03:28,037 --> 00:03:29,980
And pass in card as the template.

47
00:03:31,450 --> 00:03:36,260
To see how to pass in variables to
the template, let´s look at the docs.

48
00:03:36,260 --> 00:03:41,950
The response dot render method
takes in two optional parameters.

49
00:03:43,080 --> 00:03:46,308
The square brackets indicate
that they are optional.

50
00:03:46,308 --> 00:03:49,440
The second parameter is called locals.

51
00:03:49,440 --> 00:03:54,060
Placing an object here will
define locals for the view.

52
00:03:54,060 --> 00:03:55,540
Locals is the name for

53
00:03:55,540 --> 00:03:59,900
variables we want the view to have
access to when it's being rendered.

54
00:04:01,040 --> 00:04:05,180
The properties of the object we
pass in as the second argument

55
00:04:05,180 --> 00:04:07,260
will define the locals in the template.

56
00:04:08,790 --> 00:04:12,420
In app js I'll pass in an object.

57
00:04:14,740 --> 00:04:15,874
Adding the property prompt.

58
00:04:18,490 --> 00:04:25,006
I will set it to "Who is buried

59
00:04:25,006 --> 00:04:30,240
in Grant´s tomb?".

60
00:04:30,240 --> 00:04:37,871
If I save that and switch over to
the browser and go to the cards URL,

61
00:04:37,871 --> 00:04:43,400
you'll see, who is buried in Grant's tomb.

62
00:04:44,750 --> 00:04:47,160
Let's go back to the documentation and

63
00:04:47,160 --> 00:04:52,870
I'll show you another way to create the
same local variable name for our template.

64
00:04:52,870 --> 00:04:58,600
We can add properties to the res.locals,
to pass in values to the template.

65
00:04:58,600 --> 00:05:02,080
The name of the property will
define the local variable name.

66
00:05:02,080 --> 00:05:02,830
Let's try it out.

67
00:05:04,650 --> 00:05:07,227
In app.JS let's cut this string.

68
00:05:11,563 --> 00:05:12,551
And delete the object.

69
00:05:16,418 --> 00:05:22,236
Then I'll make a line
above the render call and

70
00:05:22,236 --> 00:05:27,470
set res.locals.prompt to the string.

71
00:05:27,470 --> 00:05:33,070
Save the file, head over to the browser
again, refresh the page and

72
00:05:33,070 --> 00:05:34,710
nothing's changed.

73
00:05:34,710 --> 00:05:36,070
Which is what we're looking for.

74
00:05:37,370 --> 00:05:40,290
I'll go back and
undo to use the first way again.

75
00:05:45,000 --> 00:05:46,840
Look at the H2 element.

76
00:05:50,810 --> 00:05:58,350
Right now, the variable is only
the text inside of the H2 tag.

77
00:05:58,350 --> 00:06:04,450
If we wanted to use some other static
text plus a variable inside we can use

78
00:06:04,450 --> 00:06:11,020
interpolation similar to the way that you
can use template literals in JAVA Script.

79
00:06:12,680 --> 00:06:14,040
To interpolate, or

80
00:06:14,040 --> 00:06:20,150
add variables to static text you use
the hash symbol with curly brackets.

81
00:06:20,150 --> 00:06:24,240
The curly brackets surround the variable
whose value you want to combine with

82
00:06:24,240 --> 00:06:25,790
the text.

83
00:06:25,790 --> 00:06:29,390
If name were equal to
Andrew in this example,

84
00:06:29,390 --> 00:06:31,890
this is the output you'd
expect on the page.

85
00:06:32,920 --> 00:06:37,030
Note that interpolation doesn't work for
attributes though.

86
00:06:37,030 --> 00:06:39,860
You'll need to concatenate
strings with any

87
00:06:39,860 --> 00:06:44,640
values you want to put into attributes,
or use template literals.

88
00:06:46,000 --> 00:06:51,160
To see interpolation in action,
let's create a hint for the prompt.

89
00:06:51,160 --> 00:06:55,020
I'll pass in another
variable into the template.

90
00:06:55,020 --> 00:06:56,840
I'm going to call it hint.

91
00:06:56,840 --> 00:07:01,159
The value will be think

92
00:07:01,159 --> 00:07:05,709
about whose tomb It is.

93
00:07:05,709 --> 00:07:10,659
I want to start with the text, hint,

94
00:07:10,659 --> 00:07:17,047
no matter what the hint is,
I will hit return and

95
00:07:17,047 --> 00:07:21,997
type, p, an indent with i Hint: and

96
00:07:21,997 --> 00:07:25,056
then the hint locals.

97
00:07:25,056 --> 00:07:28,147
The syntax is very similar
to what you would use

98
00:07:28,147 --> 00:07:30,970
in a JavaScript template literal.

99
00:07:30,970 --> 00:07:33,104
With a # symbol instead of a $ symbol.

100
00:07:34,905 --> 00:07:39,098
You might be wondering what other
JavaScript like things you can put into

101
00:07:39,098 --> 00:07:41,650
Pug templates, we'll get into that next.