Search⌘ K

Setting up Nested Routes

Explore how to set up nested routes within Ember.js to build an admin page with add and edit functionality alongside category pages with dynamic product routes. Understand route generation commands and use Bootstrap to structure the UI effectively.

Nested routes are used by the admin side of the application to load different categories. First, let’s discuss what we want to achieve using nested routing.

Requirements

Admin page

Look at the mock-up design below to get an overview of the structure for the admin route:

Our admin page contains the following two parts:

  • One loads all the products, and the user can click to edit them.
  • On the other part, the add or edit route loads one at a time. The add route loads a product when the user clicks the “Add” button as shown in the picture above. The edit route loads a product when the user clicks a product
...