Connecting your Angular 2 App to your Java EE Backend

You’ve been developing in Java EE all this time, but you’re tired of using JSF, or perhaps even Struts, and want to move to something more modern for your front end? Angular 2 is a perfect fit, and with the recent release of Angular 2 GA, now is the ideal time to make the move! Besides being easier to develop and maintain, an Angular 2 application allows you to take advantage of the huge improvements in browser technology over the last few years, and all the goodness that the modern web brings.

This guide walks you through a few of the modifications you’ll need to make to your back-end Java EE application, and how we can access this back end from your Angular 2 application.

Broad Strokes

We will be working with two separate applications, a Java EE back-end app, and an Angular 2 front-end app, avoiding a mixing of concerns in a single project. Source for both projects is provided, so in this article we display and highlight source only for key concepts – you can download the projects to look at more detail, or run them locally.

Key technologies:

• JPA: Our sample Java EE application uses JPA to access data from a database.
• REST: We expose the table data via REST web services using Jersey – the reference implementation for the JAX-RS spec.
• RxJS: Our Angular 2 app uses RxJS to communicate with the web services.

On a remote dev team? Try CodeTogether—it’s free!

• Live share IDEs & coding sessions
• See changes in real time
• Cross-IDE support for VS Code, IntelliJ & Eclipse
• Guests join from Browser or IDE
• End-to-end source encryption
• www.codetogether.com

JPA

Our sample back-end application, SWBackend, uses JPA with EclipseLink as a provider, and uses an embedded Derby database. We’re initializing this database with some character information from Star Wars, so you don’t need to bother with setting up sample data for testing.

We won’t delve into the JPA aspects here, but you could also follow along with your own Java EE back-end application.

RESTifying Your Java EE Application

Dependencies

We need to add Jersey and supporting libraries to your project – these will enable the serialization of your data and the ability to expose it using REST web services.

If you are following along in MyEclipse 2017, simply bring up the context menu on your project and select Project >Configure Facets… > Install JAX-RS Facet and proceed to select version 2.0 of JAX-RS. On the next page of the wizard, ensure you select Moxy and the Server libraries too.

If you are using Maven, this doc covers the dependencies you will need to add for different use cases. Primarily though, we will need: org.glassfish.jersey.core/jersey-client org.glassfish.jersey.core/jersey-server org.glassfish.jersey.containers/jersey-container-servlet org.glassfish.jersey.media/jersey-media-moxy

If you are not using Maven, you can download the Jersey JAX-RS 2.0 RI bundle and add all the JAR files contained within to your application’s classpath.

Source

Web Deployment Descriptor (web.xml)

We’re going to modify the web.xml file to declare a Jersey servlet and a corresponding URL mapping, as well as a CORS filter. Add the following to web.xml:

<servlet>
    <servlet-name>JAX-RS Servlet</servlet-name>
    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
    <init-param>
      <param-name>jersey.config.server.provider.packages</param-name>
          <param-value>com.example.rest</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
  </servlet>
  <servlet-mapping>
    <servlet-name>JAX-RS Servlet</servlet-name>
    <url-pattern>/jaxrs/*</url-pattern>
  </servlet-mapping>
  <filter>
        <filter-name>CorsFilter</filter-name>
        <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
        <init-param>
            <param-name>cors.allowed.origins</param-name>
            <param-value>*</param-value>
        </init-param>
        <init-param>
            <param-name>cors.allowed.methods</param-name>
            <param-value>GET,POST,HEAD,OPTIONS,PUT</param-value>
        </init-param>
    </filter>
    <filter-mapping>
        <filter-name>CorsFilter</filter-name>
        <url-pattern>/*</url-pattern>
  </filter-mapping>

Notes:

• url-pattern: “/jaxrs/*”, will root our web services at the /jaxrs path
• CorsFilter
  • Depending on how and where you deploy your back-end application, and what server you use, you will most likely need a variation of these settings to allow your front-end Angular application to access the services exposed by the back end. Essentially, if your client application is running on a different domain, modern browsers will restrict the call made to the domain running your back end, unless the headers in the back end indicate that this call is permitted. For more, read: HTTP access control (CORS)
  • The filter provided here is specific to the Apache Tomcat server; for other servers, you will need to enable CORS differently. Note that our cors.allowed.origins parameter is excessively open, so, please, use a more restrictive pattern for your production application.

JPA Classes

Person source:

package com.genuitec.webclipse.example;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.Id;
import javax.persistence.Table;
import javax.xml.bind.annotation.XmlRootElement;

/**
 * Person entity. @author MyEclipse Persistence Tools
 */
