In this post I will briefly talk about my solution to building a Django app which has an AngularJS front-end. This wasn’t a major problem as such, but it did cost me some extra time when I tried to get it done, so naturally on solving this issue I felt that I should help the next programmer facing such as issue. Therefore I created a Github repo i.e. a sample project that can help anyone get started on something like this.

Background

I have a background in building Java web apps, I mean almost 70-80% code that I wrote for my previous jobs was in Java. So building a Java web app with an AngularJS front-end was something I knew how to do but I had a few minor hurdles when I wanted to achieve the same with a Python/Django backend. When I started working on solving this problem, I thought to myself “I wish there was a simple sample project which showed all aspects of this sort of application and how it all comes together”… and since I couldn’t find a sample project that demonstrated this, I figured maybe I can share/provide one.

So why did I need to build a Django backend?

I needed to do this because I was building a demo for my native iOS app My Day To-Do so the users can get a feel of what the app is like before they buy it. The demo is not finished but it’s functional enough and you can can have a play with it here. It has the exact same interface as the mobile app. Such a solution wasn’t very hard to achieve owing to the way I have built my iOS app i.e. it’s a native iOS app with a Html5 powered UI. I have open-sourced my solution to achieve that and my Github repo is called Html5StarterAppWithSwift which is an Xcode project template for a native iOS app where the UI is powered by Html5 or in my case an Hybrid mobile app framework (Ionic).

Didn’t I already blog about a Django and mobile apps before?

Last year, I wrote about how to build a mobile app with an Django backend. It was a two part post where in the first part I talked about how to build a Django backend and in the second part I talked about how to build a Hybrid mobile app using the Ionic framework that talks to the backend. This post however covers a slightly different aspect of a Django app as it’s not about RESTful backend that gets consumed by a mobile app but a Django app with a front-end powered by AngularJS.

Enough talk, where’s the solution?

The solution is hosted on Github and you can look at it here.

What’s the solution?

The solution presents a very simple Django app with an AngularJS front-end and it is basically a showcase of how to reference static files in Django, how to arrange and load Django templates and Angular templates.
Now as simple as this is trying to work out how to load AngularJS templates took me longer than it should have. Yes yes I know it is almost super embarrassing to admit that but the fact is that it took me longer than it should have and it was mainly because of naming. Yes naming, you see I have a habit of storing the Html files referred to by AngularJS in a directory called templates. So when I started working on this solution, I placed my AngularJS templates similar to how I placed(stored) my Django templates and my Django templates were loading but not my AngularJS templates. I could find little or no useful information online on solving my problem. Then I had that “aa ha” moment when I figured out what was wrong with my solution and felt incredibly silly.

Why little or no Google search results for AngularJS templates?

Well because in AngularJS they are called “PARTIALS” and not templates which is why my Google search for AngularJS templates didn’t yield promising results.

Trouble with loading AngularJS partials?

You can get some info here on how to save Django templates. You save Django templates in this directory called Templates and the AngularJS partials are not really templates but they are a static resource so the way they are referred to in a Django app is exactly how you would refer to static resources such as JS, CSS etc
This may not have been a problem had my naming convention been any different or if I had more experience working with Django.

What else does this solution show?

Well since I was on a quest to serve an Ionic app powered UI front-end for my Django app, I have also provided some sample code that shows how to have an Ionic front-end for a Django app.  Ionic is an Html5 framework and at it’s core it’s just a Javascript file with some CSS should you not use some of the Cordova stuff.

What happens when I run this solution?

Once you download the solution, you would run it as you would run a Django app i.e. python manage.py runserver and when you enter the URL in your browser, you will see the template for an Ionic tabs app. Remember my objective behind this was to build a demo for my iOS app, My Day To-Do
Once you run the Django app from the command line, in the browser you can enter 
http://localhost:8000/ – to see the Ionic tabs app demo
http://localhost:8000/angularDemo – to access the AngularDemo

Conclusion

The aim of this post was not to be a tutorial on how to make a Django app but more about showing the project structure of a Django app with an AngularJS front-end i.e. how and where static files are stored, how to store templates and how to store AngularJS partials. 
I hope this helps anyone like me who’s spending more time on such a problem that they really should. 
p.s. If you want to learn how to make a Django app, the writing your first Django app series are some of the, if not the best tutorials out there for it.

Finally, I am working on my app full-time right now so if you find my blog posts useful and want to support me you can 
  1. Either buy the complete version of My Day To-Do
  2. Or just give the Lite(free) version a try
Any feedback on my apps or the way I write my post, would be great.

Leave a Reply

Your email address will not be published. Required fields are marked *