While creating a website we need our pages to be accessible via permalink , a URL of the form http://myapp.com/posts/xyz. This means we’ll need some kind of routing to look at what’s inside the browser’s URL bar and display the right content accordingly.

Iron Router is a routing package that was conceived specifically for Meteor apps. Not only does it help routing, but it also take care of filters and even manages subscriptions.

First, let’s install the package from Atmosphere:

[cc lang=”javascript”]
meteor add iron:router
[/cc]

Iron Router lets us break out of this mold by taking over what renders inside the HTML tag. So we won’t define that tag’s content ourselves, as we would with a regular HTML page. Instead, we will point the router to a special layout template that contains a {{> yield}} template helper.

This {{> yield}} helper will define a special dynamic zone that will automatically render whichever template corresponds to the current route.

Example:

We’ll start by creating our layout and adding the {{> yield}} helper. First, we’ll remove our HTML tag from main.html, and move its contents to their own template, layout.html.

Iron Router will take care of embedding our layout into the stripped-down main.html template for us, which now looks like this:

[cc lang=”javascript”]

While the newly created layout.html will now contain the app’s outer layout:

[cc lang=”html”]

[/cc]

After this change, our browser tab will show the default Iron Router help page. This is because we haven’t told the router what to do with the / URL yet, so it simply serves up an empty template.

To begin, we can regain our old behavior by mapping the root / URL to the postsList template. We’ll create a new router.js file inside the /lib directory at our project’s root:

[cc lang=”html”]
Router.configure({
layoutTemplate: ‘layout’
});
Router.route(‘/’, {name: ‘postsList’});
[/cc]