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/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});
    });