Tips, tricks and tools for creating your own data-driven app, brought to you in partnership with Qlik.

This is the third article in our "The Recipe for Angular 2 in a Java EE Environment" series with a more detailed description of the Frontend of the Angular2 and JavaEE Project. It follows my second article about Angular 2 and Java EE that gave a detailed overview of the Backend of the Car Rental Project.

The Angular2 and JavaEE Project uses Angular-CLI to serve and build the UI. The project skeleton was provided by Angular-CLI (ng new car rental --routing). For translation, ngx-translate is used. It was ported from ng-translate of Angular 1. Angular's I18N will be used later. This article will go into the following subjects:

Modules

Routing

Setup of Ngx-Translate in the Bootstrap Component

A Listview

I'll demonstrate how to extend an Angular-CLI generated App to support Translation, 2 Routes, and a Listview. The generated parts from Angular-CLI are excluded because they are documented by Angular and Angular-CLI, and consist of common technologies. This article tries to provide a deeper introduction to Angular 2 with some basic integrated features.

Application Setup

The Application Setup can be found in the app.module.ts file. The Application registers its main components, its modules (used application parts or features), the providers (services) and the bootstrap component to start.

Line 12 defines the Class CrlistComponent that implements the interfaces OnInit, OnDestroy.

Line 13 defines the tableRows member Array that is displayed in the template.

Lines 15-16 define the Subscriptions of the Route Params and the Service.

Line 18 is the constructor that gets the parameters/members injected by Angular that are annotated as injectable.

Line 20 sets up the ngOnInit() method that gets called after the creation of the Component.

Line 21 subscribes to the Route Params with an Observable. The Observable puts the Parameters in the params variable.

Line 22 gets the Route Parameter 'mnr'.

Line 23 calls the CrRestservice with the 'mnr' Route Parameter and subscribes to its result. The result is the tr Array the gets set in the tableRows member. In the case of an Error, the error variable gets set.

Lines 27-30 set up ngOnDestroy so it's called before a Components is discarded and unsubscribes the subscriptions of the Component. That is in these cases not really necessary but can serve as an example for subscriptions to changing input values.

If the Observable is not put in a member it could be written:

this.service.getCrDetail(mnr, jahr).subscribe(...);

After the call, everything is cleaned up.

The Template of the ListView

The Template crlist.component.html of the ListView shows how the values of the list a displayed with translated headings. The English Translations are in the en.json file.

Line 8 is an example of the translated header with '{{'key' | translate}}' Ngx-Translate Pipe Syntax. The en.json File has the JSON key-value pairs for the translation.

Line 20 has the for loop over the tableRows Component Member.

Line 21 shows a routerLink that provides a link to the DetailView with the Url concatenated of the parameters '/crdetail/mietenr', mietNr, 'jahr' and jahr. An example Url could look like: '/crdetail/mietenr/1/jahr/2015'. The Link String is defined by '{{row.jahr}}' that displays the jahr value of the row.

Line 29 shows the Date Pipe that formats the date according to the 'dd.MM.yyyy' format string.

Conclusion

For Developers with a Java background, the Syntax and the Concepts should look familiar. The strict typing, classes, and interfaces of Typescript that enable Ide support and compile checks. The Annotations for Configuration, the Module System, and the Observables are available in RxJava and can be learned in a familiar environment. The templates will look familiar to Java EE Developers. It is not the same, but it's very similar. You have to learn Typescript and Angular 2, but you can reuse a lot of your Java EE skills.

Upcoming

This is the end of the first part of the description of the Angular UI of the Angular2AndJavaEE Project. In the next UI Part the Service, its Types, the Detailview, its Validations and 2 Tests are shown.

Angular2AndJavaEE now has a Project Diary that shows the current state of the Project and the planned features of the future.

Explore data-driven apps with less coding and query writing, brought to you in partnership with Qlik.