Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 3: Angular Client
Tags: django, mysql, crud, angular
Published: 2021-04-19 17:25:28

https://ozenero.com/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client

Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 3: Angular Client


<p>This tutorial is part 3 of <a href="https://ozenero.com/frontend/angular/django-angular-6-example-django-rest-framework-mysql-crud-example-part-1-overview">Django-Angular-MySQL series</a>. Today, we will create Angular Client to make HTTP request &amp; receive response from Django Server.</p>



<p>&gt;&gt; <a href="https://ozenero.com/frontend/angular/django-angular-6-example-django-rest-framework-mysql-crud-example-part-1-overview">Part 1: Overview</a><br>&gt;&gt; <a href="https://ozenero.com/python/django-angular-6-example-django-rest-framework-mysql-crud-example-part-2-django-server">Part 2: Django Server</a></p>


<!-- wp:more -->
<!--more-->
<!-- /wp:more -->

<!-- wp:heading {"level":3} -->
<h3>Video</h3>
<!-- /wp:heading -->

<!-- wp:html -->
<figure><iframe width="853" height="480" src="https://www.youtube.com/embed/TEOoxcASn1k?rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen="allowfullscreen"></iframe></figure>
<!-- /wp:html -->

<!-- wp:heading {"level":3} -->
<h3>Angular Client Overview</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Goal</h5>
<!-- /wp:heading -->


<p>The image below shows overview about Angular Components that we will create:</p>


<!-- wp:image {"id":16859} -->
<figure class="wp-block-image"><img src="https://ozenero.com/wp-content/uploads/2019/02/django-angular-6-django-rest-api-mysql-angular-client-architecture.png" alt="django-angular-6-django-rest-api-mysql-angular-client-architecture" class="wp-image-16859"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":5} -->
<h5>Project Structure</h5>
<!-- /wp:heading -->

<img src="https://ozenero.com/wp-content/uploads/2019/02/django-angular-6-django-rest-api-mysql-angular-project-structure.png" alt="django-angular-6-django-rest-api-mysql-angular-project-structure" width="251" height="525" class="alignnone size-full wp-image-17262" />


<p>We have:<br>- 4 components: <strong><em>customers-list</em></strong>, <strong><em>customer-details</em></strong>, <strong><em>create-customer</em></strong>, <strong><em>search-customer</em></strong>.<br>- 3 modules: <strong><em>FormsModule</em></strong>, <strong><em>HttpClientModule</em></strong>, <strong><em>AppRoutingModule</em></strong>.<br>- <strong><em>customer.ts</em></strong>: class Customer (id, firstName, lastName)<br>- <strong><em>customer.service.ts</em></strong>: Service for Http Client methods<br>- <strong><em>app-routing.module.ts</em></strong>: Routing configuration</p>


<!-- wp:heading {"level":3} -->
<h3>Setup Angular Project</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Create Angular Project</h5>
<!-- /wp:heading -->


<p>Run command: <code>ng new AngularDjango</code>.</p>


<!-- wp:heading {"level":5} -->
<h5>Create Service &amp; Components</h5>
<!-- /wp:heading -->


<p>On Project folder, run commands below:<br>- <code>ng g s customer</code><br>- <code>ng g c create-customer</code><br>- <code>ng g c customer-details</code><br>- <code>ng g c customers-list</code><br>- <code>ng g c search-customers</code><br>On each Component selector, delete <code>app-</code> prefix, then change <strong>tslint.json</strong> <code>rules</code> - <code>"component-selector"</code> to <strong>false</strong>.</p>


<!-- wp:heading {"level":3} -->
<h3>Implement Angular Client App</h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":5} -->
<h5>Data Model</h5>
<!-- /wp:heading -->


<p>Create new file named <em>customer.ts</em>:</p>


<!-- wp:preformatted {"className":"lang:java"} -->
<pre><code class="language-javascript">export class Customer {
    id: number;
    name: string;
    age: number;
    active: boolean;
}
</code></pre>
<!-- /wp:preformatted -->

<!-- wp:heading {"level":5} -->
<h5>Data Service</h5>
<!-- /wp:heading -->


More at:

Django + Angular 6 example | Django Rest Framework + MySQL CRUD example – Part 3: Angular Client

https://ozenero.com/django-angular-6-example-django-rest-framework-angular-crud-mysql-example-part-3-angular-client