1 00:00:00,240 --> 00:00:06,210 In this video as I promised twice before you're going to learn about partials with handlebars partials 2 00:00:06,210 --> 00:00:12,740 as the name suggests allows you to create a little template which is part of a bigger web page. 3 00:00:12,750 --> 00:00:14,880 That's where a partial comes from. 4 00:00:14,880 --> 00:00:20,190 So think about parts of the web page that you're gonna end up reusing across multiple pages in your 5 00:00:20,190 --> 00:00:20,990 site. 6 00:00:21,000 --> 00:00:27,720 This would be things like headers or footers where you want the exact same thing showing on every page 7 00:00:27,960 --> 00:00:30,880 to give your site a nice unified feel. 8 00:00:30,960 --> 00:00:36,420 It feel really terrible if you went from one page in a site to another and the header kept switching 9 00:00:36,420 --> 00:00:39,720 how it was structured or how it looked with partials. 10 00:00:39,720 --> 00:00:45,690 It's gonna be really easy to create a header and reuse it without needing to copy markup between all 11 00:00:45,690 --> 00:00:47,580 the pages in your site. 12 00:00:47,580 --> 00:00:48,050 All right. 13 00:00:48,060 --> 00:00:55,020 The first thing we have to do to work with partials is actually load in HP s for the first time and 14 00:00:55,020 --> 00:01:03,540 configure it just down below I'll load HB s in const HB S equals we're going to require the module grabbing 15 00:01:03,540 --> 00:01:10,170 it by providing the module name and once we have it what we need to do is tell handlebars where we are 16 00:01:10,170 --> 00:01:12,660 going to put our partials. 17 00:01:12,670 --> 00:01:19,230 These are also files with an HP s extension similar to the ones we have down below. 18 00:01:19,230 --> 00:01:25,290 Now we want to keep them in different locations so we want one directory for our views that we use with 19 00:01:25,290 --> 00:01:31,990 render and we want another directory for our partials which will learn how to actually use shortly. 20 00:01:32,010 --> 00:01:37,380 So what I'm gonna do is this we're going to leave the templates directory in place but we're actually 21 00:01:37,380 --> 00:01:40,050 going to put two directories inside of there. 22 00:01:40,080 --> 00:01:45,690 One is gonna be called views and the other is going to be called partials. 23 00:01:45,690 --> 00:01:51,780 Now these three files we currently have in templates those actually belong in views so I'm going to 24 00:01:51,780 --> 00:01:58,050 take all three and drag them over and all we have to do to get things to work is to change the views 25 00:01:58,050 --> 00:02:04,880 path from forward slash templates to forward slash templates forward slash views. 26 00:02:04,890 --> 00:02:10,800 Now if I was to save things the old stuff is still going to work as expected I can refresh this site 27 00:02:10,860 --> 00:02:17,610 and I still see my view correctly rendered from here though we can now tell HP yes that we're going 28 00:02:17,610 --> 00:02:23,700 to put our partials in this partials directory then we can actually add some stuff inside of there. 29 00:02:23,730 --> 00:02:27,130 So right here we're going to create a another path. 30 00:02:27,360 --> 00:02:31,750 Const partials a path equals. 31 00:02:31,750 --> 00:02:39,030 I'll use path dot join to once again join together dir name with a string that will end up creating. 32 00:02:39,160 --> 00:02:43,590 So I provide dir name as the first argument and our string as the second. 33 00:02:43,690 --> 00:02:51,770 And right here dot dot forward slash templates forward slash partials which is the folder we just created. 34 00:02:51,820 --> 00:02:55,120 So this path is going to get handlebars to the right directory. 35 00:02:55,120 --> 00:03:01,320 Now we can actually configure it and I'll do that in our little section for setting up handlebars. 36 00:03:01,330 --> 00:03:12,820 Now we actually use HB S. here HB S. dot register partials register partials takes a path to the directory 37 00:03:12,880 --> 00:03:14,750 where your partials live. 38 00:03:14,800 --> 00:03:18,430 We don't have any just yet but we can still provide that path. 39 00:03:18,640 --> 00:03:24,730 The partials path variable contains the path that the handlebars module needs. 40 00:03:25,090 --> 00:03:26,830 So that's the configuration side. 41 00:03:26,830 --> 00:03:30,550 That's the boring stuff now that we have everything set up. 42 00:03:30,550 --> 00:03:34,160 Let's go ahead and create a partial and see what all the hype is about. 43 00:03:34,180 --> 00:03:41,550 I'm going to define a new file in the partials directory and I'm going to create a partial for the header. 44 00:03:41,560 --> 00:03:45,550 This is a header that we're gonna show on all of the pages throughout our site. 45 00:03:45,880 --> 00:03:53,230 So I'll call this something like header dot H B S so with our partials we're still using the handlebars 46 00:03:53,230 --> 00:03:58,600 extension and we can still take advantage of all of those handle bars features. 47 00:03:58,690 --> 00:04:05,260 Now what goes inside of here what goes inside of partials isn't a complete H T and L document like we 48 00:04:05,260 --> 00:04:12,430 have here where we set up the doc type and then set up our HDL element instead it is just part of a 49 00:04:12,430 --> 00:04:13,510 web page. 50 00:04:13,540 --> 00:04:20,890 So right here as an example we can go ahead and just create something like an H1 element H1 opening 51 00:04:20,890 --> 00:04:25,280 and closing the tag and then we can put some text inside of here. 52 00:04:25,360 --> 00:04:33,040 I'll say something like static header dot HB s text for the moment and this will allow us to explore 53 00:04:33,040 --> 00:04:34,640 how to use our partials. 54 00:04:34,750 --> 00:04:37,180 Then we'll continue to expand on the header. 55 00:04:37,270 --> 00:04:44,050 Actually putting a dynamic title Inside of here with the partial in place we can now use it inside of 56 00:04:44,050 --> 00:04:49,930 our other handlebars files which means that we can have this partial loaded in at the top of all of 57 00:04:49,930 --> 00:04:51,320 these pages. 58 00:04:51,340 --> 00:04:56,440 Let's go ahead and get that done and I'll start with the help page which is the page I currently have 59 00:04:56,440 --> 00:04:58,230 rendered in the background. 60 00:04:58,270 --> 00:05:05,380 Now I'll leave the current H1 in place for the moment but up above what I'm going to do is render the 61 00:05:05,440 --> 00:05:07,480 partial to render a partial. 62 00:05:07,480 --> 00:05:13,900 We still use those two sets of curly braces like we did when we wanted to add a value into the template 63 00:05:13,930 --> 00:05:20,530 in a specific location for a partial though we have to add one additional character which is the greater 64 00:05:20,530 --> 00:05:23,000 than sign right here in the middle. 65 00:05:23,200 --> 00:05:29,350 Then after the greater than sign we provide the partial name which is just the file name. 66 00:05:29,350 --> 00:05:34,210 You don't need to provide the complete path and you don't need to provide the file extension. 67 00:05:34,330 --> 00:05:37,030 So for us that would just be header. 68 00:05:37,030 --> 00:05:42,520 Now we can go ahead and save help dot HB S. but I'm going to clue you in ahead of time. 69 00:05:42,520 --> 00:05:45,150 Things are not going to work as expected. 70 00:05:45,190 --> 00:05:51,410 I'm going to refresh the application in the browser and what do I get I get a really long error message. 71 00:05:51,430 --> 00:05:58,090 The actual message being the partial header could not be found now to talk about why this is happening 72 00:05:58,090 --> 00:06:04,900 we have to talk about when node mine is restarting our application right now node mine is only monitoring 73 00:06:04,900 --> 00:06:12,760 files with that JSA extension like app dot J S so if I save the file even with no changes made you can 74 00:06:12,760 --> 00:06:15,950 see the server is going to end up restarting down below. 75 00:06:16,120 --> 00:06:17,860 I'm gonna go ahead and save the file. 76 00:06:17,860 --> 00:06:21,600 It restarts I save the file again and it restarts again. 77 00:06:21,790 --> 00:06:25,080 The same is not true with our handlebars templates. 78 00:06:25,150 --> 00:06:30,930 If I save one of those files which I just did you can see the server has not restarted down below. 79 00:06:30,940 --> 00:06:37,630 And that's a problem because HB S. and express they need to load those templates in and if the server 80 00:06:37,630 --> 00:06:43,320 doesn't restart when new templates are created the server is never going to pick up on that. 81 00:06:43,330 --> 00:06:48,010 Now we can easily address this by customizing our node on command. 82 00:06:48,010 --> 00:06:55,750 We can have node man restart when our J S files change end when our HB S. files change and to do that 83 00:06:55,780 --> 00:06:59,480 we'll make a small tweak to the command we've been running so far. 84 00:06:59,620 --> 00:07:05,950 I'm gonna use control C to shut down the existing process then I'll use clear to clear the terminal 85 00:07:06,100 --> 00:07:12,580 output from here the command is going to start off much the same node mine space source a forward slash 86 00:07:12,620 --> 00:07:19,000 app dot J asked which is exactly what we were just running the changes that we're gonna add the E flag 87 00:07:19,030 --> 00:07:27,220 which is short for extensions this allows us to provide after the space a comma separated list of extensions 88 00:07:27,250 --> 00:07:30,410 that node man should watch we're going to provide. 89 00:07:30,440 --> 00:07:32,560 Jay S. comma H B. 90 00:07:32,640 --> 00:07:33,360 S.. 91 00:07:33,490 --> 00:07:37,520 Now if I run the program we can see that the behavior has changed. 92 00:07:37,540 --> 00:07:42,880 If I save my apt J.S. file these servers still restarts which is great. 93 00:07:42,880 --> 00:07:49,070 Now though if I save one of my HB S. files like the partial or any of my views you'll notice that the 94 00:07:49,070 --> 00:07:52,750 server once again restarts which is fantastic. 95 00:07:52,750 --> 00:07:57,340 Now if I was to refresh the page we would no longer get this error. 96 00:07:57,340 --> 00:08:04,570 Instead we get our rendered document with the title up top from the header partial static header dot 97 00:08:04,600 --> 00:08:06,340 HP s text. 98 00:08:06,340 --> 00:08:10,690 Now let's take our header one step further and make it a bit more useful. 99 00:08:10,690 --> 00:08:17,960 Currently we have three pages we have help index and about all three of those have their own each one. 100 00:08:18,000 --> 00:08:22,780 What we're going to do is remove those and have that rendered in the header instead. 101 00:08:22,780 --> 00:08:29,770 Now you'll remember that we have the value the title to show passed in for index and for about and that's 102 00:08:29,800 --> 00:08:30,530 OK. 103 00:08:30,550 --> 00:08:34,630 We can continue to use those values in partials as well. 104 00:08:34,630 --> 00:08:35,620 So to kick things off. 105 00:08:35,620 --> 00:08:40,540 What I'm going to do is make a quick change to all files help. 106 00:08:40,660 --> 00:08:43,180 HB Yes already has the header in place. 107 00:08:43,210 --> 00:08:46,690 I'm gonna remove the H1 save the file. 108 00:08:46,690 --> 00:08:49,180 Next up we have index dot HB S.. 109 00:08:49,210 --> 00:08:56,730 I'm gonna remove that H1 and I'm going to set up the partial so open and close two sets of curly braces. 110 00:08:56,800 --> 00:09:00,960 Then the greater than sign and followed by the partial header. 111 00:09:00,970 --> 00:09:08,050 Next up we'll do the same thing in about J S removing that H1 and swapping it out with the header partial. 112 00:09:08,080 --> 00:09:10,630 So right here two sets of curly braces. 113 00:09:10,630 --> 00:09:12,780 Greater than sine header. 114 00:09:12,920 --> 00:09:18,000 And now if we visit any page on our site we're gonna see the exact same text. 115 00:09:18,010 --> 00:09:22,250 We are going to see static header dot HB s text. 116 00:09:22,270 --> 00:09:26,170 Here it is on help I'll refresh the page and it still shows up. 117 00:09:26,200 --> 00:09:28,830 We then have forward slash about where we see it. 118 00:09:28,930 --> 00:09:32,750 And finally the root of the site where we also see it. 119 00:09:32,800 --> 00:09:39,580 Now what we're gonna do instead of displaying this static text is to grab the title value so inapt. 120 00:09:39,610 --> 00:09:45,420 J S for the route we pass in title and name for about we pass in title and name. 121 00:09:45,430 --> 00:09:48,800 And for help we currently just pass and help a text. 122 00:09:48,940 --> 00:09:53,010 I'm going to modify that to also pass in title and name. 123 00:09:53,320 --> 00:09:54,370 So right here. 124 00:09:54,700 --> 00:09:58,900 Title for this page could equal uppercase h help. 125 00:09:58,900 --> 00:10:00,740 And then I'll provide name. 126 00:10:00,850 --> 00:10:03,000 And I'm still the one who created this page. 127 00:10:03,010 --> 00:10:04,370 And I'd like credit for it. 128 00:10:04,570 --> 00:10:08,030 So I'll provide my name and you can put your name in there. 129 00:10:08,110 --> 00:10:09,940 Now that we have those three set up. 130 00:10:10,000 --> 00:10:15,100 All pages have access to Title and now it can be used in the header. 131 00:10:15,100 --> 00:10:22,270 So right here instead of a static value we are going to open and close two sets of curly braces and 132 00:10:22,270 --> 00:10:29,530 we are going to reference title right inside like we were previously doing from our other view files. 133 00:10:29,530 --> 00:10:36,010 Now if I refresh the home page what do we get I get whether if I go over to forward slash about what 134 00:10:36,010 --> 00:10:43,390 do I get I get about me and then forward slash help I'm going to end up getting the help title showing 135 00:10:44,010 --> 00:10:50,080 now that we have the header in place we can add stuff inside of this file that we want to show on every 136 00:10:50,080 --> 00:10:56,500 single page like a navigation bar with links that allow you to switch between the pages on the site 137 00:10:56,710 --> 00:11:02,860 just down below the H one in the header partial we're gonna get that done I'm gonna start by opening 138 00:11:02,860 --> 00:11:08,020 and closing a div tag for the div element div being short for division. 139 00:11:08,140 --> 00:11:13,720 This is going to create a section of content below the H1 and what we're going to put inside of there 140 00:11:13,720 --> 00:11:15,110 are three links. 141 00:11:15,220 --> 00:11:22,090 So I'll be using the A anchor element for that we are going to set them up and inside of the element 142 00:11:22,090 --> 00:11:27,640 between those two tags we provide the text we would like to show for the link and I'll just use the 143 00:11:27,670 --> 00:11:33,200 page title which would be whether for the first one about for the second and help for the third. 144 00:11:33,670 --> 00:11:40,810 So right here I have weather and I am going to set up h ref which is the attribute we set up to specify 145 00:11:40,870 --> 00:11:43,190 where this link should go to. 146 00:11:43,240 --> 00:11:47,080 We're gonna send it to forward slash the root of the site. 147 00:11:47,080 --> 00:11:51,360 Now we can do the exact same thing for our two other pages as well. 148 00:11:51,370 --> 00:11:54,130 I'll set up a I'll provide the text. 149 00:11:54,160 --> 00:12:01,510 Let's link to the about page for this one and I'll set up the H ref attribute to forward slash about 150 00:12:01,540 --> 00:12:03,880 which is where we can view that page. 151 00:12:03,880 --> 00:12:09,010 And lastly we'll do the same for help the text to display is help. 152 00:12:09,010 --> 00:12:13,200 And the H ref value is going to be forward slash help. 153 00:12:13,240 --> 00:12:19,900 Now if I save things we're going to see this navigation bar on every single page I'll refresh the help 154 00:12:19,900 --> 00:12:26,560 page and it shows up I'll click over to the about page and I see it there finally a click over to the 155 00:12:26,560 --> 00:12:29,610 home page and it shows up there as well. 156 00:12:29,610 --> 00:12:35,690 So being able to use a partial makes it really easy to set something up once and use it everywhere. 157 00:12:35,730 --> 00:12:42,180 And if I was to make any changes to the header I would just change this one file and it would automatically 158 00:12:42,180 --> 00:12:46,770 update on all pages where the partial is used which is fantastic. 159 00:12:46,770 --> 00:12:50,610 Now it's your turn to create a another partial for the footer. 160 00:12:50,640 --> 00:12:57,030 So over in act J S I have some challenge comments which I'll paste in up top outlining what I'd like 161 00:12:57,030 --> 00:12:59,040 you to do right here. 162 00:12:59,040 --> 00:13:04,140 Your goal is to create a partial for the footer like I mentioned and step one of that is to set up the 163 00:13:04,140 --> 00:13:06,820 template for the footer partial. 164 00:13:06,840 --> 00:13:14,340 The goal is to just render a paragraph and print text saying created by followed by some name where 165 00:13:14,340 --> 00:13:21,120 some name would get replaced with whatever the name value passed in is for me it's Andrew Meade for 166 00:13:21,120 --> 00:13:23,280 you it's likely something else. 167 00:13:23,310 --> 00:13:28,590 Now once you have that template in place you want to make sure to actually use it at the bottom of our 168 00:13:28,590 --> 00:13:36,300 three pages about help and index and finally test your work visit all three pages and make sure you 169 00:13:36,300 --> 00:13:39,460 see your footer showing up at the bottom. 170 00:13:39,510 --> 00:13:41,280 Take some time to knock this out. 171 00:13:41,280 --> 00:13:44,220 Test your work and when you're done come back and click play 172 00:13:48,260 --> 00:13:49,130 how'd that go. 173 00:13:49,130 --> 00:13:52,040 I'm going to kick things off by creating the partial. 174 00:13:52,100 --> 00:13:57,020 So the partial needs to live in the partials directory and I can call this whatever I like. 175 00:13:57,020 --> 00:13:58,520 I'm gonna call it footer. 176 00:13:58,580 --> 00:14:03,320 HB Yes but if you picked a different name that's fine as well. 177 00:14:03,320 --> 00:14:06,550 Next up we want to add some content inside of here. 178 00:14:06,650 --> 00:14:12,710 And the goal as mentioned is to just print some text in a paragraph so I'll open and close my paragraph 179 00:14:12,710 --> 00:14:19,370 tags for the paragraph element then created space by space. 180 00:14:19,370 --> 00:14:25,250 Right here is where I want to put the value so I'll open and close two sets of curly braces and I will 181 00:14:25,250 --> 00:14:30,890 reference a name right inside which matches up with the property passed in. 182 00:14:30,890 --> 00:14:33,200 Name name and name. 183 00:14:33,740 --> 00:14:36,530 So that is step 1 step 2. 184 00:14:36,560 --> 00:14:37,560 We have this partial. 185 00:14:37,580 --> 00:14:39,120 It's time to use it. 186 00:14:39,170 --> 00:14:40,510 So I'll start with help dot. 187 00:14:40,550 --> 00:14:47,360 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 188 00:14:47,360 --> 00:14:48,760 of curly braces. 189 00:14:48,830 --> 00:14:53,420 I'll set up the greater than sign and then provide the partial footer. 190 00:14:53,420 --> 00:14:54,440 Perfect. 191 00:14:54,440 --> 00:15:03,430 Now let's go ahead and knock this out for index down below that is going to be a footer and finally 192 00:15:03,460 --> 00:15:07,930 we're gonna knock it out for about right here footer. 193 00:15:08,180 --> 00:15:13,210 Now you'll notice that for about end index we do have the old text in place. 194 00:15:13,250 --> 00:15:15,830 I didn't mention to remove that for the challenge. 195 00:15:15,830 --> 00:15:16,900 Maybe it did. 196 00:15:16,940 --> 00:15:18,850 I am going to go ahead and remove it. 197 00:15:18,950 --> 00:15:20,030 If you did it remove it. 198 00:15:20,030 --> 00:15:22,560 Take a quick moment to do just that. 199 00:15:22,580 --> 00:15:29,340 So now in about we have these three things in index we have just to add in help. 200 00:15:29,390 --> 00:15:35,480 We have the three items we had earlier now that we have this in place and we don't have any duplicate 201 00:15:35,480 --> 00:15:36,280 footers. 202 00:15:36,290 --> 00:15:38,450 Let's go ahead and test things out. 203 00:15:38,450 --> 00:15:40,100 I'm going to save help Dot. 204 00:15:40,130 --> 00:15:45,510 HB Yes I'm going to refresh the page here I'm on the home page and I see my footer. 205 00:15:45,560 --> 00:15:48,530 I'll go over to the about page where I also see it. 206 00:15:48,590 --> 00:15:51,800 And finally the help page where it's showing up. 207 00:15:51,800 --> 00:15:58,460 So that is it for partials partials can be used throughout your application to make it really easy to 208 00:15:58,460 --> 00:16:02,070 render the same thing over and over again as we saw. 209 00:16:02,090 --> 00:16:04,780 We can still inject values inside of them. 210 00:16:04,790 --> 00:16:08,920 We did that for the name in footer and for the title in header. 211 00:16:09,110 --> 00:16:14,780 Now that we have that all wrapped up and we've tested our work I'm going to remove those challenge comments 212 00:16:14,780 --> 00:16:18,410 and that's where we're going to stop for this one in the next video. 213 00:16:18,410 --> 00:16:21,950 We'll continue to learn more about our server and express. 214 00:16:22,010 --> 00:16:23,860 So stay tuned and I'll see you then.