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

My name is Roselle and I’m still working on my success story. You heard that right. I’m young, I work at home on my PJs and I’m still going to make many more mistakes in life. Just like you, just like we all do. But the other thing you should know about me is that I love helping people and this blog is one of the many outlets I have in connecting with you. I talk a lot about finance, business, and personal development. Visit my About page, if you want to know more about my story!

Write A Comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Pin It
Exit mobile version