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:

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:

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

These are APIs that Django App will export:

Project structure

This is our Django project structure:

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

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

Originally published at https://bezkoder.com.

A passionate engineer in software development, especially web, mobile & cross-platform application. I love sharing knowledge by writing blogs & tutorials.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store