Page History

...

Let's describe the different parts of the file in sections...

Outer Wrapper

<!-- partial HTML -->
<div id="ov-sample">
 
    ...
 
</div>

...

The colId attributes of each column header cell should match the column identifier values defined in the AppUiMessageHandler class (see above).

Table

...

Body <div>

The <div> with class "table-body" provides a template row for Angular to use to format and populate the table data.

...

Following the naming convention, the prefix to this directive is ov-sample-. More details on what this directive does is shown below.

sample.js

This file defines the view controller, invokes the Table Builder service to do the grunt work in creating the table, and defines a directive to drive the "fly-in" details panel.

Again, we will define the different parts of the file in sections...

Outer Wrapper

An anonymous function invocation is used to wrap the contents of the file, to provide private scope (keeping our variables and functions out of the global scope):

// js for sample app view
(function () {
    'use strict';
 
    ...
 
}());

Variables

Variables are declared to hold injected references (console logger, scope, services), and configuration "constants":

// injected refs
var $log, $scope, fs, wss, ps;

// constants
var detailsReq = 'sampleDetailsRequest',
    detailsResp = 'sampleDetailsResponse',
    pName = 'ov-sample-item-details-panel',

    propOrder = ['id', 'label', 'code'],
    friendlyProps = ['Item ID', 'Item Label', 'Special Code'];

Helper Functions

Next come helper functions that we will examine in more detail in a bit:

function addProp(tbody, index, value) { 
    ...
}
 
function populatePanel(panel) { 
    ... 
}

Detail Response Callback

Next we define the callback function to be invoked when a "sampleDetailsResponse" event arrives with details about a selected item:

function respDetailsCb(data) {
    $scope.panelDetails = data.details;
    $scope.$apply();
}

It's job is to take the data from the payload of the event and store it in our scope, so that it is available for the details panel directive to reference.

Defining the Controller

Next our view controller is defined. It might help to break this into pieces too...

angular.module('ovSample', [])
    .controller('OvSampleCtrl'
    ['$log', '$scope', 'TableBuilderService',
        'FnService', 'WebSocketService',
 
        function (_$log_, _$scope_, tbs, _fs_, _wss_) {
            ...
        }])

The first line here gets a reference to the "ovSample" module. Again, this is the naming convention in play; the module name should start with "ov" (lowercase) followed by the identifier for our view, first letter capitalised.

The controller() function is invoked on the module to define our controller. The first argument – 'OvSampleCtrl' – is the name of our controller, as registered with angular. Once again, naming convention is "Ov" followed by identifier for our view, first letter capitalized, followed by "Ctrl". Case is important. The second argument is an array...

All the elements of the array (except the last) are the names of services to be injected into our controller at run time. Angular uses these to bind the actual services to the specified parameters of the controller function (the last item in the array).

Inside our controller function, we start by saving injected references inside our closure, so that they are available from other functions, as well as initializing our state:

$log = _$log_;
$scope = _$scope_;
fs = _fs_;
wss = _wss_;

var handlers = {};
$scope.panelDetails = {};

Next up, we need to bind our event handler function to the web socket service, so that when a "sampleDetailsResponse" event comes in from the server, it gets routed to us:

// details response handler
handlers[detailsResp] = respDetailsCb;
wss.bindHandlers(handlers);

 blah

sample.css

Stylesheet for the sample view. Again, a number of naming conventions are in use here:

...