Step 1: Setting Up the Spring Boot Backend

1.1 Create a Spring Boot Project

1. Open Spring Initializr:
o Go to Spring Initializr in your web browser.
2. Configure Project Metadata:
o Project: Maven Project
o Language: Java
o Spring Boot: Select the latest version of Spring Boot 3.3
o Group: com.example
o Artifact: product-service
o Name: product-service
o Description: Product Service
o Package Name: com.example.productservice
o Packaging: Jar
o Java Version: 17 (or your preferred version)
o Click Next.
3. Select Dependencies:
o On the Dependencies screen, select:
 Spring Web
 Spring Data JPA
 H2 Database
 Spring Boot DevTools
o Click Next.
4. Generate the Project:
o Click Generate to download the project zip file.
o Extract the zip file to your desired location.
5. Open the Project in Your IDE:
o Open your IDE and import the project as a Maven project.
1.2 Update application.properties
Open the application.properties file located in the src/main/resources directory and add the
following configuration:
server.port=8080

spring.datasource.url=jdbc:h2:mem:testdb
spring.datasource.driverClassName=org.h2.Driver
spring.datasource.username=sa
spring.datasource.password=password
spring.jpa.database-platform=org.hibernate.dialect.H2Dialect
spring.h2.console.enabled=true
spring.jpa.hibernate.ddl-auto=update
Explanation:
• Configures the server port to 8080.
• Sets up an in-memory H2 database.
• Enables the H2 console for database inspection.
• Automatically updates the database schema based on JPA entities.
1.3 Create Product Entity
Create a Product entity class in the com.example.productservice.model package:
package com.example.productservice.model;

import jakarta.persistence.Entity;
import jakarta.persistence.GeneratedValue;
import jakarta.persistence.GenerationType;
import jakarta.persistence.Id;

@Entity
public class Product {

@Id
@GeneratedValue(strategy = GenerationType.IDENTITY)
 private Long id;
private String name;
private double price;

// Getters and Setters

}
Explanation:
• @Entity: Marks the class as a JPA entity.
• @Id: Marks the id field as the primary key.
• @GeneratedValue(strategy = GenerationType.IDENTITY): Configures auto-increment for
the id field.
• name, price: Fields representing product attributes.
• Getters and Setters: Methods to access and modify the fields.
1.4 Create Product Repository
Create a ProductRepository interface in the com.example.productservice.repository package:
package com.example.productservice.repository;

import com.example.productservice.model.Product;
import org.springframework.data.jpa.repository.JpaRepository;

public interface ProductRepository extends JpaRepository<Product, Long> {

}
Explanation:
• @Repository: Marks the interface as a Spring Data repository.
• Extends JpaRepository<Product, Long>: Provides CRUD operations for
the Product entity.
1.5 Create Product Service
Create a ProductService class in the com.example.productservice.service package:
package com.example.productservice.service;
import com.example.productservice.model.Product;
import com.example.productservice.repository.ProductRepository;
import org.springframework.stereotype.Service;

import java.util.List;
import java.util.Optional;

@Service
public class ProductService {

private final ProductRepository productRepository;

public ProductService(ProductRepository productRepository) {

this.productRepository = productRepository;
}

public List<Product> getAllProducts() {

return productRepository.findAll();
}

public Optional<Product> getProductById(Long id) {

return productRepository.findById(id);
}

public Product saveProduct(Product product) {

return productRepository.save(product);
}

public void deleteProduct(Long id) {

productRepository.deleteById(id);
 }
}
Explanation:
• @Service: Marks the class as a service component.
• ProductRepository productRepository: Repository to interact with the database.
• getAllProducts(): Retrieves all products.
• getProductById(Long id): Retrieves a product by ID.
• saveProduct(Product product): Saves a new or updated product.
• deleteProduct(Long id): Deletes a product by ID.
1.6 Create Product Controller
Create a ProductController class in the com.example.productservice.controller package:
package com.example.productservice.controller;

import com.example.productservice.model.Product;
import com.example.productservice.service.ProductService;
import org.springframework.web.bind.annotation.*;

