Angular CRUD API

💻 Frontend Projects 📂 angular-crud-api

Introduction

CRUD stands for Create, Read, Update and Delete.

Those are the basic operations you would perform on a database entity. In this blog post, we’ll be using a super-simple User entity with name and age properties.

Languages & Tools

This project combines:

1. Angular framework,
2. Typescript language superset.

Angular framework

Angular framework is maintained by a dedicated team at Google.

Angular provides a broad suite of tools, APIs, and libraries to simplify and streamline your development workflow.

Key features of this framework are:

• create and nest components,
• decouple UI from inner logic,
• conditional rendering,
• event-driven rendering
• state managed by Angular’s signals,
• use plain .ts files instead of TSX files.

Typescript language

I prefer to use typed languages, so I always combine React with Typescript superset.

Moreover, for this project I took inspiration from code generated from:

API Platform Client generator from API structure

I really suggest to take a look at that project!

The backend

The backend we’re using is:

Spring Boot CRUD API Simple backend in Spring Boot

You can find the code here:

🍃Spring Boot Projects 📂 user_crud_server

Project Structure

Code Structure

The project structure is:

• Directorysrc

  • Directoryapp/ configure routes and homepage

    • …
  • Directorycomponents/

    • Directoryshared/ user form components used by create and updated components

      • …
    • Directoryuser

      • Directorycreate/ components’ .html and .ts files

        • create.component.html UI
        • create.component.ts logic
      • Directorylist/ get all users

        • …
      • Directoryshow/ get single user

        • …
      • Directoryupdate/ edit user

        • …
  • Directoryinterface/

    • User.ts model used within API calls
  • Directoryroutes/ Angular Router configs imported by ./app/app.routes.ts

    • …
  • Directoryservice/

    • user-facade.service.ts middleware between UI components and API calls
    • user.service.ts API calls
  • Directorystyle/ .css files

    • …
  • Directoryutils/

    • …
  • index.html app entrypoint that calls ./src/app.ts
• angular.json defines entrypoint and all the settings

Project Routes

CRUD app routes are very important:

• /users: list all the users,
• /users/create: allow creation of a new user,
• /users/edit/:id: allow editing of a user given its id,
• /users/edit/:id: show a user given its id,

Eventually, you can also implement /users/delete/:id that could allow to delete a user given its id.

In this application, user deletion is performed through a web +Dialog*.

App Screenshot

List Users

Create new user

Edit user

Show user

Delete user

In this example, delete operation is implemented as a dialog, not a separated page.