Home/

...

/

Nested Templates

Nested Templates

You’ll learn how to use nested templates in an Ember application in this lesson.

Now, you understand nested routes, so let’s move on to the nested UI part. To prevent you from having to go back, here are the route definitions again:

Press + to interact
// app/router.js
import EmberRouter from '@ember/routing/router';
import config from 'rarwe/config/environment';
export default class Router extends EmberRouter {
  location = config.locationType;
  rootURL = config.rootURL;
}
Router.map(function () { 
  this.route('bands', function () {
    this.route('band', { path: ':id' }, function () { 
      this.route('songs');
    }); 
  });
});

Before we delve into the templates, please note that since the application template now only contains the title bar and an empty outlet, you will not see anything of interest when you go to http://localhost:4200/. This URL works for your local computer. You need to add the /bands manually, so use http:/ ...

Access this course and 1400+ top-rated courses and projects.