Python for AngularJS

16,637 views

Published on

Presentation slides for a talk given at SF Python Meetup, 2014-02-12.

JavaScript frameworks are a really exciting tool for building super slick one-page apps. However, if you want them to play nice with a Python backend web framework (Django, Pyramid, Flask, etc.) you're going to have to flip a few of your design patterns and thought patterns.

Published in: Technology
1 Comment
21 Likes
Statistics
Notes
  • @jmschenck: i m using RestAngular the way u mentioned... Nothing working ... and where .py is linked with AngularJs
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total views
16,637
On SlideShare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
134
Comments
1
Likes
21
Embeds 0
No embeds

No notes for slide

Python for AngularJS

  1. 1. Python for AngularJS AngularJS.$inject(Python)
  2. 2. Huh? Angular? • JavaScript framework for SPAs • “Extends” HTML vocabulary • Controllers, services, templates
  3. 3. Let’s begin <html ng-app="app"> <head> <script src=“https://ajax.googleapis.com/ajax/libs/angularjs/1.2.12/angular.js"> </script> <script> ! angular.module('app', []) .controller('TradeCtrl', function ($scope) { $scope.conversion = 0.00000268; }); ! </script> </head> <body ng-controller="TradeCtrl"> ! <input type="text" ng-model="bitcoins" placeholder="Bitcoins"> <p>Wow! {{ bitcoins }} BTC = {{ (bitcoins / conversion)|number }} DOGE!</p> ! </body> </html>
  4. 4. But wait! Data! • Write a service in Angular
  5. 5. But wait! Data! angular.module('app', []) ! .factory('Exchange', function ($http) { return { getConversion: function () { return $http.get('http://suchdoge.com/api/exchange/'); } } }) ! .controller('TradeCtrl', function ($scope, Exchange) { Exchange.getConversion().then(function (result) { $scope.conversion = result.conversion; }); });
  6. 6. But wait! Data! • Write a service in Angular • Write an API endpoint in Python
  7. 7. But wait! Data! import json from django.http import HttpResponse from doge.models import DogeConversion ! def exchange(request): """API endpoint for requesting current BTC-DOGE exchange rate.""" conversion = DogeConversion.objects.latest('timestamp') response = {'conversion': conversion.rate} return HttpResponse( json.dumps(response), content_type='application/json' )
  8. 8. But wait! Data! • Write a service in Angular • Write an API endpoint in Python • Ew, hard-coded URLs? Fix!
  9. 9. But wait! Data! angular.module('app', []) ! .config(function (RestangularProvider) { RestangularProvider.setBaseUrl('/api'); }) ! .factory('Exchange', function (Restangular) { return { getConversion: function () { return Restangular.all('exchange'); } }; })
  10. 10. But wait! Data! • Write a service in Angular • Write an API endpoint in Python • Ew, hard-coded URLs? Fix! • Ew, hand-written API views? Fix!
  11. 11. But wait! Data! from rest_framework import viewsets from doge.models import DogeConversion ! class DogeConversionViewSet(viewsets.ModelViewSet): model = DogeConversion
  12. 12. Gotchas • Django and Jinja templates clash .config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); })
  13. 13. Gotchas • Django and Jinja templates clash • CSRF tokens .config(function ($httpProvider) { var csrfToken = getCsrfToken(); // Implementation-dependent $httpProvider.defaults.headers.common['X-CSRFToken'] = csrfToken; })
  14. 14. Gotchas • Django and Jinja templates clash • CSRF tokens • Template partials
  15. 15. Jeff Schenck CTO & Co-Founder ! www.chewse.com @jeffschenck ! code github.com/jeffschenck/talk-2014-02-python-angularjs slides www.slideshare.net/jmschenck/angular

×