Python for AngularJS
21 likes19,740 views
The document discusses integrating Python with AngularJS for building a web application that converts Bitcoin to Dogecoin. It outlines the process of creating an AngularJS service to fetch exchange rates from a Python API endpoint and addresses various challenges like URL management, CSRF tokens, and template clashes. The presentation is led by Jeff Schenck, CTO of Chewse, with links to additional resources and code examples.
![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>](https://image.slidesharecdn.com/angular-140212172042-phpapp02/85/Python-for-AngularJS-3-320.jpg)
![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;
});
});](https://image.slidesharecdn.com/angular-140212172042-phpapp02/85/Python-for-AngularJS-5-320.jpg)
![But wait! Data!
angular.module('app', [])
!
.config(function (RestangularProvider) {
RestangularProvider.setBaseUrl('/api');
})
!
.factory('Exchange', function (Restangular) {
return {
getConversion: function () {
return Restangular.all('exchange');
}
};
})](https://image.slidesharecdn.com/angular-140212172042-phpapp02/85/Python-for-AngularJS-9-320.jpg)
![Gotchas
•
Django and Jinja templates clash
.config(function ($interpolateProvider) {
$interpolateProvider.startSymbol('[[');
$interpolateProvider.endSymbol(']]');
})](https://image.slidesharecdn.com/angular-140212172042-phpapp02/85/Python-for-AngularJS-12-320.jpg)
![Gotchas
•
Django and Jinja templates clash
•
CSRF tokens
.config(function ($httpProvider) {
var csrfToken = getCsrfToken(); // Implementation-dependent
$httpProvider.defaults.headers.common['X-CSRFToken'] = csrfToken;
})](https://image.slidesharecdn.com/angular-140212172042-phpapp02/85/Python-for-AngularJS-13-320.jpg)
More Related Content
![From Curiosity to ROI — Cost-Benefit Analysis of Agentic Automation [3/6]](https://cdn.slidesharecdn.com/ss_thumbnails/session-3-250903141006-a3917e1a-thumbnail.jpg?width=560&fit=bounds)
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