Integrating AngularJS with Django (45 min)

Django Templates

• I’ll be honest. Django templates are my least favorite part of the framework.
• Simple views and forms are easy, but as your app gets more complicated forms grow in complexity too.
• Ajax in template views is hard. jQuery is no longer the de-facto Javascript framework.
• But they still serve their purpose. By using a base Django template, we can use built-in session authentication by using the most basic View. (TemplateView to consume endpoints code example)

Why angular?

• AngularJS provides scope binding - easier than fussing with jquery. (code sample)
• Plays nicely with REST frameworks. The angular $resource lets you interact with an endpoint as if it were an object.
• If you already have public endpoints, you can eat your own dog food instead of duplicating logic with a template.
• AngularJS is built with unit testing in mind - it’s easier than testing logic in Django templates.
• Custom validation is a breeze - no need to hit the server before giving user feedback
• But most importantly - single page apps rock. They’re fast and responsive, no need to wait for a whole page reload before displaying information.

Your REST Api

• We’ll assume you already have a REST Api that you’d like to consume
• There are many options available for creating one, with my favorite being Django REST Api.

Configuration

• If using session authentication between the API and your app, your TempateViews must have an ensure_csrf decorator if calling operations that modify, such as POST and PUT
• To enable angular in your application, link to the angular js file, create a minimal app.js, and add an app=”myApp” to any tag in your template.
• AngularJS configurations needed to work with Django CSRF
• angular and django templates share the same tags - {{ }}, need to configure angular to use something else. I prefer [[ ]]. Another option is to wrap all angular specific code in {% verbatim %} tags.
• To pass back CSRF cookies to django, you must configure the xsrf Cookie and Header name in your angular app settings. (Code example)

AngularJS scope binding in action (code example)

• class conditionals

AngularJS resources (code example)

• ng-model Resources con’t. (code example)
• filtering and sorting results

Angular Routing vs. Django Routing (code example)

Unit Testing AngularJS (code example)

Conclusion

• Getting started can be tricky, and configuration may be difficult at first but the results pay off!