• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Python for AngularJS
 

Python for AngularJS

on

  • 2,947 views

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

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.

Statistics

Views

Total Views
2,947
Views on SlideShare
2,942
Embed Views
5

Actions

Likes
4
Downloads
13
Comments
0

2 Embeds 5

https://twitter.com 4
https://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Python for AngularJS Python for AngularJS Presentation Transcript

    • Python for AngularJS AngularJS.$inject(Python)
    • Huh? Angular? • JavaScript framework for SPAs • “Extends” HTML vocabulary • Controllers, services, templates
    • 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>
    • But wait! Data! • Write a service in Angular
    • 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; }); });
    • But wait! Data! • Write a service in Angular • Write an API endpoint in Python
    • 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' )
    • But wait! Data! • Write a service in Angular • Write an API endpoint in Python • Ew, hard-coded URLs? Fix!
    • But wait! Data! angular.module('app', []) ! .config(function (RestangularProvider) { RestangularProvider.setBaseUrl('/api'); }) ! .factory('Exchange', function (Restangular) { return { getConversion: function () { return Restangular.all('exchange'); } }; })
    • 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!
    • But wait! Data! from rest_framework import viewsets from doge.models import DogeConversion ! class DogeConversionViewSet(viewsets.ModelViewSet): model = DogeConversion
    • Gotchas • Django and Jinja templates clash .config(function ($interpolateProvider) { $interpolateProvider.startSymbol('[['); $interpolateProvider.endSymbol(']]'); })
    • Gotchas • Django and Jinja templates clash • CSRF tokens .config(function ($httpProvider) { var csrfToken = getCsrfToken(); // Implementation-dependent $httpProvider.defaults.headers.common['X-CSRFToken'] = csrfToken; })
    • Gotchas • Django and Jinja templates clash • CSRF tokens • Template partials
    • Jeff Schenck CTO & Co-Founder ! www.chewse.com @jeffschenck ! code github.com/jeffschenck/talk-2014-02-python-angularjs slides www.slideshare.net/jmschenck/angular