@XmlRootElement
@Entity
@Table(name = "PERSON", schema = "STARWARS")
public class Person implements java.io.Serializable {
	// Fields

	private static final long serialVersionUID = 1L;
	private Integer id;
	private String name;
	private String gender;
	private String skincolor;
	private String haircolor;
	private String eyecolor;
	private String birthyear;
	private Integer height;
	private Integer mass;

	// Constructors

	/** default constructor */
	public Person() {
	}

	/** minimal constructor */
	public Person(Integer id) {
		this.id = id;
	}

	/** full constructor */
	public Person(Integer id, String name,
			String gender, String skincolor, String haircolor,
			String eyecolor, String birthyear,
			Integer height, Integer mass) {
		this.id = id;
		this.name = name;
		this.gender = gender;
		this.skincolor = skincolor;
		this.haircolor = haircolor;
		this.eyecolor = eyecolor;
		this.birthyear = birthyear;
		this.height = height;
		this.mass = mass;
	}

	// Property accessors
	@Id
	@Column(name = "ID")
	public Integer getId() {
		return this.id;
	}

	public void setId(Integer id) {
		this.id = id;
	}

	@Column(name = "NAME", length = 50)
	public String getName() {
		return this.name;
	}

	public void setName(String name) {
		this.name = name;
	}

	@Column(name = "GENDER", length = 20)
	public String getGender() {
		return this.gender;
	}

	public void setGender(String gender) {
		this.gender = gender;
	}

	@Column(name = "SKINCOLOR", length = 30)
	public String getSkincolor() {
		return this.skincolor;
	}

	public void setSkincolor(String skincolor) {
		this.skincolor = skincolor;
	}

	@Column(name = "HAIRCOLOR", length = 30)
	public String getHaircolor() {
		return this.haircolor;
	}

	public void setHaircolor(String haircolor) {
		this.haircolor = haircolor;
	}

	@Column(name = "EYECOLOR", length = 30)
	public String getEyecolor() {
		return this.eyecolor;
	}

	public void setEyecolor(String eyecolor) {
		this.eyecolor = eyecolor;
	}

	@Column(name = "BIRTHYEAR", length = 20)
	public String getBirthyear() {
		return this.birthyear;
	}

	public void setBirthyear(String birthyear) {
		this.birthyear = birthyear;
	}

	@Column(name = "HEIGHT")
	public Integer getHeight() {
		return this.height;
	}

	public void setHeight(Integer height) {
		this.height = height;
	}

	@Column(name = "MASS")
	public Integer getMass() {
		return this.mass;
	}

	public void setMass(Integer mass) {
		this.mass = mass;
	}

}

PersonFacadeREST source:

package com.genuitec.webclipse.example.rest;

import java.util.List;

import javax.persistence.EntityManager;
import javax.ws.rs.Consumes;
import javax.ws.rs.DELETE;
import javax.ws.rs.GET;
import javax.ws.rs.PUT;
import javax.ws.rs.Path;
import javax.ws.rs.PathParam;
import javax.ws.rs.Produces;
import javax.ws.rs.core.MediaType;
import javax.ws.rs.core.Response;
import javax.ws.rs.core.Response.Status;

import com.genuitec.webclipse.example.EntityManagerHelper;
import com.genuitec.webclipse.example.Person;

/**
 * @author MyEclipse Web Service Tools
 */
@javax.inject.Singleton
@Path("Person")
public class PersonFacadeREST extends AbstractFacade<Person> {

	private EntityManager em;

	public PersonFacadeREST() {
		super(Person.class);
	}	

	@PUT
	@Override
	@Consumes({ "application/xml", "application/json" })
	public Response edit(Person entity) {
		if (entity.getName().length() <= 3) {
			return Response.status(Status.CONFLICT).entity("Customer name is too short").type(MediaType.TEXT_PLAIN).build();
		}
		return super.edit(entity);
	}

	@DELETE
	@Path("remove/{id}")
	public Response remove(@PathParam("id") Integer id) {
		return super.remove(super.find(id));
	}

	@GET
	@Path("{id}")
	@Produces({ "application/json" })
	public Person find(@PathParam("id") Integer id) {
		return super.find(id);
	}

	@GET
	@Override
	@Produces({ "application/json" })
	public List<Person> findAll() {
		return super.findAll();
	}

