• Meteor

Getting Started

From the class:  Using Iron Router

Let's get started with a simple routing application. I have fired it up, and I have it running in the browser. And I'll have my code over on the left. First, let's talk about what the purpose of the router is.

What we want to be able to do is to take a URL like this one and map it to some functionality in our application so that we can do something like render a template or conditionally perform some logic. When I first fire up my application, since I have no routes to find, the server is actually sending back a 404 status code, saying there's no routes to find for the root URL. So what will print to the page here is a get root path not found.

So the first thing we need to do is to go over to our code in our JavaScript and define our first route. To do that, I can call the route method of router. And as our first parameter, I'll pass the path. So in this case, it will be the root path.

And as a second parameter in the simplest case, I can just pass the name of a template. Most of the time when routing, we're just given a particular path going to render out a template. And so that's why this is the simplest thing that we can do, is just provide the name of the template here.

Now, one thing I'd like to draw your attention to is that this route is being created outside of this is client and is server block. The reason for that is because the server needs to know about the route. So that if we try to access a route that doesn't exist, the server can send a proper 404 HTTP status code.

This ends up being really important for search indexes to make sure that if you have pages that don't exist anymore that the server sends back a 404. And Google or Yahoo or Microsoft can get rid of them properly.

Now, even though this is defined on the client and the server, it will only run when we navigate to this particular URL. So on the server, it will not execute. Now, when I refresh the page in the browser, it's printing out this error message to the screen saying that the template home can't be found and are we sure we defined it.

So what we need to do next is to come over here and define a template called home. Once I do that and save the application and the browser refreshes on the right, you can see that what we've done is we've mapped the root URL to this home template. And that's been rendered out into the page.

Let's get a little bit more complicated. Instead of providing a name of a template as a string, I can also provide a route function. And inside the route function, I can write code to tell the router what to do for this particular route. Sometimes this function is called the route function, and you'll also hear it referred to as the action function, particularly when we get to route controllers.

So inside the function, to replicate what I had before, I can type this dot render. So I'm calling the render function. And the render function takes the name of a template as its first and primary parameter.

So I'm going to render the home template. And what that will do is render the home template into the main area of the page here. So nothing changes in the browser, because this accomplishes the exact same thing as what we had before, except I'm writing it explicitly in code now.

This route function is reactive. That means that it will rerun if any data sources inside of it invalidate the outer computation. Let me show you what I mean.

Let's start off by using something from session. And so what I'll do is just create a variable called is logged in. And we'll simulate that by getting a key value from session.

Now, session is a reactive data source, as you probably already know. And so if this value changes, this entire function will rerun. And what we can do is to say if they're logged in, then render the home template. And if they're not, render some other template, like the login template.

Now, it's complaining that we haven't defined a login template quite yet. So let's do that. And we're just simulating things here. So I'll create a simple template that just has the word login.

Now, over in the console, I can play around with session and set that key is logged in to true. And notice that the browser now renders the home template. And that's because our entire route function was rerun. And on the second run, is logged in turned out to be true. And so we render out the login template to the page.

There's a couple of other functions inside of our route functions that we can call that we'll be talking about in the rest of the class. But another one I'd like to introduce you to is the layout function. That allows us to set a layout dynamically in code.

Let's say that we have a layout called the app layout. So we'll go over to the right in the HTML section and define a template called app layout. Layouts are really useful for reusing HTML in multiple routes in your application.

So for example, let's say that we have an H1 tag here that says layout, and then some footer text. And we want this to show up on every single route. And so we can define this layout here and then specify where we want our templates to render into, given the particular route. And the way we can do that is by using this yield keyword.

And we're using a space bar's expression here to render the yield into the page, into the layout. Now, our route doesn't know about this layout yet. So we can call the layout method and provide the name of it. And that will render out the layout to the page and then render either the home template or the login template into the main region.

So we have our layout HTML all around here. And then inside of the layout goes our home template, which came from calling this function render with the name of the home template. And we provided the layout by calling this layout function with the name of the layout template.

One thing to notice here is that our body is empty. So I've provided these body tags just to show you. But you could actually get rid of them if you wanted to.

What happens is the router by default takes over the entire page or pins itself to the body and then renders in its layout and any templates for the route into the page. So you don't need to worry about the body anymore. You can just let the router handle it.

In this video, I gave you an introduction to the new routing system with Iron Router. We took a look at how to define routes using the route method and providing a URL or a path. Then we looked at how we can provide a route function. And inside that route function, render particular templates using the render method.

Then we looked at how the route function is reactive. And so it can run if any of its reactive data sources change, like session. Finally, we looked at how we can use layouts and dynamically change the layout depending upon the route.