Update Aug. 07, 2017

A lot changed from the first publication of the article (new versions of Angular).

I’m creating a new demo using Spring Boot, Angular (currently v. 5 beta) and Material Design. The demo is more than a simple hello world and will collect the best practices for an enterprise development.

The goals are the following:

The project is more ambitious than a simple hello world and will require a bit of time to be developed in the free time.

You can find a first demo here: molteni.io

The code is here: https://github.com/marco76/spriNGdemo

There is a Jenkins job that build the project here: http://springdemo.io:8081/job/spring-demo-pipeline/

A quality analysis with SonarQube: SonarQube

And a Docker deploy: molteni.io

The Java EE Demo will be updated in the future. The springdemo.io won’t be updated and will be replaced by the current molteni.io.

Update Apr. 11, 2017 Spring Boot 2.0 Angular Demo *I update the Spring Demo. The new demo uses Spring Boot 2.0 (beta) and Angular 4. Website: http://springdemo.io GitHub: https://github.com/marco76/spriNGdemo The old Spring example is here : http://angular.cafe , GitHub *Java EE Angular Demo Because Java has a rich and wonderful community there is a similar demo for Java EE You can find the Angular 4 and Java EE demo here: http://javademo.io Post: http://javaee.ch/2017/04/06/java-angular-demo/ GitHub: https://github.com/marco76/java-demo

Goal of the demo Java is a perfect technology for the modern development in few lines of code you can build rock solid backends. The demo is a showcase of how to integrate many features of Java EE and Spring in your next JavaScript application. The two demos

are updated regularly and I will try to show the new features of Spring and Java EE.


Deployment architecture


For the development there are 2 servers deployed: Webpack serves the Angular interface, Spring boot handles the backend requests. The Webpack server automatically redeploys the pages during your development. Commands:

mvn clean package java -jar [PARENT_MODULE]/server/target/server-0.14-SNAPSHOT.war cd [PARENT_MODULE]/webClient/src npm start

go to http://localhost:8080


In the production mode one Java WAR (Tomcat embedded) containing the javascript pages and the backend is created. This WAR can be deployed with a java -jar command. Thanks to WebPack the JavaScript code is optimized. Commands:

mvn clean package java -jar [PARENT_MODULE]/server/target/server-0.14-SNAPSHOT.war

open your browser and visit http://localhost:8082

Hello World Example

In the example application (

http://angular.cafe/app-hello-world) there is a very simple example of communication between the frontend and the backend. The frontend calls the backend service and ‘subscribes’ the answer. The frontend waits backend answer before to execute the code in the subscription part: Code on GitHub: https://github.com/marco76/SpringAngular2TypeScript/tree/master/webClient/src/app/hello-world The Controller

export class HelloWorld {
    // string to publish on the screen
     helloWorldJava : string;
     constructor(helloWorldService : HelloWorldService){ 
    // subscribe to the service response, we are using Observable
    helloWorldService.getHelloWorldFromJava().subscribe((data : JsonString){ 
    // we receive a json object, we have to extract the string
     this.helloWorldJava = data.content;

The Service called by the Controller:

// this url is declared in the HelloWorldController.java
  private helloUrl = this.ConstantsService.BACKEND\_URL + HELLO_WORLD_API;
// return an observable and not a Promise
  getHelloWorldFromJava() : Observable<JsonString> {
      console.log('calling : ' + this.helloUrl);
     Observable.map((response: Response)<>
     { return response.json(); }) }

The backend called by the Service:

@RequestMapping(value = "/rest/hello-world", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
Map<String, String; sayHello() { String helloWorld = helloWorldService.getHelloWorld();
// we want to return a JSON object so we have to convert our String to a JSON key/value compatible format
Map<String, String> jsonMap = new HashMap<>();
// {"content" : "Hello World"}
jsonMap.put("content", helloWorld);
return jsonMap;

Other examples

On the example online you can find other examples (list, forms, …) and links to other articles. The code deployed is the code that you find in GitHub. The code is deployed using Docker in an AWS instance.

Very important

If you want to develop with this Stack (Angular with Java) you have to understand some critical points of the stack:


If you have questions, don’t hesitate 🙂 It’s funny to find solutions to common problems.