Building a Web App with Angular, Django and Django REST

18 months ago i posted the following post about integrating Angular and Django. Meanwhile, we have new releases and some updates.

Angular 7 is one of the best javascript frameworks. With typescript as a regular programming language , its separation of data and views,  CSS and HTML, its finally feels like real programming on client side.

You can build the server side using many technologies: nodejs if you want to javascript also on the server, ASP.NET if you want microsoft on your back and many more

I prefer python. Its easy, dynamic , has tons of packages available and integrates with all kind of data – local, cloud, small and big

Python offers many frameworks to build a web application – I prefer Django

In this post, I will build a simple web application using:

I also use jetbrains tools : Webstorm for client side and pycharm for the server side, Using these tools, you can open an Angular cli project and django project and skip the basic setup steps

The server – Django and Django REST 

I will go over the steps and also post the result:

  • create an empty folder
  • create and activate a virtual environmemt:

  • install Django

  • create the app

  • Add migration so you can change your database schema easily:

  • Run the server to see the first app:

You can now open your web browser and go to http://localhost:8000 to see its working.

  • Install the following packages using pip

 

Client Side – Angular 7

  • Install node.js – LTS 
  • Install Angular cli

  • Create a new Angular project

  • Test it using local server:

  • Build the project

This will create dist folder with everything you need for deploying the client side

Integrating with Django project:

  • Copy the js files (including the map files) to the static folder on your Django project (data/static)
  • Copy index.html generated by angular project to the templates folder – override the existing one (data/templates)
  • Change the index.html file as follow:

 

Update the settings.py file

On the django project we need to make some settings to enable the static folder and the REST framework

Add the rest framework to the installed apps:

 

Update the middleware:

Set the static folder – add the following at the bottom of the settings file:

 

Add some views and REST API – Server

  • Add new entry to urls.py at the main project folder (datatest):

  • Add file urls.py to the App folder (data). Set a router for customers REST API, add 2 simple views and one api entry

  • Create a templates folder on the module folder(first) and add your html files (index.html, links.html)
  • On the views.py file add the following class:

 

Django REST Framework

To use Django REST framework we add a simple function to multiply the given argument by 100. Add the following code to the views.py file:

Now , the server side is ready, you can run the server and test the different views. You can’t test the REST API using the browser because it doesn’t support GET method (only POST)

 

Angular Client Code

To test the server functionality , we will build a simple view

To use http requests from angular, we need to add the HttpClient service class (instead of http module that is deprecated)

app.module.ts file

Now we can add some code to use the server views and API

app.component.ts

The first function create a get request and the second creates a post request. This is a simple example to build only the skeleton 

app.component.html

Now its all set. to test the code run build and copy the js files to the static folder:

Each time you change the client code, you need to repeat the build and copy process

To Download the complete code for both Angular and Django see this github repo

 

Want more?

 

 

 

Tagged , ,

Leave a Reply

Your email address will not be published.