Flask & AngularJS

[Alexandru Geana]

Hello everybody, I was wondering if any of you guys is using Flask as a backend with AngularJS. I tried to find some examples on how to do that but nothing that I found was really helpful. I am interested on how to combine these two, on the project structure an some basic CRUD operations.

Any help will be much appreciated. Thank you!

[Oriol López]

Hello, I did this application some time ago: https://github.com/Mithrandir0x/flaskmap

It's a web application that allows to edit POI files from TomTom navigators. Both the front and back-end are quite simple, and it's more of an experiment using both frameworks (that I enjoyed using them).

I hope you don't find this as some kind of spam or self-advertisement

[Alexandru Geana]

Funny footnote. Thank you Oriol. It's a good starter, I'll play with it too see how you structured the files and connected both frameworks.

[Hugo Schmitt]

You can learn from this document as if you were using jQuery: http://flask.pocoo.org/docs/patterns/jquery/. 

HTH.

[Tharshan]

I am using Flask as my backend, currently I use it for search only but later on it will also be extended to include API endpoints for CRUD operations. There is nothing special about using Flask I would say, you use a function to output some data. If its not already in json format, use the jsonify decorator. Then I just use the $http service in angular to get the response of that API and do whatever.

You are also asking about project structure, I think I am not really at that stage. Since I use yeoman to watch the angular files, and it has things like autoreloading etc so quite helpful in development. I just run the python server along side it when I need the API. However the files are in the same folder, and none of them clash. 

[Jeremy Howard]

I have a complete end-to-end tutorial, including a section showing how to use Flask (in particular, using Flask-Restless, which makes it much easier). Here it is!:

http://jphoward.wordpress.com/2013/01/09/intermissionrest-api-in-python-with-flask-restless/

[Sangram Kapre]

Even I am looking for the same thing. I have learned about angularjs through some tutorial and I know how to create a RESTful web service using Python Flask. But I don't know how to make these two work together. I am thinking of keeping the structure of my web application same as that of angular-seed project on GITHUB. But now sure how to write python  files that accept and fulfill the http requests made at front ends. Any help on this topic is much appreciated. Thanks you all.

[Carsten Senger]

Am 18.09.2013 15:44, schrieb Sangram Kapre:
> Even I am looking for the same thing. I have learned about angularjs
> through some tutorial and I know how to create a RESTful web service using
> Python Flask. But I don't know how to make these two work together. I am
> thinking of keeping the structure of my web application same as that of
> angular-seed project on GITHUB. But now sure how to write python files
> that accept and fulfill the http requests made at front ends. Any help on
> this topic is much appreciated. Thanks you all.

In plain angular you can use $http, which does not expect anything, or
you can use $resource. $resource expects a certain (configurable) URL
layout, but is agnostic about the content. If you want to use $resource
you should start with angular 1.2(rc2) where it returns a promise.
Depending on your api you will be fine with a service that uses $http or
$resource.

There are some more feature rich REST-libs for angular. I couple
flask-restless with restangular. Restangular gives you an api to access
sub resources and works really well. It expects a different result
format and provides hooks to rewrite the received JSON to match it.

This is how I configure Restangular. It's mostly taken from a blog post
that I read back then, so kudos to the unknown writer.

angular.module('whateverApp', ['ngRoute', 'restangular'])
.config(function ($routeProvider, RestangularProvider) {

// configure restangular
RestangularProvider.setBaseUrl('/api');

// configure the response extractor for each request
RestangularProvider.setResponseExtractor(function(response, operation) {
// This is a get for a list
var newResponse;
if (operation === 'getList') {
// Return the result objects as an array and attach the metadata
newResponse = response.objects;
newResponse.metadata = {
numResults: response.num_results,
page: response.page,
totalPages: response.total_pages
};
} else {
// This is an element
newResponse = response;
}
return newResponse;
});


..Carsten

> On Monday, January 21, 2013 6:03:53 AM UTC+5:30, Alexandru Geana wrote:
>>
>> Hello everybody, I was wondering if any of you guys is using Flask as a
>> backend with AngularJS. I tried to find some examples on how to do that but
>> nothing that I found was really helpful. I am interested on how to combine
>> these two, on the project structure an some basic CRUD operations.
>>
>> Any help will be much appreciated. Thank you!
>>
>

--
Carsten Senger - Schumannstr. 38 - 65193 Wiesbaden
sen...@rehfisch.de - (0611) 5324176
PGP: gpg --recv-keys --keyserver hkp://subkeys.pgp.net 0xE374C75A

[johntom]

Hi,

Darrell Silver, Co-founder of Thinkful mentioned that they used Flask in last nights nyc meetup.

HTH

John

[Craig Beck]

I've been using AngularJS with a Python service -- initially just Werkzeug and now Flask. I bootstrapped the project using the yeoman angular generator `yo angular` as the initial project structure. This has all the client side code in app/ and uses grunt.js to build the css, concatenated js etc to dist/ and gives me all the infrastructure for testing, building and auto-reloading of client side code which is awesome. On the Flask side of things I set up the app to have a default production mode that serves the static files from dist/ (i.e. the processed, optimized client code) and a --develop mode that serves its assets from the app/ directory (i.e. all the individual js files for controllers, libs, components, css etc). I suggest using the Werkzeug SharedDataMiddleWare to wrap your flask app and deal with serving assets from dist/ or app/. If the middleware doesn't serve the request its passed down to the flask app which then just becomes all your api endpoints. The one route you have to  define in your Flask app is the root '/' index of the site to serve your index.html that is your angular app.

On Sunday, January 20, 2013 4:33:53 PM UTC-8, Alexandru Geana wrote: