Tien NguyenIn 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:
- 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:
- Here is our MongoDB collection:
Django + Angular + MongoDB Architecture
This is the application architecture we're gonna build:
- 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:
- 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
– 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/
