Getting started with Django and AngularJS

I've been using AngularJS for a few projects lately and I like it a lot! However, in combination with Django you may run into the following issues:

  • AngularJS and Django both use {{}} for template interpolation
  • AngularJS has to support Django's CSRF protection when sending POST data
  • AngularJS encodes POST data differently, and Django has problems decoding this.

By now I have some standard boilerplate that resolves these issues. It will configure <[ ]> as template interpolation symbols for AngularJS, it will configure AngularJS' CSRF support and it will rewrite POST data:

 

 
app = angular.module('myapp', [.. deps ..],
// Change interpolation symbols function ($interpolateProvider) { $interpolateProvider.startSymbol('<['); $interpolateProvider.endSymbol(']>'); }); app.config(['$httpProvider', function($httpProvider) {
// setup CSRF support $httpProvider.defaults.xsrfCookieName = 'csrftoken'; $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; // http://victorblog.com/2012/12/20/make-angularjs-http-service-behave-like-jquery-ajax/ // Rewrite POST body data $httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8'; // Override $http service's default transformRequest $httpProvider.defaults.transformRequest = [function(data) { /** * The workhorse; converts an object to x-www-form-urlencoded serialization. * @param {Object} obj * @return {String} */ var param = function(obj) { var query = ''; var name, value, fullSubName, subName, subValue, innerObj, i; for(name in obj) { value = obj[name]; if(value instanceof Array) { for(i=0; i<value.length; ++i) { subValue = value[i]; fullSubName = name + '[' + i + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if(value instanceof Object) { for(subName in value) { subValue = value[subName]; fullSubName = name + '[' + subName + ']'; innerObj = {}; innerObj[fullSubName] = subValue; query += param(innerObj) + '&'; } } else if(value !== undefined && value !== null) { query += encodeURIComponent(name) + '=' + encodeURIComponent(value) + '&'; } } return query.length ? query.substr(0, query.length - 1) : query; }; return angular.isObject(data) && String(data) !== '[object File]' ? param(data) : data; }]; } ]);
Last updated Jan. 30, 2014, 5:31 p.m. | filed under python, django | django javascript angularjs
comments powered by Disqus