The document discusses 10 steps to make a Django site more responsive by adding a REST API and using AngularJS for the front-end: 1) Create an API endpoint for the Django models, 2) Set up the JavaScript environment and install AngularJS, 3) Create a static AngularJS site, 4) Use verbatim tags to avoid conflicts between Django and AngularJS variables, 5) Connect AngularJS to the API, 6) Take advantage of the Django REST Framework features, 7) Handle asynchronous data loading, 8) Add forms and POST requests, 9) Clean up settings.py, and 10) Document the API. The goal is to keep the back-end lightweight Django while building a more responsive and
11. Don’t change your project …
• … because it is hip
• Creates new and larger code base, time consuming
• Requires a different eco system
• Do it if your Django site should become
responsive and more user-friendly
12. If you still think it’s a good
idea, here are the steps.
14. REST
• Representational state transfer
• Django REST Framework, tasty-pie
PyDanny’s Choosing an API Framework for Django
• Django REST Framework with GIS support
• Django REST Framework 3 Kickstarter: £32,650
15. What to do?
• `pip install djangorestframework`
• Add to your settings.py
• Create a REST serializers for your models
• Create API views for your serializers
• Update your urls.py
21. Bower.io
• Package manager for front-end js
• Works like pip, but it’s pip, can be configured
• Install it with `npm install -g bower`
• Run `bower init`
• Install packages:
`bower install [package] --save`
22. What to do?
• Created a .bowerrc file to point at the js assets
folder of the django project
• Installed the angular core package with
`bower install angular --save`
• Bower creates a bower.json file similar to your
requirements.txt from pip
1 {!
2 "directory": "fruitloop_angular/assets/js/",!
3 "json": "bower.json"!
4 }!
24. 30 second Intro to AngularJS
• Angular offers
Controllers - Changes site behaviour
Services - Provides data access (e.g. REST)
Directives - Create your own DOM elements
• Angular offers DOM attributes: ng-show, ng-
repeat, ng-click, etc.
1 <tr ng-repeat="item in items">!
2 <td> {{ item.name }} - {{ item.price | currency }} </td>!
3 </tr>!
25. What to do?
• Set up the settings path for your js assets
• Created a 'static' html site and serve with Django’s
TemplateView
• Create a sample js array to test your Angular setup
• Created a controller to serve 'static' data
28. {{ isn’t {{
• Django and AngularJS use the same variable tag
• Django > 1.4: Use {% verbatim %} environment
• Django < 1.5: Use code here
1 // use {$ variable $} in your template!
2 // from http://django-angular.readthedocs.org/en/latest/integration.!
3 html!
4 !
5 var my_app = angular.module('MyApp').config(function(!
6 $interpolateProvider) {!
7 $interpolateProvider.startSymbol('{$');!
8 $interpolateProvider.endSymbol('$}');!
9 });!
30. What to do?
• Install angular-resource with
`bower install angular-resource --save`
• Create the AngularJS in services.js and configure
your API endpoints (if needed)
• Make the Angular controller load the data
use query() for lists, use get() for single objects
• Display the list in the html page
31. Sample code
1 var fruitServices = angular.module('fruitServices', ['ngResource']);!
2 fruitServices.factory('FruitLocationService', ['$resource',!
3 function($resource){!
4 return $resource('api/', {}, {!
5 query: {method:'GET', params:{}, isArray: true}!
6 });!
7 }!
8 ]);!
• ngResource loaded, $resource becomes available
• Notice `$resource (‘api/’, {}, {…});`
• Configure more API methods here, e.g. PUT,
DELETE, etc., if needed
33. Thoughts
• Use DRF Authentication methods
• Use Object Persmissions
• Use the serializer to the full extend
e.g. serializers.RelatedField(source=‘fruit_type’)
36. Thoughts
• Encapsulate data-related code with $promise
• Code will be executed when data is returned from
the API
1 FruitLocationService.query().$promise.then(!
2 function (response) {!
3 response.forEach(function(location){!
4 $scope.markers.push({!
5 lat: location.latitude,!
6 lng: location.longitude!
7 });!
8 });!
9 console.log($scope.markers);!
10 }!
11 );!
38. What to do?
• Bind your form data with Angular’s ng-model
• Check your API service config and see if the
trailing slash doesn’t get eliminated
• Set up your authentication classes for the Django
REST framework
1 # Required for POST/PUT requests by the Django REST Framework!
2 REST_FRAMEWORK = {!
3 'DEFAULT_AUTHENTICATION_CLASSES': []!
4 }!
40. What to do?
• Make Django lightweight
• Remove unnecessary middleware and packages
• Check if you still need i18n and l18n support
Turn it off if you can