Python for AngularJS
•
21 j'aime•19,732 vues
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.
Recommandé
Contenu connexe
Tendances
Tendances (20)
En vedette
En vedette (10)
Similaire à Python for AngularJS
Similaire à Python for AngularJS (20)
Dernier
Dernier (20)
Python for AngularJS
- 2. Huh? Angular? • JavaScript framework for SPAs • “Extends” HTML vocabulary • Controllers, services, templates
- 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. But wait! Data! • Write a service in Angular
- 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. But wait! Data! • Write a service in Angular • Write an API endpoint in Python
- 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. But wait! Data! • Write a service in Angular • Write an API endpoint in Python • Ew, hard-coded URLs? Fix!
- 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. 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. But wait! Data! from rest_framework import viewsets from doge.models import DogeConversion ! class DogeConversionViewSet(viewsets.ModelViewSet): model = DogeConversion
- 12. Gotchas • Django and Jinja templates clash .config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); })
- 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. Gotchas • Django and Jinja templates clash • CSRF tokens • Template partials
- 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