Angular 11 Django CRUD PostgreSQL tutorial

Tutorial Link: Angular 11 Django CRUD PostgreSQL tutorial

In this tutorial, we show you Angular 11 Http Client & Django Server example that uses Django to do CRUD with PostgreSQL (including finder method) and Angular 11 as front-end technology to make request and receive response.

Technologies

– Django 2.1
– Angular 11
– RxJS 6
– PostgreSQL 9.5

Django Server

With this system, we can use Angular Client to work with PostgreSQL Database via Django Server which has APIs:

1. GET api/customers/: get all customers
2. GET api/customers/[id]: get a customer by id
3. GET api/customers/age/[age]: find all customers by age
4. POST api/customers/: save a customer
5. PUT api/customers/[id]: update a customer by id
6. DELETE api/customers/[id]: delete a customer by id
7. DELETE api/customers/: delete all customers

Angular 11 Client

The image below shows overview about Angular Components that we will create:

Project Structure

There are several folders and files in our Django project:

– customers/apps.py: declares CustomersConfig class (subclass of the django.apps.AppConfig) that represents our Django app and its configuration.
– gkzRestApi/settings.py: configures settings for the Django project, including INSTALLED_APPS list with Django REST framework and Customers Application.
– customers/models.py: defines Customer data model class (subclass of the django.db.models.Model).
– migrations/0001_initial.py: is generated by makemigrations command, includes the code to create the Customer model, will be run by migrate to generate PostgreSQL database table for Customer model.
– customers/serializers.py: declares CustomerSerializer class (subclass of rest_framework.serializers.ModelSerializer) for Customer instances to manage serialization to JSON and deserialization from JSON.
– customers/views.py: contains methods to process HTTP requests and produce HTTP responses (using CustomerSerializer).
– customers/urls.py: defines urlpatterns to be matched with request functions in the views.py.
– gkzRestApi/urls.py: defines root URL configurations that includes the URL patterns declared in customers/urls.py.

Related posts

Django RestApis example – GET/POST/PUT/DELETE requests to PostgreSQL database