Djangocon 2014 angular + django
•
22 likes•8,334 views
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.
Recommended
Recommended
More Related Content
What's hot
What's hot (20)
Similar to Djangocon 2014 angular + django
Similar to Djangocon 2014 angular + django (20)
More from Nina Zakharenko
More from Nina Zakharenko (8)
Recently uploaded
Recently uploaded (20)
Djangocon 2014 angular + django
- 1. Angular + Django A match made in heaven
- 3. Django Templates … are not my favorite
- 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
- 5. Forms get complex, fast.
- 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.
- 8. REST Frameworks are Standard Front End Devs know how to use them.
- 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
- 11. The bad You have to use Javascript
- 12. If you don’t like it...
- 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']
- 18. Our endpoints /api/users/ /api/tweets/ /api/users/:id /api/tweets/:id
- 19. GET /api/tweets/ HTTP 200 OK Vary: Accept Content-Type: text/html; charset=utf-8 Allow: GET, POST, HEAD, OPTIONS [ { "text": "Bob is the coolest name EVAR", "user": "bob", "timestamp": "2014-08-29T18:51:19Z" } ]
- 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">
- 22. {{ }} UH OH Angular tags and Django template tags conflict.
- 23. Tell angular to use different tags I like [[ this ]] or use {% verbatim %} {% endverbatim %}
- 24. static/js/app.js $interpolateProvider.startSymbol('[[').endSymbol(']]'); $httpProvider.defaults.xsrfCookieName = 'csrftoken'; $httpProvider.defaults.xsrfHeaderName = 'X-CSRFToken'; $resourceProvider.defaults.stripTrailingSlashes = false;
- 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/'); });
- 26. Default Actions { 'get': {method:'GET'}, 'save': {method:'POST'}, 'query': {method:'GET', isArray:true}, 'remove': {method:'DELETE'}, 'delete': {method:'DELETE'} };
- 27. Creating a new object var newTeet = new Tweet(); newTweet.name = "Look, a tweet!"; newTweet.$save();
- 28. Callbacks Tweet.get({id:123}, function(tweet){ console.log(tweet); });
- 29. VS Promises Tweet.get({id:123}) .$promise.then(function(tweet) { $scope.tweet = tweet; });
- 30. Scope You change a value in the controller, and it’s automagically updated in the view. And vice versa.
- 31. Angular Controllers tweeterControllers.controller('TweetCtrl', function TweetCtrl($scope, Tweet) { ... });
- 32. The meat Tweet.query(function(response) { $scope.tweets = response; }); $scope.submitTweet = function(text) { var tweet = new Tweet({text: text}); tweet.$save(function(){ $scope.tweets.unshift(tweet); }) }
- 33. Can’t get rid of all the templates Used to pass information from django-land to angular. Gives us our static URL so we can load assets (css/js)
- 34. Interacting with Django Templates <script type="text/javascript"> angular .module('tweeterApp.services') .factory('AuthUser', function() { return { id: "{{ user.id|default:''}}", } }); </script>
- 35. Angular UI Routing .config(function ($stateProvider, $urlRouterProvider) { ... $urlRouterProvider.otherwise('/'); $stateProvider .state('tweets', { url: '/', templateUrl: 'static/tweeter/partials/tweet-list.html', controller: 'TweetCtrl', }) };
- 36. Routing in Angular Drop this in your base template <div ui-view></div> Depending on the route, the correct partial will be rendered and inserted.
- 37. Partials Just vanilla HTML and Angular. Keep them in an accessible static folder.
- 39. Demo time!
- 40. Bye Everybody! github.com/nnja/tweeter @nnja