Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

The Recipe for Angular 2 in a Java EE Environment

DZone's Guide to

The Recipe for Angular 2 in a Java EE Environment

Angular 2 provides a variety of benefits, especially when it comes to your UI. See what it takes to get a dev environment up on Java EE, where devs can reuse their skills.

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

As a Java developer, I do UI once in a while. I have preferred the Java part because the UI part always felt very different. Then, Angular 2 came along.

Angular 2 uses TypeScript, which offers static typechecking, lambdas(->), and support for IDE tooling. TypeScript is JavaScript, but with the IDE support I always missed.

Angular 2 has components with an interface to push typed data into them and to get typed events out of them. The components can be wrapped inside each other. That way, the UI can be structured and components/pipes can be reused more easily.

Angular 2 has injectable services with observables. That means it's easy to use REST calls without falling into callback hell.

That is interesting enough for me to set up a project to use Angular 2 in a Java EE environment. That means a Maven build, a JAX-RS REST service, a Wildfly server, and an Angular CLI generated/build frontend.

Here's a link to the project.

Project Goal

Our goal today is to set up a development environment for Java developers to run and test the UI without app server redeployment. That means we'll need:

  • To set up an app server to provide the REST services with fast redeployment during development.

  • To have a Maven build to package an ear with UI and business logic ready for deployment.

  • To use the tools available in the Java EE and Angular 2 environments where possible.

Development Setup

Angular 2 has the Angular CLI. It offers setting up a new project and serving it. It can generate components, pipes, etc, and it can build a --prod package of the Angular 2 UI.

Angular CLI offers a working structure for the UI — and a build process. In a Maven WAR module, there can be an Angular2 folder to have an Angular-CLI-generated UI.

The WAR has the JAX-RS classes to provide the REST service and the Angular2 directory to for the UI.

Angular CLI can serve the UI with ng serve and call the rest service on the app server. Wildfly can be integrated with Eclipse with the JBoss plugin.

That provides fast redeployment of the Angular 2 UI and of the Java EE backend.

The UI can be developed with the TypeScript plugin for Eclipse or with WebStorm. WebStorm understands the project structure provided by the Angular CLI.

The IDEs can then provide typechecking/code completion/refactoring for the Angular 2 UI.

With such a development setup, it is possible to develop the UI with nice refresh cycles. The Angular CLI offers the toolchain for the UI and makes it unnecessary to learn a new toolchain for the UI.

You can refactor the UI to provide a new column in the table. For that, you can extend the DTO in the UI and update the view. Then you update the DTO in the backend and put the data in the DTO.

The UI will update automatically. The Java EE server will update its deployment, and then you are ready to test your update.

Build Process

To use the UI in a Java EE environment an EAR/WAR is needed. This project uses an EAR. To start, a Maven archetype of JBoss was used.

The archetype provides a build with the modules EAR, EJB, and WAR. The WAR modules need to be extended to build and include an optimized package (ng build --prod) of the Angular 2 UI.

If a node is available on the continuous integration server, the build can run on a continuous integration server. The EAR is ready for deployment on a Java EE 6 server.

The build process provides a build that resolves the Maven and npm dependencies. It builds and assembles the Maven modules.

The build time could be improved a bit. If your continuous integration server is CPU-constrained, that is an issue. The build misses the feature of providing a Docker image.

The Angular 2 UI

The UI is an example of some of the Angular 2 features. The UI has two routes (detailview/tableview). It has a service that is injected and calls the REST interface.

It has wrapped components and custom form validation. The translation is done with ng2-translate, and bootstrap is used for the CSS. Translation will be changed to the i18n of Angular 2.

Again, here's a link to the project.

This recipe should provide a starting point for anybody interested in using Angular 2 in a Java EE environment.

The takeaway for Java developers: With Angular 2, we can reuse a lot of our skills.

Future Posts Will Cover

  1. The REST service

  2. UI features

  3. Build process

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:
java ee ,angular 2 ,web dev ,ui

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}