Creating a frontend for your Spring Boot application using Angular ( AI Generated)
Creating a frontend for your Spring Boot application using Angular involves building a modern, responsive user interface that interacts with your backend APIs. Below is a step-by-step guide to creating the frontend using Angular.
---
### **Step 1: Set Up Angular Project**
1. Install Angular CLI (if not already installed):
```bash
npm install -g @angular/cli
```
2. Create a new Angular project:
```bash
ng new linkedin-feed-frontend
```
- Choose routing (`Yes`) and CSS for styling.
3. Navigate to the project folder:
```bash
cd linkedin-feed-frontend
```
4. Start the development server:
```bash
ng serve
```
- Open `http://localhost:4200` in your browser to see the default Angular app.
---
### **Step 2: Install Required Dependencies**
1. Install Angular Material for UI components:
```bash
ng add @angular/material
```
- Choose a theme (e.g., Indigo/Pink) and set up global typography and animations.
2. Install Angular HTTP Client for API calls:
```bash
npm install @angular/common@latest
```
---
### **Step 3: Create Angular Components**
1. Generate components for the application:
```bash
ng generate component components/register
ng generate component components/login
ng generate component components/feed
ng generate component components/create-post
ng generate component components/navbar
```
2. Update the `app-routing.module.ts` to define routes:
```typescript
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { RegisterComponent } from './components/register/register.component';
import { LoginComponent } from './components/login/login.component';
import { FeedComponent } from './components/feed/feed.component';
import { CreatePostComponent } from './components/create-post/create-post.component';
const routes: Routes = [
{ path: 'register', component: RegisterComponent },
{ path: 'login', component: LoginComponent },
{ path: 'feed', component: FeedComponent },
{ path: 'create-post', component: CreatePostComponent },
{ path: '', redirectTo: '/feed', pathMatch: 'full' },
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}
```
---
### **Step 4: Create Angular Services for API Calls**
1. Generate services for authentication and posts:
```bash
ng generate service services/auth
ng generate service services/post
```
2. Implement the `AuthService`:
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class AuthService {
private apiUrl = 'http://localhost:8080/auth';
constructor(private http: HttpClient) {}
register(user: any): Observable<any> {
return this.http.post(`${this.apiUrl}/register`, user);
}
login(credentials: any): Observable<any> {
return this.http.post(`${this.apiUrl}/login`, credentials);
}
}
```
3. Implement the `PostService`:
```typescript
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
@Injectable({
providedIn: 'root',
})
export class PostService {
private apiUrl = 'http://localhost:8080/posts';
constructor(private http: HttpClient) {}
createPost(post: any): Observable<any> {
return this.http.post(`${this.apiUrl}`, post);
}
getFeed(): Observable<any> {
return this.http.get(`${this.apiUrl}`);
}
}
```
---
### **Step 5: Build the UI Components**
1. **Navbar Component** (`navbar.component.html`):
```html
<mat-toolbar color="primary">
<span>LinkedIn Feed</span>
<span class="spacer"></span>
<button mat-button routerLink="/register">Register</button>
<button mat-button routerLink="/login">Login</button>
<button mat-button routerLink="/feed">Feed</button>
<button mat-button routerLink="/create-post">Create Post</button>
</mat-toolbar>
```
2. **Register Component** (`register.component.html`):
```html
<mat-card>
<mat-card-title>Register</mat-card-title>
<mat-card-content>
<form (ngSubmit)="onSubmit()">
<mat-form-field>
<input matInput placeholder="Username" [(ngModel)]="user.username" name="username" required>
</mat-form-field>
<mat-form-field>
<input matInput type="password" placeholder="Password" [(ngModel)]="user.password" name="password" required>
</mat-form-field>
<mat-form-field>
<input matInput placeholder="Email" [(ngModel)]="user.email" name="email" required>
</mat-form-field>
<button mat-raised-button color="primary" type="submit">Register</button>
</form>
</mat-card-content>
</mat-card>
```
**Register Component** (`register.component.ts`):
```typescript
import { Component } from '@angular/core';
import { AuthService } from '../../services/auth.service';
@Component({
selector: 'app-register',
templateUrl: './register.component.html',
styleUrls: ['./register.component.css'],
})
export class RegisterComponent {
user = {
username: '',
password: '',
email: '',
};
constructor(private authService: AuthService) {}
onSubmit() {
this.authService.register(this.user).subscribe(
(response) => {
console.log('Registration successful', response);
},
(error) => {
console.error('Registration failed', error);
}
);
}
}
```
3. **Feed Component** (`feed.component.html`):
```html
<mat-card *ngFor="let post of posts">
<mat-card-title>{{ post.user.username }}</mat-card-title>
<mat-card-content>
<p>{{ post.content }}</p>
<div *ngIf="post.mediaFiles.length > 0">
<img *ngFor="let media of post.mediaFiles" [src]="media.fileUrl" alt="Media">
</div>
</mat-card-content>
</mat-card>
```
**Feed Component** (`feed.component.ts`):
```typescript
import { Component, OnInit } from '@angular/core';
import { PostService } from '../../services/post.service';
@Component({
selector: 'app-feed',
templateUrl: './feed.component.html',
styleUrls: ['./feed.component.css'],
})
export class FeedComponent implements OnInit {
posts: any[] = [];
constructor(private postService: PostService) {}
ngOnInit() {
this.postService.getFeed().subscribe(
(response) => {
this.posts = response;
},
(error) => {
console.error('Failed to fetch feed', error);
}
);
}
}
```
---
### **Step 6: Enable CORS in Spring Boot**
To allow your Angular app to communicate with the Spring Boot backend, enable CORS in your Spring Boot application:
```java
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class CorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:4200")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.allowedHeaders("*")
.allowCredentials(true);
}
};
}
}
```
---
### **Step 7: Run the Application**
1. Start the Spring Boot backend.
2. Start the Angular frontend:
```bash
ng serve
```
3. Open `http://localhost:4200` in your browser and test the application.
---
This is a basic implementation. You can expand it by adding features like:
- Authentication guards (to protect routes).
- File upload for photos and videos.
- Pagination for the feed.
- Real-time updates using WebSocket.
Let me know if you need help with any specific feature!
Comments
Post a Comment