zafeirisdimi/ProductCrud

Simple Angular Application Crud

ProductCrud

Simple Angular Application Crud

Table of Contents

• Brief
  • Fake Rest API
  • Routing
  • Models
    • Product
  • Services
    • ProductService
    • Methods of service
  • Components
    • Add Product
    • Add Product v2
    • Edit Product
    • Products List
  • Technologies

Brief

Overview

In this assignment, you will be creating a simple CRUD (Create, Read, Update, Delete) application using Angular 14 and implement a dummy RESTful API. The application should allow users to perform CRUD operations on a simple resource, such as a list of entities. Each entity should have the following attributes: "name" and "type". The application should communicate with the RESTful API to retrieve and update data.

Requirements

• Angular 14+
• TypeScript
• HTML/CSS
• RESTful API
• JSON-Server

Task

Deliverables

• The source code of the application
• The configuration files for the dummy RESTful API

Evaluation Criteria

• Adherence to the requirements
• Code quality
• Proper usage of Angular 14
• Proper usage of TypeScript
• Proper usage of HTML/CSS
• Proper usage of RESTful API
• Proper usage of Reactive Form
• basic validation

Submission

Fake Rest API

• We use the npm library json-server to create a Fake REST API and establish the CRUD functions of our entity

• Installation: npm i json-server in app folder terminal

• After installation, create a db.json file with dummy data.

• Running: json-server --watch db.json

Models

Product

Type	Property
string	id
string	code
string	description
number	barcode
number	retailPrice
number	wholesalePrice
number	discount

Services

ProductService

• Includes all the required methods so that our application is suitable to communicate with the REST API of json-server.

Methods of service

Method	HTTP Request	Description
getAllProducts()	GET	Returns the list of all products
getProductById(id:string)	GET	Returns the specific product with the specific id
addProduct(addProductRequest: Product)	POST	Adds new product with new data {addProductRequest}
updateProduct(id:string,updateProductRequest:Product)	PUT	Updates the product with the specific id with the new data {updateProductRequest}
deleteProduct(id:string)	DELETE	Delete the specific product with the specific id from our database

Components

• Add Product
• Add Product v2
• Edit Product
• Products List

Technologies

• HTML/CSS
• Typescript
• Angular 15
• Angular Routing
• Reactive Forms (ngForms)
• Bootstrap 5 (UI)
• json-server
• Visual Studio Code
• Postman