Tag Archives: angularJS

Django & Angular overview

Angular is what HTML would have been if it had been designed for building web applications”

What problem does Angular solve?

It separates your javascript models, views and controllers – just like Django does for your server-side code.

It does so using “two-way data-binding”: whenever the model changes, the view changes as well – and vice versa.

Pros and Cons of Angular

Angular has a rich ecosystem of modules, eg. Ionic for mobile app development.

However, Angular 2 (to be released in 2015) will not be easily backwards compatible. Angular 1 may not be supported for much longer (18 months?).

Plenty of alternatives exist – check them out at ToDo MVC.

One that is gaining popularity is React – “a javascript library for building user interfaces”. Mark Finger has written a helpful package called django-react to make this easy to use in Django.

A quick Angular demo

Eg. see the code snippets on the Angular home page.

What tools make it easier to use with Django?


  • Django-angular – lots of useful utilities to help the two work together, especially around forms and template sharing; there is also support for ‘three-way’ data-binding (ie. the server detects when the client’s model changes – and the server can modify values on the client side without the client needing to poll).
  • Django REST framework or TastyPie – since your Django app’s API is now its main feature
  • Django-compressor or django-pipeline – because you will have dozens of little js files defining your Angular components


  • Grunt or gulp – to automate javascript necessities like minification, compilation, unit testing, linting, etc
  • Npm or bower – like pip install for your javascript packages
  • Angular has lots of modules you can add, eg. ngDialog and AngularUI
  • Don’t use the default angular router; ui-router is better.

And Yeoman – a “generator ecosystem” – although there is no django + angular generator yet.

What practices make it easier to use with Django?

This section derived from the excellent Thinkster tutorial Build Web Applications with Django and AngularJS.

Angular directory structure (in the project directory root):

  • /static/javascripts/<ng_app_name>.config.js
  • /static/javascripts/<ng_app_name>.js
  • /static/javascripts/<ng_app_name>.routes.js
  • /static/javascripts/<ng_module_name>/<ng_module_name>.module.js
  • /static/javascripts/<ng_module_name>/controllers/<controller_name>.controller.js, …
  • /static/javascripts/<ng_module_name>/directives/<directive_name>.directive.js, …
  • /static/javascripts/<ng_module_name>/services/<service_name>.service.js, …
  • /static/templates/<ng_module_name>/<ng_template_name>.html, …
  • /templates/<django_template_name>.html, …
  • /templates/javascripts.html


urlpatterns = patterns(
    url(r'^admin/', include(admin.site.urls)),
    url(r'^api/v1/', include(router.urls)),
    # pass everything else through to Angular
    url('^.*$', IndexView.as_view(), name='index'),


from django.views.decorators.csrf import ensure_csrf_cookie
from django.views.generic.base import TemplateView
from django.utils.decorators import method_decorator

class IndexView(TemplateView):
    template_name = 'index.html'

    def dispatch(self, *args, **kwargs):
       return super(IndexView,self).dispatch(*args,**kwargs)

Testing frameworks

There are many javascript testing frameworks available, eg. mocha and jasmine.

What problems have people had?

Please let me know!

Resources – Tutorials

What is this post anyway?

These are some questions for and notes from the SyDjango meetup on Angular in January 2015.

Drag and drop with AngularJS and ng-repeat

I am using AngularJS and jQuery UI and have an app with drag-and-drop behaviour. I want to update a statistic on the screen every time an item is dropped.  The items are displayed in an  ng-repeat.

This turns out to be a bit tricky for a newcomer to AngularJS, e.g. you need to know:

I haven’t seen any examples that put all this together for my particular case, and though the solution is straightforward it took me quite a while to piece it together.

To save you the time, here is my solution.  To simplify it, it just updates a text string obj.outer. When you load up the page, the n and inner are replaced with the numbers 1,2,3 and “Inner linked”, as expected. outer is replaced with “Updated on link”, which is also what you would expect. You can drag and drop the pieces of text on each other. And when you do, the inner and outer fields are updated.


    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.5/angular.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>

    <div ng-app="test">
    <p ng-init="obj={outer:'not yet'}">outer: {{obj.outer}}</p>
          <li ng-repeat="n in [1,2,3]"><span my-dnd>{{n}} {{inner}}</span></li>


    angular.module('test', [])
      .directive('myDnd', function() {
        return {
            link: function(scope, elt, attrs) {
                scope.inner = "Inner";
                scope.obj.outer = "Updated on link";
                    accept: function( d ) { return true; },
                    drop: function( event, ui ) {
                        return scope.$apply(function() {
                            scope.inner = 'Dropped';
                            scope.obj.outer = 'Updated on drop';

Some comments:

  • Note that you can use scope.obj.outer; you do not need to use scope.$parent.obj.outer. I believe this is ‘prototypical Javascript inheritance’. I’m not exactly sure why you need the $parent sometimes but not others.
  • You definitely need scope.obj.outer rather than just scope.outer.
  • You can leave out the return in the statement return scope.$apply(...). I haven’t looked into what the difference is. You cannot leave the call to $apply out.
  • I would like to know why the documentation shows the link function using scope rather than $scope, as used by the controllers.

Please let me know if you have any thoughts or improvements!