DEV Community

Posted on

Angular 11 Django CRUD PostgreSQL tutorial

Tutorial Link: Angular 11 Django CRUD PostgreSQL tutorial

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

Django Server

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:

Django Angular 11 Rest Api Postgresql – Angular Client Component

Project Structure

There are several folders and files in our Django project:

Django Project Structure

– customers/ declares CustomersConfig class (subclass of the django.apps.AppConfig) that represents our Django app and its configuration.
– gkzRestApi/ configures settings for the Django project, including INSTALLED_APPS list with Django REST framework and Customers Application.
– customers/ defines Customer data model class (subclass of the django.db.models.Model).
– migrations/ 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/ declares CustomerSerializer class (subclass of rest_framework.serializers.ModelSerializer) for Customer instances to manage serialization to JSON and deserialization from JSON.
– customers/ contains methods to process HTTP requests and produce HTTP responses (using CustomerSerializer).
– customers/ defines urlpatterns to be matched with request functions in the
– gkzRestApi/ defines root URL configurations that includes the URL patterns declared in customers/

Related posts

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

Top comments (0)