Fullstack Login App with Angular 17 and Java Spring Framework | Frontend

In this tutorial, we will be creating a full-stack application with a login functionality using Angular 17 for the frontend and Java Spring for the backend. This project will serve as a foundation for building more complex applications with user authentication and authorization.

Before we dive into the coding part, make sure you have the following tools installed on your machine:

1. Node.js and npm – for installing Angular CLI and managing frontend dependencies.
2. Java Development Kit (JDK) – for compiling and running Java code.
3. Spring Boot – for creating a RESTful API backend.
4. IDE of your choice – I recommend using IntelliJ IDEA for Java development and Visual Studio Code for Angular development.

Now, let’s start by setting up the backend with Java Spring.

Setting up the Backend with Java Spring

1. Create a new Spring Boot project using start.spring.io. Select the following dependencies:

   • Spring Web
   • Spring Data JPA
   • H2 Database (or any other database of your choice)

2. Generate the project and import it into your IDE.

3. Create a new Java package for your application (e.g., com.example.loginapp).

4. Inside the package, create a new Java class named "User" with the following fields:

   @Entity
   public class User {
      @Id
      @GeneratedValue(strategy = GenerationType.IDENTITY)
      private Long id;
   
      private String username;
      private String password;
   
      // Getters and Setters
   }

5. Create a UserRepository interface by extending JpaRepository:

   public interface UserRepository extends JpaRepository<User, Long> {
      User findByUsername(String username);
   }

6. Create a UserController class for handling user authentication:

   @RestController
   @RequestMapping("/api")
   public class UserController {
      @Autowired
      private UserRepository userRepository;
   
      @PostMapping("/login")
      public ResponseEntity<User> login(@RequestBody User user) {
          User existingUser = userRepository.findByUsername(user.getUsername());
          if (existingUser != null && existingUser.getPassword().equals(user.getPassword())) {
              return ResponseEntity.ok(existingUser);
          } else {
              return ResponseEntity.badRequest().build();
          }
      }
   }

7. Run your Spring Boot application and test the API endpoints using a tool like Postman to make sure everything is working as expected.

Setting up the Frontend with Angular 17

1. Create a new Angular project using Angular CLI:

   ng new login-app

2. Install Angular Material for UI components and animations:

   ng add @angular/material

3. Create a login component using Angular CLI:

   ng generate component login

4. Inside the login component, create a form for user input:

   <form (ngSubmit)="onSubmit()">
      <mat-form-field>
          <input matInput placeholder="Username" [(ngModel)]="username">
      </mat-form-field>
      <mat-form-field>
          <input matInput placeholder="Password" [(ngModel)]="password" type="password">
      </mat-form-field>
      <button mat-raised-button color="primary" type="submit">Login</button>
   </form>

5. Implement the onSubmit method in the login component to call the backend API:

   export class LoginComponent {
      username: string;
      password: string;
   
      constructor(private http: HttpClient) {}
   
      onSubmit() {
          this.http.post<User>('/api/login', { username: this.username, password: this.password })
              .subscribe((user) => {
                  // Handle successful login
              }, (error) => {
                  // Handle login error
              });
      }
   }

6. Configure HttpClientModule in your app module to enable HTTP requests:

   import { HttpClientModule } from '@angular/common/http';
   
   @NgModule({
      imports: [HttpClientModule]
   })

7. Run your Angular application using the following command:

   ng serve

8. Open your browser and navigate to http://localhost:4200 to test the login functionality.

Congratulations! You have successfully created a full-stack application with login functionality using Angular 17 for the frontend and Java Spring for the backend. Feel free to customize and expand this project to suit your specific requirements. Happy coding!