django-angular-tutorial-rest-framework-crud-feature-image

Django + Angular 8 tutorial: CRUD App Django Rest Framework

In this tutorial, we will learn how to build a full stack Django + Angular 8 example with a CRUD App. The back-end server uses Django with Rest Framework for REST APIs and interacts with MySQL/MongoDB database. Front-end side is made with Angular 8, HTTPClient & Router.


Django Angular 8 example Overview

We will build a full-stack Django Angular 8 Tutorial Application 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:

django-angular-tutorial-rest-framework-crud-example-create

– Retrieve all items:

django-angular-tutorial-rest-framework-crud-example-retrieve

– Click on Edit button to view an item details:

django-angular-tutorial-rest-framework-crud-example-retrieve-one

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

django-angular-tutorial-rest-framework-crud-example-update

– Search items by title:

django-angular-tutorial-rest-framework-crud-example-find-by-field

Architecture of Django Angular 8 Tutorial Application

This is the application architecture we’re gonna build:

django-angular-tutorial-rest-framework-crud-architecture

– Django exports REST Apis using Django Rest Framework & interacts with 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

Overview

These are APIs that Django App will export:

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete all Tutorials
GET/api/tutorials?title=[keyword]find all Tutorials which title contains keyword

Technology

  • Django 2.1.15
  • Django Rest Framework 3.11.0
  • PyMySQL 0.9.3 (for MySQL)/ djongo 1.3.1 (for MongoDB)
  • django-cors-headers 3.2.1

Project Structure

This is our Django project structure:

django-angular-tutorial-rest-framework-example-project-structure

tutorials/apps.py: declares TutorialsConfig class (subclass of django.apps.AppConfig) that represents Rest CRUD Apis app and its configuration.
bzkRestApis/settings.py: contains settings for our Django project: 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 database table/collection.
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.
bzkRestApis/urls.py: also has URL patterns that includes tutorials.urls, it is the root URL configurations.

Implementation

You can find step by step to implement this Django Rest Api Server Application in one of the posts:

Angular 8 Front-end

Overview

django-angular-tutorial-rest-framework-crud-angular-components

– 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.

Technology

  • Angular 8
  • Angular HTTPClient
  • Angular Router

Project Structure

django-angular-tutorial-rest-framework-crud-angular-project-structure

– 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.

Implementation

You can find step by step to implement this Angular App in the post:
Angular 8 CRUD Application example with Web API

Newer version: Angular 10 CRUD Application example with Web API

Further Reading

Conclusion

Now we have an overview of Angular 8 Django example when building a CRUD App that interacts with database. We also take a look at client-server architecture for REST API using Django Rest Framework, as well as Angular 8 project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system (including source code):
– Back-end:

– Front-end:

2 thoughts to “Django + Angular 8 tutorial: CRUD App Django Rest Framework”

Leave a Reply

Your email address will not be published. Required fields are marked *