Using HTML Templates in AngularJS Widgets

See full content of angularwidget.html.

<widget ng-controller="SampleAngularController">
 
    <h1 class="caption spare" cng-local="label.title.hello"></h1>
    <h3 class="caption spare">{{sessionInfo.customAttributes['name']}} ({{sessionInfo.currentUser}})! {{adapter.cng().local('label.title.sockets')}}</h3>
    <div ng-if="!input" cng-global="label.noinput"></div>
    <table ng-if="input">
        <tr>
            <td class="header" cng-local="label.socket.input"></td>
            <td class="header" cng-local="label.socket.output"></td>
        </tr>
        <tr>
            <td>
                <table>
                    <tr ng-repeat="(key, value) in input" ng-class="{true:'even', false:'odd'}[$even]">
                        <td class="label">{{key}}</td>
                        <td class="value">{{value}}</td>
                    </tr>
                </table>
            </td>
            <td>
                <table>
                    <tr ng-repeat="(key, value) in output" ng-class="{true:'even', false:'odd'}[$even]">
                        <td class="label">{{key}}</td>
                        <td class="value">{{value}}</td>
                    </tr>
                </table>
            </td>
        </tr>    
    </table>
    <cng-event type="socket" id="input" handler="socketInput(socket, data)" />
    <hr/>
 
    <div class="spare>        <h3 class="caption" cng-local="label.title.model"></h3>
        <div cng-local="label.model.registered"></div>
        <table>
            <tr ng-repeat="(key, value) in model.changes" ng-class="{true:'even', false:'odd'}[$even]">
                <td class="label">{{key}}</td>
                <td class="value">{{value}}</td>
                <td ng-if="(settings && settings.enableModelEditing) || sessionInfo.admin" ng-click="removeModelChange(key)"><a href="#">X</a></td>
            </tr>
        </table>
        <div ng-if="(settings && settings.enableModelEditing) || sessionInfo.admin">
        <div cng-local="label.model.instruction"></div>
        <table>
            <tr class="even">
                <td class="label" cng-local="label.model.property"></td>
                <td class="value"><input type="text" ng-model="property"></td>
            </tr>
            <tr class="odd">
                <td class="label" cng-local="label.model.value"></td>
                <td id="value" class="value">{{input[property]}}</td>
            </tr>
            <tr class="even">
                <td class="label" cng-local="label.model.change"></td>
                <td class="value"><input type="text" ng-model="newValue"></td>
            </tr>
            <tr class="odd">
                <td colspan="2" class="commit"><button type="button" ng-click="commitModelChanges(property, newValue)" cng-local="label.model.commit"/></td>
            </tr>
        </table>
        </div>
     
        <cng-event type="model" handler="modelChanged(model, property)" />
 
        <hr/>
    </div>
 
    <cng-event type="ready" handler="init()" />
 
  </widget>

See full content of angularwidget.js.

SampleAngularController = function($scope) {
 
    $scope.socketInput = function(socketId, data) {
        showMessage(LEVEL_INFO, $scope.adapter.cng().local("message.socket"));
 
        $scope.input = jQuery.extend(true, {}, data);
        var changes = $scope.model.changes;
        if (changes) {
            for(var key in changes) {
                if (typeof(data[key]) != "undefined") {
                    data[key] = changes[key];
                }
            }
        }
        $scope.output = data;
        $scope.adapter.cng().socketEvent("output", data);
 
        if (!$scope.model.statistics) {
            $scope.model.statistics = { $class: "example.cng.angular.model.SearchStatistics"}; // Notice! We explicitly point a Java class
            $scope.model.statistics.stats = {};
        }
        if (data.typeCode) {
            var stats = $scope.model.statistics.stats[data.typeCode];
            if (!stats) {
                stats = {};
                stats.typeCode = data.typeCode;
                stats.count = 0;
                $scope.model.statistics.stats[data.typeCode] = stats;
            }
            stats.count += 1;
 
            $scope.adapter.cng().model("statistics", $scope.model.statistics);
            $scope.adapter.cng().socketEvent("stats", $scope.model.statistics);
        }
        jQuery(".spare").hide();
    };
  
$scope.modelChanged = function(model, property) {        showMessage(LEVEL_WARNING, $scope.adapter.cng().local("message.model") + ": " + property);
  
        $scope.property = null;
        $scope.newValue = null;
        $scope.model = model;
    };
  
    $scope.commitModelChanges = function(key, value) {
        var changes = $scope.model.changes;
        if (!changes) {
            changes = {};
        }
        changes[key] = value;
  
        $scope.adapter.cng().model('changes', changes);
    };
  
    $scope.removeModelChange = function(key) {
        var changes = $scope.model.changes;
        delete changes[key];
  
        $scope.adapter.cng().model('changes', changes);
    };
  
    $scope.init = function() {
        if (!$scope.model) {
            $scope.model = {};
        }
        $scope.statistics = $scope.adapter.cng().model("statistics");
  
        var settings = $scope.settings["initialChanges"];
        if (settings && !$scope.model.changes) {
            var changes = JSON.parse(settings);
            $scope.model.changes = changes;
            $scope.adapter.cng().model("changes", changes);
        }
    };
  
};
  
AngularCNG.init("angularwidget", SampleAngularController); 

It is quite unfortunate in this case that there is a possibility for a widget to be used several times in a single perspective. In great simplification, it causes the same code being injected in several places and therefore any DOM segregation/identification may turn to be much more complicated or even impossible. Furthermore, it might cause the identities duplication.

In the case of our widget, the code multiplication would cause incorrect widget behavior: when any of widgets in a perspective received a massage, all of the instances would hide the spare contents.

To solve the above problem, use the widget templates. The Backoffice Framework provides a widget container identity which is unique in the whole perspective. This way, we are able to make the identities inside also unique.

Amend the view file by adding a small template placeholder ${id} in each identity definition and make relevant references to them.