This document discusses using AngularJS with Django to build a single page application called Tweeter. Some key advantages of this approach are that it is faster since pages don't need to reload, any JavaScript framework can be used, and the backend is reusable for mobile apps. Django REST framework is used to create RESTful APIs for models like Tweets that Angular consumes through resources and controllers. Templates are used to pass data from Django to Angular initially, while Angular routing and partials handle page changes within the SPA. Overall this provides a smooth integration of Django and Angular that separates concerns for a better user experience.
4. ● Need to refresh the page to submit a form
● Tough to write JS around template tags
● Difficult to Unit Test
● Template tags can be hard to grok for front
end devs
… also end tags are annoying
6. Why Endpoints are Better (IMHO)
● Faster - no waiting for a page to reload
● Swap frameworks - Ability to use any javascript
framework, and switch them out easily.
● Reusable - Have a mobile app? Your backend is
already done!
7. Dogfooding
If your endpoints are public, you can eat your own
dogfood by consuming them internally.
10. AngularJS
● MVC - Responsibilities are separated
● Single page app. That means no refreshes for new
content, and a better user experience
● Scope - Variables are bound between JS & View -
no nasty JQuery
● Easily Unit Tested
13. Use another framework
Excellent presentation on choosing a JS Framework
http://brianholt.me/
14. Let’s build a Tweeter
http://github.com/nnja/tweeter
15. Requirements
1. Display a list of tweets from all Users
2. Display my tweets (logged in User)
3. Show my profile - username, etc.
16. Our endpoints are created w/ DRF
Django Rest Framework
- Easily create a REST endpoint for your application.
17. Our Model
class Tweet(models.Model):
user = models.ForeignKey(User)
text = models.CharField(max_length=140)
timestamp = models.DateTimeField(auto_now_add=True)
class Meta:
ordering = ['-timestamp']
21. Step 1.
Include angular.js
Throw ng-app into one of your tags.
Everything within those tags is now an angular
app.
<html lang="en" ng-app="tweeterApp">
25. Angular Resources
A wrapper around a REST Endpoint at a location.
angular.module('tweeterApp.services', ['ngResource'])
.factory('Tweet', function($resource) {
return $resource('/api/tweets/:id/');
});