Springboot +Mysql+ Angular example

Here is an example of a simple web application using Spring Boot, MySQL, and Angular.

Backend (Spring Boot + MySQL)

1. Create a new Spring Boot project using your favorite IDE.

2. Add the following dependencies to your pom.xml file:

<dependencies>

    <!-- Spring Boot dependencies -->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-web</artifactId>

    </dependency>

    <!-- MySQL Connector/J -->

    <dependency>

        <groupId>mysql</groupId>

        <artifactId>mysql-connector-java</artifactId>

        <version>8.0.27</version>

    </dependency>

    <!-- Spring Data JPA -->

    <dependency>

        <groupId>org.springframework.boot</groupId>

        <artifactId>spring-boot-starter-data-jpa</artifactId>

    </dependency>

</dependencies>

3. Create a MySQL database and update the application.properties file to configure the database connection.

spring.datasource.url=jdbc:mysql://localhost:3306/db_name

spring.datasource.username=username

spring.datasource.password=password

spring.jpa.show-sql=true

spring.jpa.hibernate.ddl-auto=update

4. Create a JPA entity class for your database table. Here's an example:

 @Entity

@Table(name = "users")

public class User {

    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    private Long id;

    @Column(nullable = false)

    private String firstName;

    @Column(nullable = false)

    private String lastName;

    // getters and setters

}

5. Create a Spring Data JPA repository interface to define database operations. Here's an example:

@Repository

public interface UserRepository extends JpaRepository<User, Long> {

}

6. Create a Spring MVC controller to handle REST API requests. Here's an example:

@RestController

@RequestMapping("/api/users")

public class UserController {

    @Autowired

    private UserRepository userRepository;

    @GetMapping

    public List<User> getUsers() {

        return userRepository.findAll();

    }

    @PostMapping

    public User createUser(@RequestBody User user) {

        return userRepository.save(user);

    }

    @PutMapping("/{id}")

    public User updateUser(@PathVariable Long id, @RequestBody User user) {

        user.setId(id);

        return userRepository.save(user);

    }

    @DeleteMapping("/{id}")

    public void deleteUser(@PathVariable Long id) {

        userRepository.deleteById(id);

    }

}

Frontend (Angular)

1. Install the latest version of Node.js and Angular CLI.

2. Create a new Angular project using the CLI:

ng new my-app

3. Change to the project directory and install the rxjs and @angular/common/http dependencies:

  cd my-app

npm install rxjs @angular/common/http

4. Create a new Angular component for displaying and managing user data. Here's an example:

  ng generate component user

5. Update the user.component.ts file to define the user model and API service:

 import { Component, OnInit } from '@angular/core';

import { HttpClient } from '@angular/common/http';

import { Observable } from 'rxjs';

interface User {

  id: number;

  firstName: string;

  lastName: string;

}

@Injectable({

  providedIn: 'root'

})

export class UserService {

  private apiUrl = '/api/users';

  constructor(private http: HttpClient) {}

  getUsers(): Observable<User[]> {

    return this.http.get<User[]>(this.apiUrl);

  }

  createUser(user: User): Observable<User> {

    return this.http.post<User>(this.apiUrl, user);

  }

  updateUser(user