Site icon Full-Stack

Angular & Java Full-Stack Web App

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

By integrating Angular and Java Spring Boot, you can create a robust and maintainable full-stack application. This combination allows for a dynamic user interface and a stable, expandable backend. With this setup, you can focus on developing features that matter, rather than worrying about the underlying infrastructure. Additionally, using Spring Boot’s auto-configuration and Angular’s opinionated framework, you can speed up your development process and get your application up and running quickly.

As you continue to build and expand your full-stack web application, you’ll appreciate the flexibility and scalability that Angular and Java Spring Boot provide. With a solid foundation in place, you can easily add new features, integrate with other services, and optimize performance. By following this tutorial and leveraging the power of these two popular technologies, you’ll be well on your way to creating a high-quality, user-friendly web application that meets the needs of your users and sets you up for long-term success.

Exit mobile version