Overview
It actually makes no sense to call it the ‘djangular’ stack since both Django (API Backend) and Angular (Client) are two different components and are entirely independent from each other. This post describes the different areas and concepts we need to know when using the stack. There’s a lot of how’s or what’s going on, and this post aims to thoroughly describe the components we are going to need when implementing a Django API backend and a single page application built with AngularJS.
Note: This post assumes that you are familiar with both stack and is looking forward to seeing how the two frameworks could fit into each other’s arms. I also do this as a sort of documentation just to get everything in my head written down. And to also throw in a few helpful tips i’ve learned. This is also a work still in-progress.
Here’s the github link to a sample implementation or skeleton: Github
Summary
Let us learn by doing! We’ll be building a stock
1. Setting up Django
– Using cookiecutter to generate production-ready apps
2. Setting up AngularJS
– Serving the Angular App inside Django
– Consuming the APIs
3. Implementing JWT-based authentication
4. Hosting & Deployment
5. Style Guides & Best Practices
1. Setting up Django
Django as an API backend, in my opinion, is fairly easy to use and will definitely get your API bootstrapped in no time. The typical workflow is to define the models needed in your project, and make use of Django REST framework to build your API based on your defined models.
A. Using Cookiecutter
Cookiecutter is a great tool to generate a production-ready Django application. We can make use of cookiecutter-django-rest or simply go with the main cookiecutter-django to get started.
2. Setting up AngularJS
A. Serving the Angular App inside Django
Hosting your Angular app can either be through cdn, s3, or any hosting at all – however, throughout development, I typically let Django serve the index.html through: config/urls.py
url(r’^$’, RedirectView.as_view(url=’/static/index.html’), name=’home’),
What happens is we place our Angular app INSIDE Django’s static folder, and let Django redirect to opening the index.html when the user hits the ‘/’ route. The is the only route we’ll ever need in Django (except for the API endpoints themselves)
B. Consuming the APIs
When consuming the APIs, we make use of $http or $resource inside Angular, and call on the endpoints with the proper Authorization (if authentication is implemented)
3. Implementing JWT-based authentication
4. Hosting & Deployment
When using cookiecutter, you may opt to deploy to AWS, heroku or even PythonAnywhere – all necessary configurations are already generated.
5. Style Guides & Best Practices
The common style guide already used in the generated cookiecutter projects are once again from PyDanny’s Two Scoops of Django 1.8.
There’s already a lot going on in the latest version of JS, and I definitely recommend adopting the latest practices, but I still use Angular 1.x in some of my current projects (and is looking foward to migrating to es6) and would like to share how I do it (if you don’t mind)
The style guide I follow throughout development is from John Papa. It’s Angular Team Endorsed, and it follows best practices and clean code.
API Development Services
Hey, we offer API Development services for clients locally or abroad – Contact Us
