In this video as I promised twice before you're going to learn about partials with handlebars partials
as the name suggests allows you to create a little template which is part of a bigger web page.
That's where a partial comes from.
So think about parts of the web page that you're gonna end up reusing across multiple pages in your
site.
This would be things like headers or footers where you want the exact same thing showing on every page
to give your site a nice unified feel.
It feel really terrible if you went from one page in a site to another and the header kept switching
how it was structured or how it looked with partials.
It's gonna be really easy to create a header and reuse it without needing to copy markup between all
the pages in your site.
All right.
The first thing we have to do to work with partials is actually load in HP s for the first time and
configure it just down below I'll load HB s in const HB S equals we're going to require the module grabbing
it by providing the module name and once we have it what we need to do is tell handlebars where we are
going to put our partials.
These are also files with an HP s extension similar to the ones we have down below.
Now we want to keep them in different locations so we want one directory for our views that we use with
render and we want another directory for our partials which will learn how to actually use shortly.
So what I'm gonna do is this we're going to leave the templates directory in place but we're actually
going to put two directories inside of there.
One is gonna be called views and the other is going to be called partials.
Now these three files we currently have in templates those actually belong in views so I'm going to
take all three and drag them over and all we have to do to get things to work is to change the views
path from forward slash templates to forward slash templates forward slash views.
Now if I was to save things the old stuff is still going to work as expected I can refresh this site
and I still see my view correctly rendered from here though we can now tell HP yes that we're going
to put our partials in this partials directory then we can actually add some stuff inside of there.
So right here we're going to create a another path.
Const partials a path equals.
I'll use path dot join to once again join together dir name with a string that will end up creating.
So I provide dir name as the first argument and our string as the second.
And right here dot dot forward slash templates forward slash partials which is the folder we just created.
So this path is going to get handlebars to the right directory.
Now we can actually configure it and I'll do that in our little section for setting up handlebars.
Now we actually use HB S. here HB S. dot register partials register partials takes a path to the directory
where your partials live.
We don't have any just yet but we can still provide that path.
The partials path variable contains the path that the handlebars module needs.
So that's the configuration side.
That's the boring stuff now that we have everything set up.
Let's go ahead and create a partial and see what all the hype is about.
I'm going to define a new file in the partials directory and I'm going to create a partial for the header.
This is a header that we're gonna show on all of the pages throughout our site.
So I'll call this something like header dot H B S so with our partials we're still using the handlebars
extension and we can still take advantage of all of those handle bars features.
Now what goes inside of here what goes inside of partials isn't a complete H T and L document like we
have here where we set up the doc type and then set up our HDL element instead it is just part of a
web page.
So right here as an example we can go ahead and just create something like an H1 element H1 opening
and closing the tag and then we can put some text inside of here.
I'll say something like static header dot HB s text for the moment and this will allow us to explore
how to use our partials.
Then we'll continue to expand on the header.
Actually putting a dynamic title Inside of here with the partial in place we can now use it inside of
our other handlebars files which means that we can have this partial loaded in at the top of all of
these pages.
Let's go ahead and get that done and I'll start with the help page which is the page I currently have
rendered in the background.
Now I'll leave the current H1 in place for the moment but up above what I'm going to do is render the
partial to render a partial.
We still use those two sets of curly braces like we did when we wanted to add a value into the template
in a specific location for a partial though we have to add one additional character which is the greater
than sign right here in the middle.
Then after the greater than sign we provide the partial name which is just the file name.
You don't need to provide the complete path and you don't need to provide the file extension.
So for us that would just be header.
Now we can go ahead and save help dot HB S. but I'm going to clue you in ahead of time.
Things are not going to work as expected.
I'm going to refresh the application in the browser and what do I get I get a really long error message.
The actual message being the partial header could not be found now to talk about why this is happening
we have to talk about when node mine is restarting our application right now node mine is only monitoring
files with that JSA extension like app dot J S so if I save the file even with no changes made you can
see the server is going to end up restarting down below.
I'm gonna go ahead and save the file.
It restarts I save the file again and it restarts again.
The same is not true with our handlebars templates.
If I save one of those files which I just did you can see the server has not restarted down below.
And that's a problem because HB S. and express they need to load those templates in and if the server
doesn't restart when new templates are created the server is never going to pick up on that.
Now we can easily address this by customizing our node on command.
We can have node man restart when our J S files change end when our HB S. files change and to do that
we'll make a small tweak to the command we've been running so far.
I'm gonna use control C to shut down the existing process then I'll use clear to clear the terminal
output from here the command is going to start off much the same node mine space source a forward slash
app dot J asked which is exactly what we were just running the changes that we're gonna add the E flag
which is short for extensions this allows us to provide after the space a comma separated list of extensions
that node man should watch we're going to provide.
Jay S. comma H B.
S..
Now if I run the program we can see that the behavior has changed.
If I save my apt J.S. file these servers still restarts which is great.
Now though if I save one of my HB S. files like the partial or any of my views you'll notice that the
server once again restarts which is fantastic.
Now if I was to refresh the page we would no longer get this error.
Instead we get our rendered document with the title up top from the header partial static header dot
HP s text.
Now let's take our header one step further and make it a bit more useful.
Currently we have three pages we have help index and about all three of those have their own each one.
What we're going to do is remove those and have that rendered in the header instead.
Now you'll remember that we have the value the title to show passed in for index and for about and that's
OK.
We can continue to use those values in partials as well.
So to kick things off.
What I'm going to do is make a quick change to all files help.
HB Yes already has the header in place.
I'm gonna remove the H1 save the file.
Next up we have index dot HB S..
I'm gonna remove that H1 and I'm going to set up the partial so open and close two sets of curly braces.
Then the greater than sign and followed by the partial header.
Next up we'll do the same thing in about J S removing that H1 and swapping it out with the header partial.
So right here two sets of curly braces.
Greater than sine header.
And now if we visit any page on our site we're gonna see the exact same text.
We are going to see static header dot HB s text.
Here it is on help I'll refresh the page and it still shows up.
We then have forward slash about where we see it.
And finally the root of the site where we also see it.
Now what we're gonna do instead of displaying this static text is to grab the title value so inapt.
J S for the route we pass in title and name for about we pass in title and name.
And for help we currently just pass and help a text.
I'm going to modify that to also pass in title and name.
So right here.
Title for this page could equal uppercase h help.
And then I'll provide name.
And I'm still the one who created this page.
And I'd like credit for it.
So I'll provide my name and you can put your name in there.
Now that we have those three set up.
All pages have access to Title and now it can be used in the header.
So right here instead of a static value we are going to open and close two sets of curly braces and
we are going to reference title right inside like we were previously doing from our other view files.
Now if I refresh the home page what do we get I get whether if I go over to forward slash about what
do I get I get about me and then forward slash help I'm going to end up getting the help title showing
now that we have the header in place we can add stuff inside of this file that we want to show on every
single page like a navigation bar with links that allow you to switch between the pages on the site
just down below the H one in the header partial we're gonna get that done I'm gonna start by opening
and closing a div tag for the div element div being short for division.
This is going to create a section of content below the H1 and what we're going to put inside of there
are three links.
So I'll be using the A anchor element for that we are going to set them up and inside of the element
between those two tags we provide the text we would like to show for the link and I'll just use the
page title which would be whether for the first one about for the second and help for the third.
So right here I have weather and I am going to set up h ref which is the attribute we set up to specify
where this link should go to.
We're gonna send it to forward slash the root of the site.
Now we can do the exact same thing for our two other pages as well.
I'll set up a I'll provide the text.
Let's link to the about page for this one and I'll set up the H ref attribute to forward slash about
which is where we can view that page.
And lastly we'll do the same for help the text to display is help.
And the H ref value is going to be forward slash help.
Now if I save things we're going to see this navigation bar on every single page I'll refresh the help
page and it shows up I'll click over to the about page and I see it there finally a click over to the
home page and it shows up there as well.
So being able to use a partial makes it really easy to set something up once and use it everywhere.
And if I was to make any changes to the header I would just change this one file and it would automatically
update on all pages where the partial is used which is fantastic.
Now it's your turn to create a another partial for the footer.
So over in act J S I have some challenge comments which I'll paste in up top outlining what I'd like
you to do right here.
Your goal is to create a partial for the footer like I mentioned and step one of that is to set up the
template for the footer partial.
The goal is to just render a paragraph and print text saying created by followed by some name where
some name would get replaced with whatever the name value passed in is for me it's Andrew Meade for
you it's likely something else.
Now once you have that template in place you want to make sure to actually use it at the bottom of our
three pages about help and index and finally test your work visit all three pages and make sure you
see your footer showing up at the bottom.
Take some time to knock this out.
Test your work and when you're done come back and click play
how'd that go.
I'm going to kick things off by creating the partial.
So the partial needs to live in the partials directory and I can call this whatever I like.
I'm gonna call it footer.
HB Yes but if you picked a different name that's fine as well.
Next up we want to add some content inside of here.
And the goal as mentioned is to just print some text in a paragraph so I'll open and close my paragraph
tags for the paragraph element then created space by space.
Right here is where I want to put the value so I'll open and close two sets of curly braces and I will
reference a name right inside which matches up with the property passed in.
Name name and name.
So that is step 1 step 2.
We have this partial.
It's time to use it.
So I'll start with help dot.
HB Yes I'm going to put it at the bottom just before I close the body so I'll open and close two sets
of curly braces.
I'll set up the greater than sign and then provide the partial footer.
Perfect.
Now let's go ahead and knock this out for index down below that is going to be a footer and finally
we're gonna knock it out for about right here footer.
Now you'll notice that for about end index we do have the old text in place.
I didn't mention to remove that for the challenge.
Maybe it did.
I am going to go ahead and remove it.
If you did it remove it.
Take a quick moment to do just that.
So now in about we have these three things in index we have just to add in help.
We have the three items we had earlier now that we have this in place and we don't have any duplicate
footers.
Let's go ahead and test things out.
I'm going to save help Dot.
HB Yes I'm going to refresh the page here I'm on the home page and I see my footer.
I'll go over to the about page where I also see it.
And finally the help page where it's showing up.
So that is it for partials partials can be used throughout your application to make it really easy to
render the same thing over and over again as we saw.
We can still inject values inside of them.
We did that for the name in footer and for the title in header.
Now that we have that all wrapped up and we've tested our work I'm going to remove those challenge comments
and that's where we're going to stop for this one in the next video.
We'll continue to learn more about our server and express.
So stay tuned and I'll see you then.