	@GET
	@Path("{from}/{to}")
	@Produces({ "application/xml", "application/json" })
	public List<Person> findRange(@PathParam("from") Integer from,
			@PathParam("to") Integer to) {
		return super.findRange(new int[] { from, to });
	}

	@GET
	@Path("count")
	@Produces("text/plain")
	public String countREST() {
		return String.valueOf(super.count());
	}

	@Override
	protected EntityManager getEntityManager() {
		em = EntityManagerHelper.getEntityManager();
		return em;
	}
}

@GET
@Override
@Produces({ "application/json" })
public List<Person> findAll() {
return super.findAll();
}

@GET
@Path("{id}")
@Produces({ "application/xml", "application/json" })
public Person find(@PathParam("id") Integer id) {
return super.find(id);
}

@PUT
@Override
@Consumes({ "application/xml", "application/json" })
public Response edit(Person entity) {
if (entity.getName().length() <= 3) {
return Response.status(Status.CONFLICT).entity("Name is too short").type(MediaType.TEXT_PLAIN).build();
}
return super.edit(entity);
}

Building the Angular 2 Application

Create the Project

Create the Person Interface

Person.ts source:

export interface Person {
  id: number;
  name: string;
  gender: string;
  skincolor: string;
  haircolor: string;
  eyecolor: string;
  height: number;
  mass: number;
  birthyear: string;
}

Create the Person Service

Person.service.ts source:

import { Injectable } from '@angular/core';
import { Http, Response, Headers } from '@angular/http';
import { Observable } from 'rxjs/Observable';
import { Person } from './person';
import 'rxjs/add/operator/map';

@Injectable()
export class PersonService {
  private baseUrl: string = 'http://localhost:8080/SWBackend/jaxrs';

  constructor(private http: Http) {
  }

  get(id: number): Observable<Person> {
    let person$ = this.http
      .get(`${this.baseUrl}/Person/${id}`, {headers: this.getHeaders()})
      .map(mapPerson);
      return person$;
  }

  getAll(): Observable<Person[]> {
     let person$ = this.http
      .get(`${this.baseUrl}/Person`, {headers: this.getHeaders()})
      .map(mapPersons);
    return person$;
  }

  save(person: Person): Observable<Response> {
    console.log('Saving person ' + JSON.stringify(person));
    return this.http.put(`${this.baseUrl}/Person`, JSON.stringify(person), {headers: this.getHeaders()});
  }

  private getHeaders() {
    let headers = new Headers();
    headers.append('Accept', 'application/json');
    headers.append('Content-Type', 'application/json');
    return headers;
  }
}

function mapPersons(response: Response): Person[] {
  return response.json().map(toPerson);
}

function mapPerson(response: Response): Person {
  return toPerson(response.json());
}

function toPerson(r: any): Person {
  return r;
}

Working with Components

Create the Person List Component

Personlist.component.ts source:

import { Component, OnInit } from '@angular/core';
import { PersonService } from './person.service';
import { Person } from './person';


@Component({
  selector: 'app-personlist',
  templateUrl: './personlist.component.html',
  styles: []
})

export class PersonlistComponent implements OnInit {
  people: Person[] = [];

  constructor(private personService: PersonService) { }

  ngOnInit() {
    this.personService.getAll().subscribe(p => this.people = p);
  }

}

Personlist.component.html source:

<section *ngIf="people" class = "panel-body">
	<table class = "table-striped table-bordered table-hover table-condensed">
		<tr *ngFor="let person of people">
			<td><a href="#" [routerLink]="['/person', person.id]">
					{{person.name}} </a>&nbsp;&nbsp;</td>
			<td><a href="#" [routerLink]="['/person/edit', person.id]">
				Edit </a></td>
	</table>
</section>

Create the Person Edit Component

Personedit.component.ts source:

import { Component, OnInit, OnDestroy } from '@angular/core';

import { Person } from './person';
import { PersonService } from './person.service';
import { ActivatedRoute, Router } from '@angular/router';


@Component({
  selector: 'app-personedit',
  templateUrl: './personedit.component.html',
  styles: []
})
export class PersoneditComponent implements OnInit, OnDestroy {
  person: Person;
  sub: any;
  errorMessage: string = '';
  response: any;


