AngularBeans: A fresh new take on AngularJS and JavaEE
- But at a closer look on what happened those few last years in web development, we will be driven to accept the evidence: it’s the era of single page applications, of client side rendering and of the realtime web.
- So, a modern server side web framework should be “aware” of the fact that on the other side of the network adapter there’s powerful and intelligent client.
- Now let’s take a look at the “HelloAngularBeans” class on the server side:
I think it’s easy to understand what happens here: you declare your annotated CDI bean, and you inject it in the AngularJS controller as any regular AngularJS service.
AngularBeans is a fresh, new approach integrating AngularJS with a JavaEE backend and has stirred some attraction in the JavaEE world recently.
It’s the client!
So, a modern server side web framework should be “aware” of the fact that on the other side of the network adapter there’s powerful and intelligent client. On the long run, the classical paradigm – a thin (or dumb) client served by a stateful server – is going to be replaced by another architectural pattern, consisting of a stateful client and a more-or-less stateless server.
Enter AngularBeans. This framework exposes Java-EE 7 CDI beans as AngularJS services. The idea is simple: write your Java beans, inject them on the AngularJS side, and what happens in between is the job of AngularBeans.
All you need to get started with AngularBeans is a JavaEE7 web profile or full profile application server and your favorite IDE. There’s even a Maven archetype on Maven Central to give you a head start.
In case you haven’t the Maven Central archetypes catalog installed yet, you need to add the catalog URL http://repo.maven.apache.org/maven/archetype-catalog.xml. Those are the details you need to start a new project from the “helloWorld” archetype:
The resulting project contains a pom.xml that points to the SNAPSHOT version of AngularBeans. Most likely you’ll prefer the stable version, so just before testing it change the pom.xml as follows:
Actually, both Bootstrap and SockJS are optional. The only mandatory tool is AngularJS. SockJS comes in handy if you want to support older browsers. This library is detected by AngularBeans.
If it’s present, it’s used instead of raw web sockets default usage in all real time behaviors of the framework. So you can use web sockets with legacy browsers that don’t support web sockets natively.
By the way, the folder layout is just a default structure. With AngularBeans you can use any folder structure you like. Note that angular-beans.js is an empty file. At runtime, accessing the file from the browser doesn’t return the file’s content.
Instead, the true content is provided by a servlet. The file is optional. It is just used to stop some IDE validator from complaining about the missing “angular beans.js” file.
Now let’s take a look at the “HelloAngularBeans” class on the server side:
? Let’s examine them, one by one:
annotation and add a promise to the controller as follows:
And in the HTML:
This way, we use the controller as an abstraction between the view and the “helloAngularBeans” service.
There’s more in store for you!
AngularBeans is a fresh, new take on professional application development. It combines the best of two worlds: a native AngularJS 1.4 client which is powered by a full-blown JavaEE backend.
This article was originally published at Beyond Java and edited by Stephan Rauh.
 There are exceptions. Client-side rendering is bad when you’re concerned about your mobile device’s battery life.