Module 7: 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 menu-close href="#/app/sessions">
       Sessions
   </ion-item>
   

Step 5: Test the application

1. Make sure ionic serve (your local web server) is still running.

   • If it's running but you closed your app page in the browser, you can reload the app by loading the following URL: http://localhost:8100

   • If it's not running, open a command prompt, navigate (cd) to the ionic-tutorial directory and type:

     ionic serve
     

2. In the conference application, 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.