Durandal gives us the possibility of managing the routes in our project. We are going to split different parts of our project into pages. That will give a better user experience because we will be focused on just one task at a time.

We will split the app into four parts:

These parts will contain more or less the same code we built in the Knockout application. Sometimes we will need to adapt small pieces of code.

To create these new routes, we will open the shell.js file and update the router:

router.map([
  { route: ['','/','catalog'], title:'Catalog', moduleId: 'viewmodels/catalog', nav: true },
  { route: 'new', title:'New product', moduleId: 'viewmodels/new', nav: true },
  { route: 'edit/:id', title:'Edit product',moduleId: 'viewmodels/edit', nav: false },
  { route: 'cart', title:'Cart', 
    moduleId: 'viewmodels/cart', nav: false },
  { route: 'order', title:'Order', moduleId: 'viewmodels/order', nav...