Location via proxy:   [ UP ]  
[Report a bug]   [Manage cookies]                
Scribd
Upload
387 views

Django Rest Angular Guide

Guide to develop a Django - Django Rest Framework and Angular project to make a synchronous project, async.

Uploaded by

Gocht Guerrero
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
387 views

Django Rest Angular Guide

Guide to develop a Django - Django Rest Framework and Angular project to make a synchronous project, async.

Uploaded by

Gocht Guerrero
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 50

Making Django sites more

responsive with REST and


AngularJS
August 27th, 2014

Hi, Im Hannes.
@hanneshapke
hanneshapke.github.io

A regular Django site

Github: https://github.com/hanneshapke/fruitloop_django

A Django site using REST and AngularJS

Github: https://github.com/hanneshapke/fruitloop_angular

Sync vs. Async

is synchronous.

The Python heroes are


working on a fix
PEP 3156
!

http://python-notes.curiousefficiency.org/en/latest/pep_ideas/async_programming.html

But what is the solution


in the mean time?

{}

http://www.airpair.com/js/javascript-framework-comparison

Dont 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

If you still think its a good


idea, here are the steps.

Step #1
Create an API endpoint
to your Django model

REST

Representational state transfer

Django REST Framework, tasty-pie


PyDannys Choosing an API Framework for Django

Django REST Framework with GIS support

Django REST Framework 3 Kickstarter: 32,650

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

Image: http://4gbloggingcrew.global2.vic.edu.au/files/2014/07/boom-2gjd45e.jpg

Thats it with Django.

Hey Django,
meet AngularJS.

Step #2
Set up your js environment
and install AngularJS

What?
A new eco system!
Based on node.js?

Bower.io

Package manager for front-end js

Works like pip, but its pip, can be configured

Install it with `npm install -g bower`

Run `bower init`

Install packages:
`bower install [package] --save`

What to do?

Created a .bowerrc file to point at the js assets


folder of the django project
12

{!

3
4 }!

"directory": "fruitloop_angular/assets/js/",!
"json": "bower.json"!

Installed the angular core package with


`bower install angular --save`

Bower creates a bower.json file similar to your


requirements.txt from pip

Step #3
Create a
static AngularJS site

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, ngrepeat, ng-click, etc.


1 <tr ng-repeat="item in items">!
2
<td> {{ item.name }} - {{ item.price | currency }} </td>!
3 </tr>!

What to do?

Set up the settings path for your js assets

Created a 'static' html site and serve with Djangos


TemplateView

Create a sample js array to test your Angular setup

Created a controller to serve 'static' data

Arhhh, it doest work!

Step #4
Use {% verbatim %}

{{ isnt {{

Django and AngularJS use the same variable tag

Django > 1.4: Use {% verbatim %} environment

Django < 1.5: Use code here


1
2
3
4
5
6
7
8
9

// use {$ variable $} in your template!


// from http://django-angular.readthedocs.org/en/latest/integration.!
html!
!
var my_app = angular.module('MyApp').config(function(!
$interpolateProvider) {!
$interpolateProvider.startSymbol('{$');!
$interpolateProvider.endSymbol('$}');!
});!

Step #5
Make AngularJS talk
to your API

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

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

Step #6
Take full advantage of the
Django REST Framework

Thoughts

Use DRF Authentication methods

Use Object Persmissions

Use the serializer to the full extend


e.g. serializers.RelatedField(source=fruit_type)

Step #7
Use $promise,
but dont promise too much

Example

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 );!

Step #8
Make your form
talk to your API

What to do?

Bind your form data with Angulars ng-model

Check your API service config and see if the


trailing slash doesnt 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 }!

Step #9
Clean up your settings.py

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

Step #10
Document your API

What to do?

Once you project is running, try to document the API

Django REST Swagger is an option

Small Hints

Use AngularJS
Constants
1 angular.module('myApp')!
2
.constant('settings', {!
3
// mimic the Django STATIC_URL variable!
4
STATIC_URL: '/static/'!
5
});!

Decide!
urls.py vs. ng-route

What about
site performance?

Then why using


Django?

Is that the end of


Django?

Vielen Dank.
hannes.hapke@gmail.com
@hanneshapke
hanneshapke.github.io

Resources

PyDanny comments on JS and Django: https://pydanny-event-notes.readthedocs.org/en/


latest/DjangoConEurope2013/javascript_django.html

Lightweight Django:
http://shop.oreilly.com/product/0636920032502.do#

Using Tasty-pie:
http://glynjackson.org/weblog/entry/django-angular.html

Django, Angular and Authentication: http://richardtier.com/2014/03/15/authenticateusing-django-rest-framework-endpoint-and-angularjs/

How the Django REST framework changed my life: http://www.ngenworks.com/blog/howdjango-rest-framework-changed-my-life

You might also like