 Hey there polycasters, Rob here. Welcome back to the show. So today we're gonna be talking about probably one of the most requested topics ever, carbon routing. So, routing itself is a very big topic and what we're gonna be doing is we're gonna break this into sort of a multi-part series. So today we'll be covering kind of the basics of routing and then we'll look at things like lazy loading and data and showing spinners and stuff like that, managing flash one styled content and also any questions or things like that you want me to cover, leave them down in the comments and we'll try and do those in some of these future episodes. To start us off, what we're gonna be building is a simple blog application that looks like this. So you can see here that I've got a few different sections that I can flip between, right? Art, film and photo, got some lovely nature photography here that I took off of the interwebs and clicking on any of these pictures will then show us the actual blog posts that we're interested in. And as we're doing this, keep an eye on the URL up here which is gonna be updating as we go and as we do our work. When we're talking about carbon route, we need to think of it as sort of like two separate pieces. The first is this element called carbon location and carbon locations job is just to watch the URL bar and either reflect the state of the URL or take any changes from our application and transfer those back to the URL. It does this using its route property which we're gonna expose in our application using a two way binding which we're also gonna call route. We then couple the carbon location with one or more carbon route elements. The carbon route elements take the route from carbon location, they bind to it using their own route property. They define a pattern which is sort of the URL that they're interested in that they wanna match. So in this case, we're saying the pattern is slash and then we're using this sort of token syntax to say anything after slash we'll refer to it as page. You could also have like a multi-part URL. So you could say slash foo slash bar slash colon some piece of data that you might be interested in. Once we have a little data token here we can expose that to the rest of the app using this data attribute and I'm just gonna call it page data. So if the user was on a page called slash foo in this case page data would equal. So let's see, I'll write it all out here. So it'd be page data dot page as that matches this token right here that we've just named page. Page data dot page equals foo. I know that this is good handwriting. Thank you. Whoever was like halfway through typing a YouTube comment I know, okay. I already know that it looks really good. Okay. Now anything after the pattern that we have not matched gets exposed to our application as the tail and I'm going to expose that using this binding called page tail. Now the idea of a tail is sort of interesting and basically what it allows us to do is kind of break up our URL into different sort of subsections that our app cares about. So I can bind the tail and sort of pass that into a child component and then that child component doesn't have to know anything else about the URL or even the entire rest of the application. All it knows or all it cares about is that one sort of piece of the URL that it is scoped to. So it allows you to create these sort of modular subsections in your app. The last thing I want to mention is this active attribute. So we can use this as kind of a flag to tell us when our carbon route is matching. Okay. Pretty simple. Now for the blog app that we're going to be building we need to think a little bit about the sort of like URL structure that we want to use. So in that application I'm going to start off with slash category and that could be art, film or photo. And then based on that category there's like two views that I could show. The first would be a list view of all of the blog posts. So slash art slash list. And then the other one would be an individual post. So slash art slash posts slash check out this rad lion thing, right? That's kind of the URL structure that we're going to be using for this app. We're going to have two views, list and posts. So with that in mind we're actually ready to go ahead and just start writing some code. So let's go over and hop into Adam. So in my next HTML file I have a blog app element and that's going to contain all the logic for our application. Inside a blog app I've gone ahead and I've imported carbon location. I've imported a carbon route. I've also pulled in iron selector and then I've pulled in an element called blog pages which we'll talk about in just a sec. Now inside of my template I'm going to go ahead and write out that carbon location. I'm going to take its route and expose that to the application as a scope variable called route. And then I'm going to bind that to a carbon route instance. So we'll link these two with that route scope variable. And then we're going to say that we want to match the pattern of slash colon category. We want to expose that data to our application as category data. And lastly, we want to take the tail. We want to take everything after the category and we want to expose that to our app as the category tail. Now with this in place I can go ahead and I can actually write a little menu whose state will sort of match whatever my URL is. So I'm going to use the iron selector element to do that and I'm just going to throw in some anchor tags inside of there. So I'll say an iron selector. The selected property will be category data dot category. We'll then say that it should use attribute for selected so we can give a unique attribute to all of our menu items to identify and sort of match against that category data property. So the attribute for selected. In this case, I'm just going to make one up. I'll make up an attribute called data page. And then I'm going to create three anchors. We'll duplicate this three times. Slash, the first one will be slash art slash list. The second one will be slash film slash list. We'll do slash photo slash list. Put the appropriate anchor text in there, art, film and photo. And then I'm also going to give each of these a data page. So data page equals art, film and photo. Now you may have noticed that I've used hash routing here. I've got this little pound symbol at the beginning of my URLs. I want to make sure to tell carbon location to use hash routing in our application because at the moment I haven't set up a fancy server for doing any sort of like index redirect or anything like that. We're just going to go ahead and use pretty straightforward simple hash routing. Use hash as path. We'll give that attribute to carbon location. And now it knows that anytime I update the URL, it should put a little hash in there. Okay, so with this in place, we may be ready to go ahead and actually test our application. So I'm going to go over here to Chrome and I'm going to hit the blog page. And we're going to see we get art, film and photo showing up. Those anchor tags are in place, right? When I click on them, you'll notice that the URL has now updated to reflect the state, right? Art, film, photo. If I refresh the page, we see that the state has been reflected to our menu. So now that we have our menu hooked up to our router, the next thing we want to do is create those two views. One for listing all of our blog posts and the other for actually showing an individual blog post. To do that, I will go back to Adam. And I'm going to, in my blog app application, create a main element. And I'm going to add that blog pages element that I showed before that I had imported there. And this blog pages element is kind of gonna be like a replacement for iron pages in our app. So I'm going to tell it which category is currently selected. I'll pass that in as category data.category. And then I'm also gonna tell it the current route. So I'll just pass that in as category tail. And this way blog pages doesn't actually sort of care so much about what the category URL looks like. It only cares about everything that comes after that. Basically, is this a list view or is this a post view? All right, over in our category pages element, the first thing I'm gonna do is create two carbon routes to sort of monitor list and posts. So we'll have a carbon route here. It's route is just gonna come in as route that again gets passed in by the parent here. Route equals category tail. So that's gonna be route. The pattern that we'll be matching on this first carbon route will be slash list. And then the last thing I wanna do is I wanna know when is this particular route active? So I'll say active equals, and I'll create a little scope variable called list active. Similarly, if someone wants to view an individual post, we'll do another carbon route. We'll set that route equal to the route. We'll set its pattern equal to slash posts slash. And then we're gonna have another token here. So we're gonna ask for the slug. Which post slug is the person looking for? And again, we'll also say what is currently active. So we'll say is post active. And lastly, we wanna expose the data for that slug to the actual post page. So we'll expose that as post data. Okay, so I've got these two carbon routes now coming from the tail of the previous page. And what I'm gonna do is take a list page element and a post page element and hook those up to the routes. So this part is pretty straightforward because much like a cooking show, I have already prepared these elements ahead of time. So I can just go ahead and drop the codes for them in here. We've got list page whose category comes from the parent. Remember, we took the category and we passed that into blog pages. So that's already available to us. And we're gonna set its active state to the list active scope variable. Similarly, we've got a post page element. Its post is gonna come from that post data.slug token. And it's also gonna have this little active attribute to tell us if that route is matching if that page is active as well. Now active in this case, this isn't like a fancy thing that these pages support or anything like that. If we actually crack them open and we look at their CSS, you can see that we just have a host selector on each of these. By default, they're display none. And when they have an active attribute, they're display block. So we're just gonna toggle which one is visible based on which route is currently active. Now inside of these elements, I'm not really doing anything too fancy. I have an IronAgeax tag, which is set to auto. And I'm computing the URL based on the values that are passed in. So on the list page, when you pass in a category, we figure out what the URL is to load some category JSON. And then we display that in this little template down here. Similarly for the post page, it's basically the exact same setup. I've got an IronAgeax tag inside of here. I'm computing the URL based on the slug that was passed in. And I also have kind of like a little template here that'll show the actual content for that post. One thing that I wanna make sure I do is when the user first comes to our site, if they just go to slash, I wanna redirect them to a section so that they see some initial content. And what I wanna do is probably redirect them to something like slash art slash list. So you see that whole list of art blog posts. So I'll go back to my blog app element and I'm just gonna drop in this attached handler where I'm gonna say if this dot route dot path is sort of null or undefined, then set the route path to slash art slash list. So now we sort of see the two-way nature of carbon location. So normally it passes a location into the page, but we can also sort of imperatively set a location and pass that back to the URL bar. So I think we've got all of our code here. We can actually switch over to Chrome now and preview this application. So we go back to Chrome, refresh the page, and now we can see we've got our entire blog listed out here for us. If you look at our sort of initial URL up here, it's redirected to art list. And I can go, I can change the different categories to look at film, photo, and scrolling around, I can click on any of these different blog posts and actually sort of see the content that they're displaying. So that about covers it for today. We've hit on the basics of carbon route, but there's still a lot more to cover, right? We can talk more about how to show spinners as we lazy load data, how we manage flash one style content, how we deal with scroll position as we change between the different sections. So I'll save all of that for a future episode. Now, if you yourself, if you have some questions or things you want to see as we keep exploring carbon route, please leave them for me down below in the comments or you can ping me on a social network of your choosing at hashtag ask polymer. As always, thank you so much for watching and I'll see you next time. Do you want me to tell some bad jokes? Okay, I got some bad jokes. Okay. Oh my God. Okay. Okay, Unihorse. What's the difference between a hippo and a zippo? The zippo is a little lighter.