import java.util.List;
import java.util.Optional;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/products")
public class ProductController {

private final ProductService productService;

@Autowired
public ProductController(ProductService productService) {
this.productService = productService;
 }

@GetMapping
public List<Product> getAllProducts() {
return productService.getAllProducts();
}

@GetMapping("/{id}")
public Optional<Product> getProductById(@PathVariable Long id) {
return productService.getProductById(id);
}

@PostMapping
public Product createProduct(@RequestBody Product product) {
return productService.saveProduct(product);
}

@PutMapping("/{id}")
public Product updateProduct(@PathVariable Long id, @RequestBody Product product) {
product.setId(id);
return productService.saveProduct(product);
}

@DeleteMapping("/{id}")
public void deleteProduct(@PathVariable Long id) {
productService.deleteProduct(id);
}
}
Explanation:
 • @CrossOrigin(origins = "http://localhost:4200"): Enables CORS for requests from the
Angular frontend running on localhost:4200.
• @RestController: Marks the class as a REST controller.
• @RequestMapping("/products"): Maps requests to /products.
• getAllProducts(): Handles GET requests to retrieve all products.
• getProductById(Long id): Handles GET requests to retrieve a product by ID.
• createProduct(@RequestBody Product product): Handles POST requests to create a
new product.
• updateProduct(@PathVariable Long id, @RequestBody Product product): Handles PUT
requests to update an existing product.
• deleteProduct(@PathVariable Long id): Handles DELETE requests to delete a product by
ID.
1.7 Run the Spring Boot Application
Run the application by executing the ProductServiceApplication class. The backend should be
up and running on http://localhost:8080.
Step 2: Setting Up the Angular Frontend
2.1 Create an Angular Project
1. Open a terminal and run the following command to create a new Angular project:
ng new product-client defaults --standalone=false
2. Navigate to the project directory:
cd product-client
2.2 Install Dependencies
Install Bootstrap for styling:
npm install bootstrap
Add Bootstrap to angular.json:
"styles": [
"src/styles.css",
"node_modules/bootstrap/dist/css/bootstrap.min.css"
],
2.3 Create Angular Services and Components
2.3.1 Create Product Service
Generate the ProductService:
ng generate service services/product
Edit product.service.ts:
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class ProductService {

private baseUrl = 'http://localhost:8080/products';

constructor(private http: HttpClient) { }

getAllProducts(): Observable<any> {
return this.http.get(`${this.baseUrl}`);
}

getProductById(id: number): Observable<any> {

return this.http.get(`${this.baseUrl}/${id}`);
}

createProduct(product: Object): Observable<Object> {

return this.http.post(`${this.baseUrl}`, product);
}

updateProduct(id: number, product: Object): Observable<Object> {

return this.http.put(`${this.baseUrl}/${id}`, product);
 }

deleteProduct(id: number): Observable<any> {

return this.http.delete(`${this.baseUrl}/${id}`);
}
}
Explanation:
• @Injectable({ providedIn: 'root' }): Marks the service as injectable and available
throughout the app.
• HttpClient: Service for making HTTP requests.
• getAllProducts(): Sends a GET request to retrieve all products.
• getProductById(id: number): Sends a GET request to retrieve a product by ID.
• createProduct(product: Object): Sends a POST request to create a new product.
• updateProduct(id: number, product: Object): Sends a PUT request to update an
existing product.
• deleteProduct(id: number): Sends a DELETE request to delete a product by ID.
2.3.2 Create Components
Generate the components for displaying and managing products:
ng generate component components/product-list
ng generate component components/product-form
Edit product-list.component.ts:
import { Component, OnInit } from '@angular/core';
import { ProductService } from '../../services/product.service';

