Python for AngularJS
jmschenck
19,737 views
15 slides
Feb 12, 2014
Slide 1 of 15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
About This Presentation
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 ...
Slide Content
Python for AngularJS
AngularJS.$inject(Python)
AngularJS.$inject(Python)
Huh? Angular?
•JavaScript framework for SPAs
•“Extends” HTML vocabulary
•Controllers, services, templates
•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>
<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
•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;
});
});
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
•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'
)
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!
•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');
}
};
})
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!
•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
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(']]');
})
•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;
})
•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
•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
CTO & Co-Founder
!
www.chewse.com
@jeffschenck
!
code github.com/jeffschenck/talk-2014-02-python-angularjs
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 19,737
- Slides 15
- Favorites 21
- Age 4309 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
30 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
32 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
30 views
14
Fertility awareness methods for women in the society
Isaiah47
28 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
26 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
28 views