Django + Angular

An introduction on how to create more responsive websites using Django and Angular.

Transcript

1. Django + Angular Asynchronous with Django?! Hassan Shaukat hassan@viodrive.com
2. Who is Hassan?  Software engineer for 15+ years.  Corporate/Government Contracting  VioDrive
3. The Point • The user experience with standard Django templates are old school. • JavaScript allows for a fast and fluid UI/UX. • Why not Angular!
4. How To Make It Happen • Django will function as your back-end. • Django REST framework will expose your data as HTTP endpoints. • Angular will be used to develop the front end that will asynchronously interact with the application.
5. Converting Django-Polls django-polls A simple and reusable polls application for django. https://github.com/byteweaver/django-polls $ pip install django-polls
6. Setup the Back-end Django REST Framework – Web browsable API – Authentication (includes OAuth1 and OAuth2) – Customizable – Good documentation – Large online community
7. Define Models models.py
8. Define Serializers serializer.py
9. Define Views views.py
10. Define Views views.py
11. Define URLs urls.py
12. Setup the Front-end Angular – Open source Javascript MVC Framework backed by Google. – Decouple DOM manipulation from app logic. – Decouple client side from server side. – Two way data binding. – Extensive documentation. – Large online community.
13. The Angular App • Template tags • Trailing slashes • CSRF tokens static/newpolls/app.js
14. Define Resources • Map some Angular resources to our APIs. static/newpolls/app.js
15. Define Controller • Gets all current polls and list them. • Define a function to vote/view a poll. static/newpolls/app.js
16. Define Controller • Define another function in the controller to allow a user to submit a vote. static/newpolls/app.js
17. Define Templates • Django will serve the js files. • The Django template engine will render the index file. templates/newpolls/index.html
18. Define Templates static/newpolls/polls.html
19. Setup State static/newpolls/app.js • Tells Angular what to do when a user accesses a URL. • Ties controllers and templates together.
20. New Polls!
21. Questions & Discussion
22. Thank You!! Hassan Shaukat hassan@viodrive.com