@Component({
selector: 'app-product-list',
templateUrl: './product-list.component.html',
styleUrls: ['./product-list.component.css']
})
export class ProductListComponent implements OnInit {
 products: any[] = [];

constructor(private productService: ProductService) { }

ngOnInit(): void {
this.productService.getAllProducts().subscribe(data => {
this.products = data;
});
}

deleteProduct(id: number) {
this.productService.deleteProduct(id).subscribe(() => {
this.products = this.products.filter(product => product.id !== id);
});
}
}
Edit product-list.component.html:
<div class="container mt-5">
<div class="row">
<div class="col-md-12">
<h2>Product List</h2>
<a routerLink="/add-product" class="btn btn-primary mb-3">Add Product</a>
<table class="table table-striped">
<thead>
<tr>
<th>ID</th>
<th>Name</th>
<th>Price</th>
<th>Actions</th>
</tr>
 </thead>
<tbody>
<tr *ngFor="let product of products">
<td>{{ product.id }}</td>
<td>{{ product.name }}</td>
<td>{{ product.price }}</td>
<td>
<a [routerLink]="['/edit-product', product.id]" class="btn btn-info btn-sm">Edit</a>
<button (click)="deleteProduct(product.id)" class="btn btn-danger btn-
sm">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
Edit product-form.component.ts:
import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { ProductService } from '../../services/product.service';

@Component({
selector: 'app-product-form',
templateUrl: './product-form.component.html',
styleUrls: ['./product-form.component.css']
})
export class ProductFormComponent implements OnInit {
product: any = { name: '', price: 0 };
isEditMode: boolean = false;
 constructor(private productService: ProductService, private route: ActivatedRoute, private
router: Router) { }

ngOnInit(): void {
const id = this.route.snapshot.paramMap.get('id');
if (id) {
this.isEditMode = true;
this.productService.getProductById(Number(id)).subscribe(data => {
this.product = data;
});
}
}

saveProduct() {
if (this.isEditMode) {
this.productService.updateProduct(this.product.id, this.product).subscribe(() => {
this.router.navigate(['/products']);
});
} else {
this.productService.createProduct(this.product).subscribe(() => {
this.router.navigate(['/products']);
});
}
}
}
Edit product-form.component.html:
<div class="container mt-5">
<div class="row justify-content-center">
<div class="col-md-6">
 <div class="card">
<div class="card-header">
<h2>{{ isEditMode ? 'Edit Product' : 'Add Product' }}</h2>
</div>
<div class="card-body">
<form (ngSubmit)="saveProduct()">
<div class="form-group">
<label for="name">Name</label>
<input type="text" id="name" class="form-control" [(ngModel)]="product.name"
name="name" required>
</div>
<div class="form-group">
<label for="price">Price</label>
<input type="number" id="price" class="form-control" [(ngModel)]="product.price"
name="price" required>
</div>
<button type="submit" class="btn btn-primary">{{ isEditMode ? 'Update' : 'Save'
}}</button>
<a routerLink="/products" class="btn btn-secondary ml-2">Cancel</a>
</form>
</div>
</div>
</div>
</div>
</div>
2.4 Update Angular Routing
Edit app-routing.module.ts:
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductFormComponent } from './components/product-form/product-
form.component';

const routes: Routes = [

{ path: 'products', component: ProductListComponent },
{ path: 'add-product', component: ProductFormComponent },
{ path: 'edit-product/:id', component: ProductFormComponent },
{ path: '', redirectTo: '/products', pathMatch: 'full' }
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Explanation:
• Defines routes for the product list and product form components.
• Redirects the root path to the product list component.
2.5 Update Angular App Module
Edit app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';

import { AppRoutingModule } from './app-routing.module';

import { AppComponent } from './app.component';
import { ProductListComponent } from './components/product-list/product-list.component';
import { ProductFormComponent } from './components/product-form/product-
form.component';
@NgModule({
declarations: [
AppComponent,
ProductListComponent,
ProductFormComponent
],
imports: [
BrowserModule,
AppRoutingModule,
FormsModule,
HttpClientModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Explanation:
• Imports necessary modules for the Angular app.
• Declares the components used in the app.
• Sets up the app's root module.
2.6 Run the Angular Application
Open a terminal in the Angular project directory and run the application:
ng serve
Visit http://localhost:4200 in your web browser to see the application.