End to end web app with Django-Rest-Framework & AngularJS [Part 1]
A REST API allows your users to interact with your website from anything that can send an HTTP request. In this post we will create a RESTful api in Django using the Django-Rest-Framework. And we will access this api using a client developed under AngularJS.
To utilize the API developed in Django, we are going to use
$http & $q services in Angular. The
$http service is a core Angular service that facilitates communication with the remote HTTP servers via browser’s XMLHttpRequest object or via JSONP. $q is promise implementation that comes with Angular.
Preparing the environment
First thing to do is to prepare the environment, I suppose that most of you use virtualenv.
> virtualenv django-angular > cd django-angular > source bin/activate
Clone this repos :
Checkout to part1 branch.
> git clonehttps://github.com/mouradmourafiq/django-angular-blog
> git checkout part1
> cd django-angular-blog
Install the packages.
> pip install -r blog/requirements.pip
Copy the local_settings.py from templates/template_local_settings.py
> cp blog/templates/template_local_settings.py blog/blog/local_settings.py
and update the file with the correct informations.
We will create a simple model for our posts app.
Now we have our model we can create a serializer in order to provide a way of serializing and deserializing the post instances into representations such as
DRF comes with a
HyperlinkedModelSerializer class, which is
a serializer classe that map closely to model definitions. rather than primary keys, it uses hyperlinks to represent relationships.
Finally, we need to write our views and urls. We will use the class based views, rather than function based views.
Django REST Framework supports generating human-friendly HTML output for each resource when the HTML format is requested. These pages allow for easy browsing of resources, as well as forms for submitting data to the resources using POST, PUT, and DELETE.
You can test for yourself : http://localhost:8000/posts/
The next part of this tutorial will deal with the front end of this app with angularJs.