  constructor(private personService: PersonService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      let id = Number.parseInt(params['id']);
      console.log('getting person with id: ' + id);
      this.personService
        .get(id)
        .subscribe(p => this.person = p);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  savePersonDetails() {
    this.personService.save(this.person).subscribe(p => this.response = p,
                                                        e => this.errorMessage = e._body,
                                                        () => this.router.navigate(['/person/', this.person.id]));
  }
}

Personedit.component.html source:

<section *ngIf="person" class = "panel">
	<form (ngSubmit)="savePersonDetails()" #personForm="ngForm" class="panel-body">
		<div class="input-group">
			<span class="input-group-addon">Name</span> 
			<input type="text" class = "form-control" name="personname" required [(ngModel)]="person.name" #personname="ngModel">
		</div>
		<div [hidden]="personname.valid || personname.pristine" class="error">
    		Name cannot be empty.
		</div>		
		<br/>
		<div class="input-group">
		  <span class="input-group-addon">Credit limit</span>
  			<input type="number" class ="form-control" name="creditlimit" required [(ngModel)]="person.height">
		</div>
		<br/>
		<button type="submit" [disabled]="!personForm.form.valid" class = "btn">Save</button>
	</form>
</section>
<section *ngIf="errorMessage" class = "error">{{errorMessage}}</section>

Create the Person Details Component

Persondetails.component.ts source:

import { Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { Person } from './person';
import { PersonService } from './person.service';

@Component({
  selector: 'app-persondetail',
  templateUrl: './persondetail.component.html',
  styles: []
})
export class PersondetailComponent implements OnInit, OnDestroy {
  person: Person;
  sub: any;

  constructor(private personService: PersonService,
    private route: ActivatedRoute,
    private router: Router) { }

  ngOnInit() {
    this.sub = this.route.params.subscribe(params => {
      let id = Number.parseInt(params['id']);
      this.personService
        .get(id)
        .subscribe(p => this.person = p);
    });
  }

  ngOnDestroy() {
    this.sub.unsubscribe();
  }

  gotoEdit() {
    this.router.navigate(['/person/edit', this.person.id]);
  }

}

Persondetails.component.html source:

<section *ngIf="person" class = "panel">
	<form (ngSubmit)="savePersonDetails()" #personForm="ngForm" class="panel-body">
		<div class="input-group">
			<span class="input-group-addon">Name</span> 
			<input type="text" class = "form-control" name="personname" required [(ngModel)]="person.name" #personname="ngModel">
		</div>
		<div [hidden]="personname.valid || personname.pristine" class="error">
    		Name cannot be empty.
		</div>		
		<br/>
		<div class="input-group">
		  <span class="input-group-addon">Credit limit</span>
  			<input type="number" class ="form-control" name="creditlimit" required [(ngModel)]="person.height">
		</div>
		<br/>
		<button type="submit" [disabled]="!personForm.form.valid" class = "btn">Save</button>
	</form>
</section>
<section *ngIf="errorMessage" class = "error">{{errorMessage}}</section>

Setting up Routes

App.routes.ts source:

import { Routes, RouterModule }  from '@angular/router';
import { PersonlistComponent } from './person/personlist.component';
import { PersondetailComponent } from './person/persondetail.component';
import { PersoneditComponent } from './person/personedit.component';


// Route config let's you map routes to components
const routes: Routes = [
  // map '/persons' to the people list component
  {
    path: 'people',
    component: PersonlistComponent
  },
  // map '/persons/:id' to person details component
  {
    path: 'person/:id',
    component: PersondetailComponent
  },
  {
    path: 'person/edit/:id',
    component: PersoneditComponent
  },

  // map '/' to '/persons' as our default route
  {
    path: '',
    redirectTo: '/people',
    pathMatch: 'full'
  },
];

export const routing = RouterModule.forRoot(routes);

App.module.ts source:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { routing } from './app.routes';

import { AppComponent } from './app.component';
import { PersonService } from './person/person.service';
import { PersonlistComponent } from './person/personlist.component';
import { PersondetailComponent } from './person/persondetail.component';
import { PersoneditComponent } from './person/personedit.component';

@NgModule({
  declarations: [
    AppComponent,
    PersonlistComponent,
    PersondetailComponent,
    PersoneditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    routing
  ],
  providers: [PersonService],
  bootstrap: [AppComponent]
})
export class AppModule { }

Running Your Application

Deploy the back-end application

Deploy the front-end application

Final Thoughts

Attached Projects

References

• Angular Architecture Overview
• Angular Routing & Navigation
• RxJS – Observables
• Getting Started With Angular 2 Step by Step
• The Star Wars API