DEV Community

Cover image for Django + Angular + MongoDB example: Build CRUD App
Tien Nguyen
Tien Nguyen

Posted on

Django + Angular + MongoDB example: Build CRUD App

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

Full Article: https://bezkoder.com/django-angular-mongodb/

Django + Angular + MongoDB example Overview

We will build a full-stack Django + Angular Tutorial Application working with MongoDB 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 a Tutorial:

django-angular-mongodb-example-crud-create

- Retrieve all items:

django-angular-mongodb-example-crud-retrieve-all

- Click on Edit button to view an item details:

django-angular-mongodb-example-crud-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-mongodb-example-crud-update

- Search items by title:

django-angular-mongodb-example-crud-search

- Here is our MongoDB collection:

django-angular-mongodb-example-crud-collection

Django + Angular + MongoDB Architecture

This is the application architecture we're gonna build:

django-angular-mongodb-example-crud-architecture

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

The following diagram shows the architecture of our Django CRUD Rest Apis App with MongoDB database:

django-angular-mongodb-example-crud-server-components

  • 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 MongoDB Database

These are APIs that Django App will export:

Methods Urls Actions
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

Angular Front-end

django-angular-mongodb-example-crud-client-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.

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

Top comments (0)