Last week recap and links:
Image courtesy of kanate / FreeDigitalPhotos.net
What are your best reads this week? Leave them in the comments below.
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.
My next step in AngularJs (first step here) is to get data from multiple REST calls. The trigger is a button and the data is presented side-by-side.
First the HTML code. The button fires the getData function on data-ng-click. By using the selectedId in the function call the input is passed to the function.
<div ng-app="multiple" ng-controller="leftrightctrl">
<div class="row">
<input type="number" ng-model="selectedId" />
<button data-ng-click="getData(selectedId)">Click me!</button>
</div>
<div class="row">
<div class="col-md-6">
<pre>November: {{left.name}}</pre>
</div>
<div class="col-md-6">
<pre>December: {{right.name}}</pre>
</div>
</div>
</div>
In javascript I defined a function to get the left and the right. With getData I call both. The data is from a REST service. It is called with the id and a date. Left is november (2015-11-01) and right is december (2015-12-01).
angular
.module('multiple', [])
.controller('leftrightctrl', function ($scope, $http) {
$scope.left = null;
$scope.right = null;
$scope.getLeft = function (id) {
return $http.get("http://localhost/service/api/multiple/" + id + "/2015-11-01")
.then(function (response) {
$scope.left = response.data;
});
};
$scope.getRight = function (id) {
return $http.get("http://localhost/service/api/multiple/" + id + "/2015-12-01")
.then(function (response) {
$scope.right = response.data;
});
};
$scope.getData = function (id) {
$scope.getLeft(id);
$scope.getRight(id);
};
});
Reading code from others is the first step in shu-ha-ri. I’m learning.
plnkr with a live version of the code.
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 😉
Last week recap and links:
Image courtesy of kanate / FreeDigitalPhotos.net
What are your best reads this week? Leave them in the comments below.
Since switching to MacBook for my work laptop I’ve had some issues. One was the certificate used to secure the e-mail traffic. Windows never complained (Azure = Microsoft) but Mac OS noticed a missing root certificate and a name mismatch.
I managed to solve the issue. First show the certificate and then always trust it.
No more complaints about the certificate. One less dialog to close, one step closer to GTD.
.NET Development by Eric 