Site icon Full-Stack

Building a Full-Stack Web App with Angular and Java

admin

Introduction

Full-stack development is highly sought after in today’s digital world, and a potent strategy is to combine Angular for the frontend with Java Spring Boot for the backend. Java delivers a stable and expandable backend, while Angular gives a dynamic user experience.

This tutorial will demonstrate how to create a full-stack web application using Spring Boot for the backend and Angular for the frontend. You will build a working web application that effortlessly integrates the two technologies by the end of this lesson.

Prerequisites

Before starting, ensure you have the following installed:

Step 1: Setting Up the Spring Boot Backend

Create a New Spring Boot Project

Use Spring Initializr :

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

  1. Launch the backend for Spring Boot:mvn spring-boot:run
  2. Launch the Angular frontend by typing ng serve.
  3. 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:

Is Java or Python Better for Full-Stack Development?

How Backend Development Powers Modern Web Applications

Exit mobile version