Example: Single API Endpoint to Fetch Data

Backend (Spring Boot with MySQL)

Prerequisites:

• Java 17+ and Maven installed.

• MySQL server running with a database named example_db.

• Dependencies: Spring Web, Spring Data JPA, MySQL Driver.

1. pom.xml (Dependencies)

xml

2. application.properties (Database Configuration)

properties

3. Entity Class (src/main/java/com/example/demo/model/User.java)

java

4. Repository Interface (src/main/java/com/example/demo/repository/UserRepository.java)

java

5. Controller Class (src/main/java/com/example/demo/controller/UserController.java)

java

6. Initialize Sample Data (src/main/java/com/example/demo/DemoApplication.java)

java

Frontend (Angular)

Prerequisites:

• Node.js and Angular CLI installed (npm install -g @angular/cli).

• Create a new Angular project: ng new frontend && cd frontend.

1. Service (src/app/user.service.ts)

typescript

2. Component (src/app/app.component.ts)

typescript

3. Template (src/app/app.component.html)

html

4. Module (src/app/app.module.ts)

typescript

How to Run:

1. Backend:

2. Frontend:

3. CORS: Add CORS support to Spring Boot by adding the following to UserController.java:

java

Article: Creating a Simple API with Spring Boot, MySQL, and Angular

Introduction

Modern web applications often rely on a backend to manage data and a frontend to present it to users. This article explains how to build a simple RESTful API using Spring Boot and MySQL to fetch data from a database and display it on an Angular frontend. We’ll focus on a single API endpoint to keep the concept clear and beginner-friendly.

What is an API?

An API (Application Programming Interface) enables communication between a backend (data storage and logic) and a frontend (user interface). We’ll use REST principles, where the backend exposes endpoints (e.g., /api/users) that the frontend can call using HTTP methods like GET.

Step 1: Setting Up the Backend with Spring Boot and MySQL

Spring Boot is a Java framework that simplifies building RESTful APIs, and MySQL is a robust relational database. The backend will:

• Connect to a MySQL database.

• Define a User entity to represent data.

• Expose a GET endpoint to fetch all users.

Key Components:

1. Entity: The User class maps to a database table using JPA (Java Persistence API).

2. Repository: Spring Data JPA’s UserRepository provides methods to query the database.

3. Controller: The UserController defines the /api/users endpoint, which returns a list of users in JSON format.

4. Data Initialization: Sample user data is inserted when the application starts.

The backend code (above) sets up a MySQL database connection, defines a User entity, and creates a /api/users endpoint that returns all users.

Step 2: Building the Frontend with Angular

Angular is a powerful framework for building dynamic web applications. The frontend will:

• Use Angular’s HttpClient to call the backend API.

• Display the retrieved data in a simple list.

Key Components:

1. Service: The UserService handles API calls using HttpClient.

2. Component: The AppComponent fetches data on initialization and stores it for display.

3. Template: The app.component.html file renders the user list using Angular’s *ngFor directive.

The frontend code (above) fetches users from the API and displays their names and emails in a list.

How It Works Together

1. User Interaction: The user opens the Angular app in a browser.

2. API Request: The AppComponent triggers the UserService to send a GET request to http://localhost:8080/api/users.

3. Backend Processing: Spring Boot queries the MySQL database via JPA and returns the user data as JSON.

4. Frontend Rendering: Angular receives the JSON, updates the component’s users array, and renders the data in the HTML template.

Key Considerations

• CORS: Since the frontend (localhost:4200) and backend (localhost:8080) run on different ports, enable CORS in Spring Boot to allow cross-origin requests.

• Error Handling: Handle errors in both backend (e.g., database failures) and frontend (e.g., network issues) to ensure a robust application.

• Security: In production, secure the API with authentication (e.g., JWT) and use environment variables for sensitive data like database credentials.

• Database Setup: Ensure MySQL is running and the database is created before starting the backend.

• Scalability: For larger applications, optimize database queries and consider pagination for large datasets.

Testing the Application

1. Start the MySQL server and create the example_db database.

2. Run the Spring Boot backend (mvn spring-boot:run).

3. Run the Angular frontend (ng serve).

4. Open http://localhost:4200 in a browser to see the users list (e.g., "Alice - alice@example.com", "Bob - bob@example.com").

Conclusion

Building a simple API with Spring Boot, MySQL, and Angular demonstrates the power of full-stack development. Spring Boot simplifies backend development with its robust ecosystem, while Angular provides a structured approach to building dynamic frontends. This example can be extended with additional endpoints (e.g., POST to add users), advanced Angular features (e.g., reactive forms), or a more complex database schema to suit your needs.

By following this guide, you’ve learned how to connect a backend database to a frontend through a RESTful API, a fundamental skill for modern web development.

Thank you!

Ekanadhreddy