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.
– Django 2.1
– Angular 11
– RxJS 6
– PostgreSQL 9.5
With this system, we can use Angular Client to work with PostgreSQL Database via Django Server which has APIs:
- GET api/customers/: get all customers
- GET api/customers/[id]: get a customer by id
- GET api/customers/age/[age]: find all customers by age
- POST api/customers/: save a customer
- PUT api/customers/[id]: update a customer by id
- DELETE api/customers/[id]: delete a customer by id
- DELETE api/customers/: delete all customers
The image below shows overview about Angular Components that we will create:
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.