Django + Angular + MongoDB example: Build CRUD App
Tags: angular, django, python, webdev
Published: 2021-01-01 03:43:22

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/](https://bezkoder.com/django-angular-mongodb/)

<h2>Django + Angular + MongoDB example Overview</h2>
We will build a full-stack Django + Angular Tutorial Application working with MongoDB in that:
<ul>
	<li>Each Tutorial has id, title, description, published status.</li>
	<li>We can create, retrieve, update, delete Tutorials.</li>
	<li>We can also find Tutorials by title.</li>
</ul>

The images below shows screenshots of our System.

\- Create a Tutorial:

![django-angular-mongodb-example-crud-create](https://dev-to-uploads.s3.amazonaws.com/i/mb6b2qmsxe80pvetwfon.png)

\- Retrieve all items:

![django-angular-mongodb-example-crud-retrieve-all](https://dev-to-uploads.s3.amazonaws.com/i/p9i59eyj1tudb8u31pxh.png)

\- Click on <strong>Edit</strong> button to view an item details:

![django-angular-mongodb-example-crud-retrieve-one](https://dev-to-uploads.s3.amazonaws.com/i/lrposcqpkkpxoal81c61.png)

On this Page, you can:
<ul>
	<li>change status to <strong>Published</strong> using <strong>Publish</strong> button</li>
	<li>remove the Tutorial from Database using <strong>Delete</strong> button</li>
	<li>update the Tutorial details on Database with <strong>Update</strong> button</li>
</ul>

![django-angular-mongodb-example-crud-update](https://dev-to-uploads.s3.amazonaws.com/i/xzq7ke3f196z6thyeoje.png)

\- Search items by title:

![django-angular-mongodb-example-crud-search](https://dev-to-uploads.s3.amazonaws.com/i/j3u853p474fim2t1brtg.png)

\- Here is our MongoDB collection:

![django-angular-mongodb-example-crud-collection](https://dev-to-uploads.s3.amazonaws.com/i/8ast3omhey5dbi3w8ny1.png)

<h2>Django + Angular + MongoDB Architecture</h2>
This is the application architecture we're gonna build:

![django-angular-mongodb-example-crud-architecture](https://dev-to-uploads.s3.amazonaws.com/i/r0p6frzghdgzkdcyzfqt.png)

- 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 <strong>axios</strong>, shows data on the components. We also use Angular Router for navigating to pages.

<h2>Django Rest Apis Back-end</h2>
<h3>Overview</h3>
The following diagram shows the architecture of our Django CRUD Rest Apis App with MongoDB database:

![django-angular-mongodb-example-crud-server-components](https://dev-to-uploads.s3.amazonaws.com/i/w8ldm06vlto66dzhmb8k.png)

<ul>
	<li>HTTP requests will be matched by <strong>Url Patterns</strong> and passed to the <strong>Views</strong></li>
	<li><strong>Views</strong> processes the HTTP requests and returns HTTP responses (with the help of <strong>Serializer</strong>)</li>
	<li><strong>Serializer</strong> serializes/deserializes data model objects</li>
	<li><strong>Models</strong> contains essential fields and behaviors for CRUD Operations with MongoDB Database</li>
</ul>

These are APIs that Django App will export:
<div class="table-responsive">
<table class="table table-hover table table-hover" width="100%">
<thead>
<tr>
<th>Methods</th>
<th>Urls</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td>POST</td>
<td>/api/tutorials</td>
<td>create new Tutorial</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials</td>
<td>retrieve all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials/:id</td>
<td>retrieve a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>PUT</td>
<td>/api/tutorials/:id</td>
<td>update a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials/:id</td>
<td>delete a Tutorial by <code>:id</code></td>
</tr>
<tr>
<td>DELETE</td>
<td>/api/tutorials</td>
<td>delete all Tutorials</td>
</tr>
<tr>
<td>GET</td>
<td>/api/tutorials?title=[keyword]</td>
<td>find all Tutorials which title contains <code>keyword</code></td>
</tr>
</tbody>
</table>
</div>

<h2>Angular Front-end</h2>

![django-angular-mongodb-example-crud-client-components](https://dev-to-uploads.s3.amazonaws.com/i/yjaacpsz4o9u7kwzokog.png)

– The <code>App</code> component is a container with <code>router-outlet</code>. It has navbar that links to routes paths via <code>routerLink</code>.

– <code>TutorialsList</code> component gets and displays Tutorials.
– <code>Tutorial</code> component has form for editing Tutorial's details based on <code>:id</code>.
– <code>AddTutorial</code> component has form for submission new Tutorial.

– These Components call <code>TutorialService</code> methods which use Angular <code>HTTPClient</code> to make HTTP requests and receive responses.

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