We need a composition layer for the GUI. It should combine the data from multiple services into one interactive web page. AngularJs comes to mind.

As a proof of concept I decided to create a simple web page. The page requests data from a REST service and displays this in a type-ahead search box. Below is the code I created.

<div class="container body-content" ng-app="searchdemo">
   <div class="container-fluid" ng-controller="TypeaheadCtrl">
       <h4>Search</h4>
       <input type="text"
              ng-model="selectedVariable"
              placeholder="search for variable"
              uib-typeahead="var as var.Name for var in variables($viewValue)" 
              typeahead-loading="loading" 
              typeahead-no-results="noResults" 
              typeahead-min-length="3"
              class="form-control"/>
       <i ng-show="loading" class="glyphicon glyphicon-refresh"></i>
       <div ng-show="noResults">
          <i class="glyphicon glyphicon-remove"></i> No Results Found
       </div>
   </div>
</div>

The angular controller seemed to work, but no type-ahead.

Robbert looked at my code, hummed, clicked with the mouse and pointed me in the right direction. We changed the handler for the $http.get from “success” to “then”, because of the “promise” pattern (thanks Robbert)

angular.module('searchdemo', ['ui.bootstrap'])
       .controller('TypeaheadCtrl', function ($scope, $http) {
          $scope.result = new Array ({ Name : 'test' });
          $scope.variables = function (filter) {
             return $http.get("http://localhost:2305/api/relatie/" + filter)
                .then(function (response) {
                   console.debug("response received ", response);
                   return response.data;
                });
    };
});

Looks like I’ll be diving deeper into AngularJs the next days. Good times ahead 😉