| id | title | date | author | layout | guid | permalink | dsq_thread_id | dsq_needs_sync | main-class | color | categories | tags | |||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
559 |
The Spring Boot, AngularJS 2, TypeScript: Hello World Tutorial is now Java and Angular 5 |
2016-02-23 22:53:57 +0000 |
Marco Molteni |
post |
/2016/02/23/spring-boot-angularjs-2-typescript-hello-world-tutorial/ |
|
|
spring |
#7AAB13 |
|
|
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:
- show the integration between Spring and Angular
- build a 'one-click' pipeline from the development to the deploy
- collect the best practices for the development in the enterprise
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 (everything has been integrated in this demo):
molteni.io javademo.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.
-
REST communication between Java Backend and TypeScript Frontend
-
Microservice oriented architecture, easy installation and deploy
-
The latest and greatest from Java EE and Spring
-
Webpack for an optimised deploy (size, packaging, compression)
-
Automatic refresh in the development phase
-
Docker deploy of the application (pull and run) Please leave a feedback here or on GitHub. Any sign from you is a stimulus to improve the demos.
-
- *Here the old article. New articles will follow. Here some examples of the interface:
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
In the example application (
http://angular.cafe/app-hello-world) there is a very simple example of communication between the frontend and the backend. 
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;
}
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.
If you want to develop with this Stack (Angular with Java) you have to understand some critical points of the stack:
- WebPack : it packages and manages the static resources of the frontend
- Observable and Promises: the calls done by the frontend to the backend are managed by observables or promises.
- Security : when you have an application that run in production every request has to be authenticated and (in theory) you should not use sessions.
If you have questions, don’t hesitate 🙂 It’s funny to find solutions to common problems.