Module 5: Creating the Session Controllers

AngularJS controllers act as the glue between views and services. A controller often invokes a method in a service to get data that it stores in a scope variable so that it can be displayed by the view. In this module, you create two controllers: SessionsCtrl manages the session list view, and SessionCtrl manages the session details view.

Step 1: Declare starter.services as a Dependency

The two controllers you create in this module use the Session service defined in the starter.services module. To add starter.services as a dependency to the starter.controller module:

1. Open conference/www/js/controllers.js

2. Add starter.services as a dependency to make the Session service available to the controllers:

   angular.module('starter.controllers', ['starter.services'])
   

Step 2: Implement the Session List Controller

1. In controllers.js, delete PlayListsCtrl (plural)

2. Replace it with a controller named SessionsCtrl that retrieves the list of conference sessions using the Session service and stores it in a scope variable named sessions:

   .controller('SessionsCtrl', function($scope, Session) {
       $scope.sessions = Session.query();
   })
   

Step 3: Implement the Session Details Controller

1. In controllers.js, delete PlayListCtrl (singular)

2. Replace it with a controller named SessionCtrl that retrieves a specific session using the Session service and stores it in a scope variable named session:

   .controller('SessionCtrl', function($scope, $stateParams, Session) {
       $scope.session = Session.get({sessionId: $stateParams.sessionId});
   });