Vaadin and AngularJS - happy together

You certainly read and hear a lot about JS frameworks, foremost AngularJS, and as a Vaadin developer you might just wonder what to make of it: ignore it? (Would be a shame, there is great stuff out there.) Jump ship altogether? (Would be a shame, too - you’d loose Vaadin.) But fortunately, it’s not really Vaadin or AngularJS - it’s rather Vaadin AND AngularJS.

There is an add-on available that lets you combine the best of Vaadin and AngularJS: Vaangular

Some reasons why you might want to do that:

mix and match skill within your team
increase responsiveness with bad network connection (by doing client-side logic)
reuse existing AngularJS-based assets
have an alternative to custom GWT development

And: you don’t have to do any GWT development (and no REST-backend-HTTP-calls either - because you have Vaadin for that, haven’t you?).

Here’s an example that uses Vaangular to increase responsiveness. Imagine you want to provide a weather forecast with a slider to select the time and get some more details:

Slider with clock times and temperature for each time - i.e. a weather forecast

For a maximal user experience, even for users with slow network connection, you'll want to minize the server roundtrips. This would be a perfect task for your client side developer, but he/she is probably more keen to use AngularJS than GWT.

To include an AngularJS-based slider view into a Vaadin UI, you have to include the Vaangular add-on and follow these steps (we have the full code available on Github)

First: create an HTML fragment with AngularJS bindings:

<div ng-controller="WeatherController">
    <div ng-bind-html="content()"></div>
    <input type="range" min="0" max="-1" 
            step="1" ng-model="sliderPos" />
    <div>
        <div ng-repeat="t in userState.times" 
                ng-click="moveSlider($index)">
            <div></div>:00
        </div>
    </div>
</div>

Second: create a matching AngularJS controller (and a unit test, please! – you can download ours)

angular.module('weatherModule', ['ngSanitize'])
.controller('WeatherController', function($scope, $connector, $sce) {
    $scope.sliderPos = 0;
    $scope.content = function() {
        var res = $scope.userState.entries[$scope.sliderPos];
        return $sce.trustAsHtml(res);
    };
    $scope.moveSlider = function(val) {
        $scope.sliderPos = val;
    };
});

You’re almost there. All what’s left is to write a Vaadin component that’s derived from de.akquinet.engineering.vaadin.vaangular.angular.NgTemplate or de.akquinet.engineering.vaadin.vaangular.angular.NgTemplatePlus. You can set weather data like this:

public void setData(int[] times, String[] entries) {
    validateParameters(times, entries);
    this.times = times;
    this.entries = entries;
    setUserState("times", times);
    setUserState("entries", entries);
    markAsDirty();
}

Everything put in via setUserState is forwarded to AngularJS.

Add your component to the UI, fire off the server – and enjoy.

Of course, you can also submit data from the client to the server (both immediate and deferred) and call methods on the server. You can also apply Vaadin style classes to HTML generated by AngularJS – it’s all up to you

See more detailed instructions and more extensive examples

(also available in German)

Oliver Damm, Axel Meier, Sebastian Rothbucher
Oliver Damm, Axel Meier and Sebastian Rothbucher are Vaadin & Web developers and trainers working for akquinet AG in Hamburg, Germany. When not watching FC St. Pauli play or chilling at Lake Alster they craft business web applications – with Vaadin, of course.