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
addoreditroute loads one at a time. Theaddroute loads a product when the user clicks the “Add” button as shown in the picture above. Theeditroute loads a product when the user clicks a product