let us build a simple application how to integrate angular application with spring boot application.
Here is the technology used for this application.
Java 1.8 + Spring Boot (Back-end)
Angular 8 + Node.js (Front-end)
Spring Tool Suite (IDE)
Visual Studio(IDE)
Angular Component
The page you see is the application shell. The shell is controlled by an Angular component named AppComponent.
Components are the fundamental building blocks of Angular applications. They display data on the screen, listen for user input, and take action based on that input.
Make changes to the application
Open the project in your favorite editor or IDE and navigate to the src/app folder to make some changes to the starter app.
app.component.html
the component template, written in HTML.
<h3>Welcome in Angular with Spring Boot</h3>
<button (click)="clickFunction()">Hello</button>
app.component.ts
the component class code, written in TypeScript.
import { Component } from '@angular/core';
import { AngularServiceService } from './angular-service.service';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'program1';
constructor(public service:AngularServiceService){
}
clickFunction(){
console.log("button is working ");
this.service.javaCall();
}
}
app.module.ts
the main parent component app.module.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { HttpClientModule } from '@angular/common/http';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
AppRoutingModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
angular-service.service.ts
Services are a great way to share information among classes that don't know each other.
In Angular, we might have scenarios where some code needs to be reused in multiple components. For example, a data connection that fetches data from a database might be needed in multiple components. This is achieved using services.
This service will have the httpClient and will be responsible for calling HTTP GET requests to the backend Spring Boot application. In Angular, a service is written for any cross-cutting concerns and may be used by more than one components.
import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class AngularServiceService {
constructor(private http: HttpClient) { }
javaCall(){
console.log(" services is working fine.......");
this.http.get('http://localhost:8082/hello').subscribe(
data=>{
console.log("sucess result");
}
);
}
}
Integrate Spring Boot Application
We will be creating a simple Spring Boot Application.
Spring Boot default you can use to develop the application. Spring Boot provides many of them. The defaults contain the configuration that otherwise you would have needed to set up manually. For example, Tomcat is a widely used web container. By default, a Spring Boot web application uses an embedded Tomcat container.
Right-click in the package explorer and select New -> Spring Starter Project as below.
Before the introduction of Spring Boot, we have to add all these dependencies on our own and considering compatibility between different jar versions, it was really chaotic thing, but now we need not worry about it. Spring Boot takes care of all necessary dependencies. We just need to tell Spring Boot only at a high level that which kind of dependencies we want to add, just like in this case we told spring boot about adding Web dependencies and Spring Boot will add all web related dependencies along with other core dependencies.
Following is how pom.xml of this project looks like :
<?xml version="1.0" encoding="UTF-8"?>
<project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://maven.apache.org/POM/4.0.0 https://maven.apache.org/xsd/maven-4.0.0.xsd">
<modelVersion>4.0.0</modelVersion>
<parent>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-parent</artifactId>
<version>2.3.4.RELEASE</version>
<relativePath/> <!-- lookup parent from repository -->
</parent>
<groupId>com.example</groupId>
<artifactId>program1</artifactId>
<version>0.0.1-SNAPSHOT</version>
<name>program1</name>
<description>Demo project for Spring Boot</description>
<properties>
<java.version>1.8</java.version>
</properties>
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-test</artifactId>
<scope>test</scope>
<exclusions>
<exclusion>
<groupId>org.junit.vintage</groupId>
<artifactId>junit-vintage-engine</artifactId>
</exclusion>
</exclusions>
</dependency>
</dependencies>
<build>
<plugins>
<plugin>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-maven-plugin</artifactId>
</plugin>
</plugins>
</build>
</project>Program1Application.java
Also, Spring Boot has added the following class, which acts as a starting point for the Spring Boot Application
package com.example;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
@CrossOrigin
@Controller
@SpringBootApplication
public class Program1Application {
@RequestMapping("/hello")
@ResponseBody
void home() {
System.out.println("call by angular");
}
public static void main(String[] args) {
SpringApplication.run(Program1Application.class, args);
}
}– The @SpringBootApplication annotation used at the class level above is basically equivalent to combined following three annotations :
@Configuration
@EnableAutoConfiguration
@ComponentScan
– From the main method of SpringToolSuiteProjectApplication, SpringApplication class’s run method is called. This method makes sure that Spring application’s applicationContext(the Spring Container) is initialized. Spring boot uses AnnotationConfigApplicationContext.
Run the Spring boot Application
Run the main method of SpringToolSuiteProject Application and you will notice that jar is automatically deployed to embedded Tomcat server and Tomcat server has been started at port 8082.
Check Console log of eclipse:
Run Angular application
ng serve -o