“Angular is what HTML would have been if it had been designed for building web applications”
What problem does Angular solve?
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
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.
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
- Npm or bower – like
- 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):
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' @method_decorator(ensure_csrf_cookie) def dispatch(self, *args, **kwargs): return super(IndexView,self).dispatch(*args,**kwargs)
What problems have people had?
Please let me know!
Resources – Tutorials
- Learn Angular in your browser
- Build Web Applications with Django and AngularJS – a great tutorial using Django 1.7 by Thinkster
- Getting started with Django REST Framework and AngularJS by Kevin Stone.
What is this post anyway?
These are some questions for and notes from the SyDjango meetup on Angular in January 2015.