Building a Full-Stack Web App with Angular and Java

Introduction

Full-stack development is greatly desired in today’s digital world, and combining Java Spring Boot for the backend with Angular for the frontend is a powerful tactic. Angular provides a dynamic user experience, while Java offers a reliable and scalable backend.

Using Angular for the frontend and Spring Boot for the backend, this tutorial will show you how to build a full-stack online application. By the end of this session, you will have developed a functional web application that seamlessly combines the two technologies.

Prerequisites

Before starting, ensure you have the following installed:

Node.js and npm (for Angular)
Angular CLI (npm install -g @angular/cli)
JDK 11 or higher
Spring Boot (via Spring Initializr)
MySQL/PostgreSQL (or any preferred database)
Postman (for API testing)

you can also read:- Can I become full stack developer in 3 months?

Step 1: Setting Up the Spring Boot Backend

Create a New Spring Boot Project

Use Spring Initializr :

Spring Web (for REST API)
Spring Data JPA (for database interaction)
MySQL Driver (or PostgreSQL, H2, etc.)
Lombok (for reducing boilerplate code)

Download the project and open it in your preferred IDE (IntelliJ IDEA, Eclipse, VS Code).

Define the Entity Class

Let’s create a User entity in User.java:

import jakarta.persistence.*;
import lombok.*;

@Entity
@Data
@NoArgsConstructor
@AllArgsConstructor
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;
    private String name;
    private String email;
}

Create the Repository Layer

import org.springframework.data.jpa.repository.JpaRepository;

public interface UserRepository extends JpaRepository<User, Long> {}

Build the Service Layer

import org.springframework.stereotype.Service;
import java.util.List;

@Service
public class UserService {
    private final UserRepository userRepository;

    public UserService(UserRepository userRepository) {
        this.userRepository = userRepository;
    }

    public List<User> getAllUsers() {
        return userRepository.findAll();
    }
}

Create the REST Controller

import org.springframework.web.bind.annotation.*;
import java.util.List;

@RestController
@RequestMapping("/users")
public class UserController {
    private final UserService userService;

    public UserController(UserService userService) {
        this.userService = userService;
    }

    @GetMapping
    public List<User> getUsers() {
        return userService.getAllUsers();
    }
}

Run the Spring Boot Application

Ensure your application.properties is configured properly for MySQL:

spring.datasource.url=jdbc:mysql://localhost:3306/demo_db
spring.datasource.username=root
spring.datasource.password=root
spring.jpa.hibernate.ddl-auto=update

Run the application using:

mvn spring-boot:run

Test the API with Postman at http://localhost:8080/users.

Step 2: Setting Up the Angular Frontend

Create a New Angular Project

Run the following command:

ng new user-management
cd user-management
ng serve --open

Generate a Service to Consume the API

ng generate service user

Modify user.service.ts to fetch data from the backend:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class UserService {
  private apiUrl = 'http://localhost:8080/users';
  
  constructor(private http: HttpClient) {}

  getUsers(): Observable<any[]> {
    return this.http.get<any[]>(this.apiUrl);
  }
}

Modify the App Component to Display Users

Modify app.component.ts:

import { Component, OnInit } from '@angular/core';
import { UserService } from './user.service';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
  users: any[] = [];

  constructor(private userService: UserService) {}

  ngOnInit(): void {
    this.userService.getUsers().subscribe(data => this.users = data);
  }
}

Update the HTML to Display User Data

Modify app.component.html:

<h1>User List</h1>
<table>
  <tr>
    <th>ID</th>
    <th>Name</th>
    <th>Email</th>
  </tr>
  <tr *ngFor="let user of users">
    <td>{{ user.id }}</td>
    <td>{{ user.name }}</td>
    <td>{{ user.email }}</td>
  </tr>
</table>

Enable CORS in Spring Boot

Modify UserController.java:

@CrossOrigin(origins = "http://localhost:4200")

Step 3: Running the Full-Stack App

Launch the backend for Spring Boot:mvn spring-boot:run
Launch the Angular frontend by typing ng serve.
To view the user list, navigate to http://localhost:4200 in your browser.

Conclusion

Well done! You have effectively constructed a full-stack web application with Java Spring Boot for the backend and Angular for the front end.

Next Steps:

Implement CRUD operations
Add JWT authentication for security
Deploy the app on AWS/GCP

You may be like this:-

Is Java or Python Better for Full-Stack Development?

How Backend Development Powers Modern Web Applications

Find Your Preferred Courses

All Courses Instructor Led Training Online Training Oracle Functional Oracle Technical Pega Salesforce Training SAP Functional SAP Hana SAP Technical Technology

₹25,000.00

SAP SD S4 HANA

SAP SD (Sales and Distribution) is a module in the SAP ERP (Enterprise Resource Planning) system that handles all aspects of sales and distribution processes. S4 HANA is the latest version of SAP’s ERP suite, built on the SAP HANA in-memory database platform. It provides real-time data processing capabilities, improved…

eLearning

₹25,000.00

SAP HR HCM

SAP Human Capital Management (SAP HCM) is an important module in SAP. It is also known as SAP Human Resource Management System (SAP HRMS) or SAP Human Resource (HR). SAP HR software allows you to automate record-keeping processes. It is an ideal framework for the HR department to take advantage…

Ayodhya Darade

₹25,000.00

Salesforce Administrator Training

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Ayodhya Darade

₹25,000.00

Salesforce Developer Training

Salesforce Developer Training Overview Salesforce Developer training advances your skills and knowledge in building custom applications on the Salesforce platform using the programming capabilities of Apex code and the Visualforce UI framework. It covers all the fundamentals of application development through real-time projects and utilizes cases to help you clear…

Varad

₹25,000.00

SAP EWM

SAP EWM stands for Extended Warehouse Management. It is a best-of-breed WMS Warehouse Management System product offered by SAP. It was first released in 2007 as a part of SAP SCM meaning Supply Chain Management suite, but in subsequent releases, it was offered as a stand-alone product. The latest version…

Varad

₹25,000.00

Oracle PL-SQL Training Program

Oracle PL-SQL is actually the number one database. The demand in market is growing equally with the value of the database. It has become necessary for the Oracle PL-SQL certification to get the right job. eLearning Solutions is one of the renowned institutes for Oracle PL-SQL in Pune. We believe…

Ayodhya Darade

₹25,000.00

Pega Training Courses in Pune- Get Certified Now

Course details for Pega Training in Pune Elearning solution is the best PEGA training institute in Pune. PEGA is one of the Business Process Management tool (BPM), its development is based on Java and OOP concepts. The PAGA technology is mainly used to improve business purposes and cost reduction. PEGA…

Varad

₹27,000.00

SAP PP (Production Planning) Training Institute

SAP PP Training Institute in Pune SAP PP training (Production Planning) is one of the largest functional modules in SAP. This module mainly deals with the production process like capacity planning, Master production scheduling, Material requirement planning shop floor, etc. The PP module of SAP takes care of the Master…

Varad