Connect Angular with Spring Boot

Posted By : Ritik Jain | 30-Aug-2019
javascript Angular2 Java

Connect angular2+ with spring boot and  request or response exchange process

For this, you must have little knowledge of spring-boot API making. But I will cover all concept of angular2+ and also tell you about how to send a request through @RequestParams and @RequestBody from angular2+.

Setup Angular2+

You're going to need a couple of things before proceeding:

  • Node.js
  • Node Package Manager (NPM)

To check whether or not you have both of these installed, visiting your command line or console and type:

$ node -v
$ npm -v

If nodejs is not installed then go to Nodejs.org and download/install it.

We are going to install angular5 with the help of npm.

$ npm install @angular/cli -g
$ ng -v
$ ng new my-new-project --style=scss --routing
$ cd my-new-project
$ ng serve

Now angular5 is ready to work. Let start with integration part.

Go in app.component.ts

 

import {AppService} from './app.service';
export class AppComponent {
constructor(private appService:AppService) {
}
arrayOfTags: Array<String> = [];
getAllTags(){
this.appService.getAllTags().subscribe((response)=>{
this.arrayOfTags = response.data.tagsList;
},(errorRes) => {
})
}
}
 

Now go in app.service.ts

 
import { Injectable } from '@angular/core';
@Injectable()
export class AppService {
constructor(private http: HttpClient) {
}
getAllTags(): Observable<any> {
return this.http.get<any>('http://localhost:8080/tags');
}
}
 
"http://localhost:8080" port where our spring boot application running and /tags is the API created in sprint-boot.
 
Spring boot /tags API code is given below-:
@GetMapping("/tags")
	public ResponseEntity<Object> getTags(){
		Map<String ,Object> response = blogService.getTags(accessToken);
		return ResponseHandler.generateResponse(HttpStatus.OK, true, "Tag list", response);
	}
Send a request using RequestParams.
 
import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
@Injectable()
export class BlogService {
constructor(private http: HttpClient) {
}
getEditBlogDetails(id): Observable<any> {
let params =new HttpParams();
params=params.append("id",id);
return this.http.get<any>('http://localhost:8080/getBlogDetails',{params:params});
}
}
 
 
Send a request using RequestBody.
 
submitBlog(title,body):Observable<any>{
return this.http.post<any>('http://localhost:8080/submitBlog',{title:title,body:body});
}
 
Looking for an app developer for mobile app development using Angular Js platform click this link. 
 
 
Related Tags
cloud computing
saas
PWA
Web Apps
Java
Angular
nodejs
php
vue.js
Spring boot
mysql
ReactJS
Django
plugin
angularjs
Angular2
bootstrap
html
Laravel
html5
jquery
grails
Java Virtual Machine
LMS
Mean stack
Moodle
oops
Shopify
reverseajax
Knockoutjs
ngrok
Meteor

About Author

Author Image
Ritik Jain

Ritik is an accomplished Backend Developer with extensive experience in Mean. He is proficient in Core Java, Spring-Boot, Hibernate, Node.js, Angular 2+, and various relational databases like MySQL and MongoDB. With his expertise in API implementations, webservices, development testing, and deployments, he has contributed to the successful completion of various client projects. Apart from his professional pursuits, Ritik is an enthusiastic gamer and keeps himself updated with the latest advancements in technology.

Request for Proposal

Name is required

Comment is required

Sending message..