Series: EmberSchool Samples: Introduction to Routing

Router.js and the URL

Published on Jun 22, 2016

How do we get different pages at different URLs? Through the router.js file.

Code

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: config.locationType
});

Router.map(function() {
  this.route('foods');
  this.route('about');
});

export default Router;

Transcript

I’ve been working hard on some new training projects, so every once in a while in the next couple of months I’ll go ahead and put out some sample videos from what I’m recording. This is the first one of those. They’re selected to make it so even though there’s an ongoing project, it’s pretty easy to jump in. I hope you enjoy it.

So our app is pretty awesome, but what if we want to have different pages? Let’s say we want an about page where it tells us about the product, or we want all this stuff to show at the foods page instead of at the root. How do we do that?

For each url that we want, we can define a route. Now we don’t have any routes defined here right now, but it comes automatically with one, so it acts as if this is already written out. And if you try to write it out again actually it’ll freak out, it’ll throw an error, because you can’t redefine application. So instead of having this, let’s go ahead and get the foods route that we were wanting.

So we have the route name, and then we have a hash that gives us the path. And if the path is the same as the route name... hey, we don’t have to put it there. Ember will know automatically. Now with this route name, it’s going to expect a controller, a template, a route, if we have those to bear the name foods. And as a matter of fact, we want the... what we currently have in the application route to show up there. So let’s go ahead and rename all these. This will leave the root url, the application, blank, but when we go to foods, there we go.

We can also create other routes. So let’s create an about page. To do that all we need is a template. The default controller and route are used at runtime and we only need to create a file for them if we want to change anything about the default. So let’s just say This is our about page! . So whenever we go to the about url, it’ll show whatever is in templates/about.

So if we go back to our diagram, this is what it looks like right now. We have our about route which has the defaults for the route, the controller, and the view, and it has a specified template. And we have the foods route which has a custom route, a custom controller, the default view, and then a custom template. Next, we’ll go over how to navigate between these two routes.

EmberSchool Samples: Introduction to Routing

Subscribe to our mailing list