Spring Boot + Angular + Java Project Example and Tutorial (original) (raw)

Hello Java programmers, if you are looking for a full-stack Java project with Spring Boot and Angular then you have come to the right place. Earlier, I have shared best Spring Boot courses, books as well as Spring boot + Reactjs project and In this tutorial, we are going to discuss how to create your first application using spring boot and angular. So we are using a simple crud application to build the application here. Here we create a School Classroom Dashboard application that can insert, update, delete and search students. The frontend of the application will be handled by angular and the backend of the system is using the spring boot. This is also a great Spring boot project beginners to do learn Spring boot better. So let's have a look into this.

Tools and technologies which is used in this application.

You can use any IDE to develop the backend(spring boot) and the frontend of the application.
Server: Apache Tomcat
Spring Boot 2
Angular 11
H2 Database

So let's create the spring boot backend of the system first.

The Spring Boot Application

Here, the REST API is used to communicate with the frontend(angular) of the application. Before you start programming, you need to have a better structure of the project. So below is the project structure which is used in this application.

This application is used to store some data in the in-memory database of H2 and fetch those data. So below are the maven dependencies in the pom.xml file which is used in this example.

4.0.0

org.springframework.boot
spring-boot-starter-parent
2.6.0

com.student
crudapp
0.0.1-SNAPSHOT
crudapp
Demo project for Spring Boot

<java.version>1.8</java.version>

org.springframework.boot
spring-boot-starter-data-jdbc

  <dependency>  
     <groupId>org.springframework.boot</groupId>  
     <artifactId>spring-boot-starter-data-jpa</artifactId>  
  </dependency>

  <dependency>  
     <groupId>org.springframework.boot</groupId>  
     <artifactId>spring-boot-starter-web</artifactId>  
  </dependency>

  <dependency>  
     <groupId>org.springframework.boot</groupId>  
     <artifactId>spring-boot-devtools</artifactId>  
     <scope>runtime</scope>  
     <optional>true</optional>  
  </dependency>  
  <dependency>  
     <groupId>com.h2database</groupId>  
     <artifactId>h2</artifactId>  
     <scope>runtime</scope>  
  </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>

org.springframework.boot spring-boot-maven-plugin

The Application.properties file

SpringApplication will load properties from application.properties files in the following locations and add them to the Spring Environment:

1. config subdirectory of the current directory.

2. The current directory

3. A classpath /config package

4. The classpath root

Below is the used applicaiton.properties file in this Student Crud application.

server.port=8090
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.datasource.url=jdbc:h2:mem:cmpe172
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect

JPA Entity Class

Below is the used JPA entity class in this application. This is responsible for modeling Students.

package com.student.crudapp.model;

import javax.persistence.*;

@Entity
@Table(name = "STUDENT")
public class Student {

@Column(name = "id")  
@Id  
@GeneratedValue(strategy=GenerationType.AUTO)  
private int id;

@Column(name = "name")  
private String name;

@Column(name = "email")  
private String email;

@Column(name = "grade")  
private String grade;

public int getId() {  
    return id;  
}

public void setId(int id) {  
    this.id = id;  
}

public String getName() {  
    return name;  
}

public void setName(String name) {  
    this.name = name;  
}

public String getEmail() {  
    return email;  
}

public void setEmail(String email) {  
    this.email = email;  
}

public String getGrade() {  
    return grade;  
}

public void setGrade(String grade) {  
    this.grade = grade;  
}

@Override  
public String toString() {  
    return "Student{" +  
            "id=" + id +  
            ", name='" + name + '\'' +  
            ", email='" + email + '\'' +  
            ", grade='" + grade + '\'' +  
            '}';  
}

}

The StudentRepository Interface

As we need to stick with the crud functionality of our system, we need to configure our StudentRepository interface as a Crud repository as below.

package com.student.crudapp.repository;

import com.student.crudapp.model.Student;
import org.springframework.data.jpa.repository.JpaRepository;

import java.util.List;

public interface StudentRepository extends JpaRepository<Student, Integer> {

List<Student> findAll();  
Student findById(int id);

}

The StudentController Class

Below is the StudentController class which is used in the application. There, we implement the addStudent, findStudent, getAllStudents, updateStudent and deleteStudent methods which are communicating with the H2 database in order to store them in the in-memory database.

package com.student.crudapp.controller;

import com.student.crudapp.model.Student;
import com.student.crudapp.repository.StudentRepository;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@Controller
@CrossOrigin(origins = "http://localhost:8090")
public class StudentController {

@Autowired  
StudentRepository studentRepository;

//check the api's working correctly api  
@RequestMapping(value="/ping", method=RequestMethod.GET)  
@ResponseBody  
public String healthCheck() {  
    return "This is working well";  
}

@RequestMapping(value="/students", method=RequestMethod.GET)  
@ResponseBody  
public List<Student> getAllStudents() {  
    return studentRepository.findAll();  
}

@RequestMapping(value="/student", method=RequestMethod.POST)  
@ResponseBody  
public Student addStudent(Student student) {  
    return studentRepository.save(student);  
}

@RequestMapping(value="/findstudent", method = RequestMethod.GET)  
@ResponseBody  
public Student findStudent(@RequestParam("studentId") int studentId) {  
    return studentRepository.findById(studentId);  
}

@RequestMapping(value= "/updatestudent", method = RequestMethod.GET)  
@ResponseBody  
public Student updateStudent(@RequestBody Student student){  
    return studentRepository.save(student);  
}

@RequestMapping(value="/deletestudent", method = RequestMethod.GET)  
@ResponseBody  
public int deleteStudent(@RequestParam("studentId") int studentId) {  
    return studentRepository.deleteById(studentId);  
}

}

In the above controller, we used the @CrossOrigin annotation, in order to enable Cross-Origin Resource Sharing (CORS) on the server.

You think this is unnecessary, but the thing is we're deploying our Angular frontend to http://localhost:4200, and our Boot backend to http://localhost:8090, the browser would otherwise deny requests from one to the other. the server.

So below are the created API's in order to deal with frontend of the application.

1. Add a new Student (POST request)

http://localhost:8090/student

{

"name": "Test",

"email": "test@gmail.com",

"grade": "05"

}

Get all students (GET request)

http://localhost:8090/students

Find specific student(GET request)

http://localhost:8090/findstudent?studentId=1

Update student(GET Request)

http://localhost:8090/updatestudent

{

"id": 1,

"name": "Testupdated",

"email": "testupdated@gmail.com",

"grade": "05"

}

Delete student(GET request)

http://localhost:8090/deletestudent?studentId=1

Here is the screenshot of the H2 database that we have created.

The Angular Application.

With the spring boot application running on port number 8090, we can create a simple angular application that is capable of consuming the REST controller API.

Angular CLI Installation

We are using the Angular CLI to create our application as it is Angular CLI is a really useful tool because it allows us to create a full Angular project from start with only a few commands, generating components, services, classes, and interfaces.

npm install -g @angular/cli

Project Scaffolding with Angular CLI

Open a command console, then navigate to the folder where we want our application to be created, and type the command:

ng new my-first-project

The Angular Application's Entry Point

TypeScript, a typed superset of JavaScript that compiles to normal JavaScript, is used in Angular's application files. Any Angular application, on the other hand, starts with a plain old index.html file. Add the bootstrap class to this file in order to get the support.

<head>

<title>MyFirstProject</title>

rel="stylesheet"

integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"

crossorigin="anonymous">

</head>

<body>