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.