Django + Angular + PostgreSQL example: CRUD App | Django Rest Framework
Tags: django, angular, postgres, crud
Published: 2020-12-10 13:06:40

In this tutorial, we will learn how to build a full stack Django + Angular + PostgreSQL example with a CRUD App. The back-end server uses Django with Rest Framework for REST APIs. Front-end side is made with Angular 11/10/8, HTTPClient & Router.

## Django + Angular + PostgreSQL example Overview
We will build a full-stack Django + Angular Tutorial Application working with PostgreSQL in that:
- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.

The images below shows screenshots of our System.

- Create an item:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/1zkp7hdct1xx6xw5wk68.png)

- Retrieve all items:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/vtvi6vspbrn2lev16b3c.png)

- Click on **Edit** button to view an item details:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/c3jiag83fuu8vswf04y5.png)

On this Page, you can:
1. change status to Published using **Publish** button
2. remove the Tutorial from Database using **Delete** button
3. update the Tutorial details on Database with **Update** button

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ob43ztw0hhvolkyno1t6.png)

- Search items by title:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/jyjk3ens3qpuajew1wwb.png)

## Django + Angular + PostgreSQL Architecture
This is the application architecture we’re gonna build:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8c572p29iqg3xedof7jr.png)

- Django exports REST Apis using Django Rest Framework & interacts with PostgreSQL Database using Django Model.
- Angular Client sends HTTP Requests and retrieve HTTP Responses using **axios**, shows data on the components. We also use Angular Router for navigating to pages.

## Django Rest Apis Back-end
The following diagram shows the architecture of our Django CRUD Rest Apis App with PostgreSQL database:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/btjl55ek8buw8jz9j4w6.png)

- HTTP requests will be matched by **Url Patterns** and passed to the **Views**
- **Views** processes the HTTP requests and returns HTTP responses (with the help of **Serializer**)
- **Serializer** serializes/deserializes data model objects
- **Models** contains essential fields and behaviors for CRUD Operations with PostgreSQL Database

These are APIs that Django App will export:

- POST `/api/tutorials`: create new Tutorial
- GET `/api/tutorials`: retrieve all Tutorials
- GET `/api/tutorials/[id]`: retrieve a Tutorial by :id
- PUT `/api/tutorials/[id]`: update a Tutorial by :id
- DELETE `/api/tutorials/[id]`: delete a Tutorial by :id
- DELETE `/api/tutorials`: delete all Tutorials
- GET `/api/tutorials?title=[keyword]`: find all Tutorials which title contains keyword

## Project structure
This is our Django project structure:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/aya2ptsjv8zv8rcequr0.png)

## Angular Front-end
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/rbp3txtxgvqhx3kcod3u.png)

- The `App` component is a container with `router-outlet`. It has navbar that links to routes paths via `routerLink`.

- `TutorialsList` component gets and displays Tutorials.
- `Tutorial` component has form for editing Tutorial's details based on `:id`.
- `AddTutorial` component has form for submission new Tutorial.

- These Components call `TutorialService` methods which use Angular `HTTPClient` to make HTTP requests and receive responses.

## Project Structure
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/f5rn8uoenvg7g6iihuee.png)

For more details and implementation, please visit:
[https://bezkoder.com/django-angular-postgresql/](https://bezkoder.com/django-angular-postgresql/)