Django + Angular + PostgreSQL example: CRUD App | Django Rest Framework

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:

- Retrieve all items:

- Click on Edit button to view an item details:

On this Page, you can:

• change status to Published using Publish button
• remove the Tutorial from Database using Delete button
• update the Tutorial details on Database with Update button

- Search items by title:

Django + Angular + PostgreSQL Architecture

This is the application architecture we’re gonna build:

- 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:

• 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:

• tutorials/apps.py: declares TutorialsConfig class (subclass of django.apps.AppConfig) that represents Rest CRUD Apis app and its configuration.
• DjangoRestApisPostgreSQL/settings.py: contains settings for our Django project: PostgreSQL Database engine, INSTALLED_APPS list with Django REST framework, Tutorials Application, CORS and MIDDLEWARE.
• tutorials/models.py: defines Tutorial data model class (subclass of django.db.models.Model).
• migrations/0001_initial.py: is created when we make migrations for the data model, and will be used for generating PostgreSQL database table.
• tutorials/serializers.py: manages serialization and deserialization with TutorialSerializer class (subclass of rest_framework.serializers.ModelSerializer).
• tutorials/views.py: contains functions to process HTTP requests and produce HTTP responses (using TutorialSerializer).
• tutorials/urls.py: defines URL patterns along with request functions in the Views.
• DjangoRestApisPostgreSQL/urls.py: also has URL patterns that includes tutorials.urls, it is the root URL configurations.

Angular Front-end

- 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

• tutorial.model.ts exports the main class model: Tutorial.
  - There are 3 components: tutorials-list, tutorial-details, add-tutorial.
  - tutorial.service has methods for sending HTTP requests to the Apis.
  - app-routing.module.ts defines routes for each component.
  - app component contains router view and navigation bar.
  - app.module.ts declares Angular components and import necessary modules.

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

Originally published at https://bezkoder.com.