Routes allow you to structure data in views. Like folders, nested routes group together related routes under a base URL. It is helpful to think of parent routes as representing nouns and child routes as representing verbs or adjectives:

// Parent route is noun
this.route('sightings', function() {
  // Child route is verb or adjective
  this.route('new');
});

sightings is a parent route representing sightings, which are things (nouns), and new is a nested route representing the action of creating a sighting (a verb). this.route is used to build up the URL including the parent and child.

With template nesting, parts of your site can be rendered on all routes (such as navigation), while others will only show on more specific routes (like IndexRoute on the root URL). You will instruct each route on how to retrieve its data using callback functions.

Now, you are going to edit some of the template files you generated along with your routes and navigate to different pages of your application. The code you are adding in this section is temporary, but it will allow you to see the relationship between your routes.

To begin, open the app/templates/sightings.hbs template file and add an <h1> element above the existing {{outlet}} helper.

<h1>Sightings</h1>
{{outlet}}

Next, edit the app/templates/sightings/index.hbs template. Add another <h1> element, and this time delete the {{outlet}} helper. Parent templates use {{outlet}} to nest child views. app/templates/sightings/index.hbs is a child template without any nested route, so it does not need an {{outlet}} helper.

{{outlet}}
<h1>Index Route</h1>

Save your files and point your browser to http://​localhost:4200/​sightings/ to see the results (Figure 20.4).

Figure 20.4  Sightings: nested routes

Next, edit app/templates/sightings/new.hbs. This route tree also ends with this child route, so delete {{outlet}} and add an <h1> element.

{{outlet}}
<h1>New Route</h1>

Now, change the URL in your browser to http://localhost:4200/sightings/new (Figure 20.5).

Figure 20.5  Sightings: new route

Your Tracker app now has nested routes rendering a template for the parent app/templates/sightings.hbs file and for each child: app/templates/sightings/index.hbs and app/templates/sightings/new.hbs. The parent template uses {{outlet}} to nest the views.