How to connect Java spring application with Angular 4 application - spring

I made a Spring rest application and Angular 4 application and I want to use Spring rest Api's in my Angular 4 application. Simple CRUD application. which could be the best format of communication between these application

You can take a look at this Spring Guide.
It is for AngularJS, but the server side code is absolutely the same in case of Angular 2,3,4 as well.

If possible try not to club angular and spring-boot together, sure you can do this using webjars or similar libraries, but try not doing it. Spin off the angular app as a separate application (you can serve this Angular app either using nginx or nodeJs) and then route all the API calls through the Angular App to your Spring boot application. Now your spring boot application will be just a ( micro ) service which will have to deal only with the data, not the presentation (markup / style etc).

Related

Create a web application using Spring framework for back-end but without using Spring MVC.s

I want to learn the Spring Framework and therefore I decided to make a web application using it, but I don't want to use Spring MVC as it still uses JSP. What all projects from Spring can be used if I want to have a UI which can be made using React / Angular and the backend is managed by Spring.
You have to use REST API, and pass data to front-end JS framework via JSON.
Look here: https://spring.io/guides/gs/rest-service/
Start with creating a simple Rest Controller with Spring Boot.
Then you have to choose your JavaScript framework (jQuery, Angular, React),
and make a HTTP request to URL typed in your #RestController.
You can achieve this by using AJAX method from your JS framework.
Try this,it will speed up your development
Restful Web Service with Spring Boot
by the way,if you want to use Angular/React+Spring Boot you can use JHipster, this tool will just do the basic setup for your Angular/React+Spring Boot application in couple of minutes,the website has a clear video tutorial you can use it will only take about 15 min approx
Jhipster

How enable Angular Universal with a Java/Spring backend?

I have an app, where backend implements on Spring using Spring Boot and front-end side use Angular2. Can somebody help me and explain how to integrate Universal using Java becken. Or show me a good example how I can do that.
how to integrate Universal using Java beckend?
You cannot do that directly as universal needs a different server side technology -nodejs
But you have a another (better) solution
Spin off a separate nodejs app for the angular and universal then route all the API calls through the nodeJs to your Spring boot application. Now your spring boot application will be just a (micro)service which will only deal with the data, not the presentation (markup/style etc)

Plain Servlet vs Spring MVC

I have to create a web application, I need to use my back-end code for mobile apps also.
I know Servlet, I thought of doing this application with "REST API" + HIBERNATE for server side and Javascript(Angular JS ) in UI.
Some of my colleagues suggest to do this with Spring. I don't know anything about Spring. While reading about Spring I came to know that back-end logic and UI code can be in same place. It seems it is tightly coupled with back-end and front-end.
Some times back Jquery is more preferable JS framework but now everyone suggests Angular JS. This will be changed after some times. But logic I am going to write in back-end will be the same.
How can I choose the correct one?
I suggest to use:
Spring web MVC for backend https://spring.io/guides/gs/serving-web-content/, maybe with Spring Boot, and Hibernate for DAO layer. Here you can find a helpful example (without Spring Boot): http://websystique.com/springmvc/spring-mvc-4-and-spring-security-4-integration-example/
and for frontend certainly Angular 2, with TypeScript, instead of Angular js, and here reach the REST service exposed by backend.
These days it is easy to build a REST based back end with no libraries at all if you deploy to a Java EE 6/7 server such as WildFly, TomEE or Payara (amongst others).
You get JAX-RS and JSON-P (for rest), JPA for persistence, web sockets, asynchronous processing, transaction management and the rest of the Java EE stack for free.
Try a google search for Java EE thin war - there's lots of examples about

Angular2 application with springboot using maven

I am new to Springframework. I created a Springboot application and expose rest services. Now I want to consume my rest services in angular2. I am not sure how to create folder structure for my application. Should I create angular2 app in src/main/resources folder using angular cli? or as I am exposing rest services so should I create a separate angular project and consume the services? But if user this approach it will run on two different ports on localhost and I get CrosOrigin error.
In production I will deploy the application on same server. It will be a one website.
One more point I am using Maven and STS tool suit to create springboot application.
For a Spring-Boot novice using AngularJS you might be checking out JHipster (which actually is a combination of these two projects), which might serve you with some best practices.
Currently based on AngularJS 1 - it's not Angular2 yet - however they're busy porting it to version 2 (see progress, see this branch).
Alternatively there's also a guide on how to create a standalone Spring-Boot application with AngularJS (1).
I find some sample code but even in Springboot application you have to run spring and angular application on two different ports on local host. So the best way to solve the problem is to create two application expose services in spring boot and use in angular client side. While running on local use enable CORS.
Another way is to use JHipster. They recently release JHipster 4 which support angular 2.

Angular 2, Spring boot , spring security , login form

I have a Front end application that runs on http:// localhost:4200, with angular 2 (I've used angular-cli for generating the project).
The application runs without any problems (I can get and post info from/to database using Angular 2 Http service:
getList () {
return this._http.get("http:// localhost:8080/").map(res => res.json());
}
On the other hand, I have a Back end application running with spring boot on http:// localhost:8080/ (note the ports), that provide a REST Api for my angular 2 application.
Sending requests from http://localhost:4200/ to http://localhost:8080/ works as expected.
Before I've programmed an application with spring framework & angularJS 1, spring security took care of login and security in the same app (maven project).
Now I have two separate applications that are communicating via http (RESTful Api with spring boot , and front end Api with angular 2)
How can I set my login form and where to put it, and how to configure spring security with my angular 2 application?
When you spin up the Angular Application with Angular CLI, your Angular Pages are served by NodeJs in the backend.
You have a couple of options here.
The login can be handled at NodeJS server which can in turn invoke
Spring Boot application to Authenticate and Authorize.(I think, you might need to do some tweaks like using express server instead of lite server. take a look here https://stackoverflow.com/a/37561973/6785908)
After initial development, you can copy over your AngularJS
resources to a Spring MVC (Spring Boot) server and use it to serve
your pages (as well as the rest APIs), just as you were doing
before.
Make the Angular App invoke the spring boot Service (I guess , you
are using the $http.post to submit the form, if that's the case you
can just change the URL so that it can hit spring boot app instead.)
For the production deployment, use nginx/httpd to serve the static
files (AngularJS/CSS etc) and route/proxy all the dynamic request to
the spring boot app.
I would strongly suggest the 3rd option.

Resources