Django + Angular + PostgreSQL example: CRUD App | Django Rest Framework
Tags: Angular, Postgresql, Django, Django Rest Framework, Crud

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

using button remove the Tutorial from Database using Delete button

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

and passed to the Views processes the HTTP requests and returns HTTP responses (with the help of Serializer )

processes the HTTP requests and returns HTTP responses (with the help of ) Serializer serializes/deserializes data model objects

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.

class (subclass of ) 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 .

list with Django REST framework, Tutorials Application, CORS and . 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 ).

class (subclass of ). 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/