Module 17: Implementing Routing

In this module, you add two new routes (states) to the application: app.sessions loads the session list view, and app.session loads the session details view.

Step 1: Define the app.sessions route

1. Open app.js in conference/www/js

2. Delete the app.playlists state

3. Replace it with an app.sessions state defined as follows:

   .state('app.sessions', {
     url: "/sessions",
     views: {
         'menuContent': {
             templateUrl: "templates/sessions.html",
             controller: 'SessionsCtrl'
         }
     }
   })
   

Step 2: Define the app.session route

1. Delete the app.single state

2. Replace it with an app.session state defined as follows:

   .state('app.session', {
       url: "/sessions/:sessionId",
       views: {
           'menuContent': {
             templateUrl: "templates/session.html",
             controller: 'SessionCtrl'
         }
       }
   });
   

Step 3: Modify the default route

Modify the fallback route to default to the list of sessions (last line in app.js):

```
$urlRouterProvider.otherwise('/app/sessions');
```

Step 4: Modify the side menu

1. Open menu.html in conference/www/templates

2. Modify the Playlists menu item as follows (modify both the item label and the href):

   <ion-item nav-clear menu-close href="#/app/sessions">
       Sessions
   </ion-item>
   

Step 5: Test the application

1. Open a browser and access the following URL:

   http://localhost:5000

2. Open the side menu ("Hamburger" icon in the upper left corner) and select Sessions. Select a session in the list to see the session details.