6

I want to develop a web app with flask(python) at server side and angularjs(javascript) at client side. I checked out the /flask-angular-seed project on github but it is same as the /angular-seed project. It does not contain any support for flask framework. I am new to flask. How to make flask and angular work together as server-client? I know how to create a web service using flask, and also I went through angular tutorial. But I am confused how to make these two work together(like what http request should be called and how flask receives and responds to it).

exAres
  • 4,806
  • 16
  • 53
  • 95
  • Possible duplicate of [Typical Angular workflow and project structure with python flask](http://stackoverflow.com/questions/11522151/typical-angular-js-workflow-and-project-structure-with-python-flask) – Rod Sep 18 '13 at 13:50
  • Yes Rod. I have exactly the same question that you mentioned in your comment. But I am still unable to figure out the solution. I think I have to add one app.py file that will handle the requests from frontend. But I still am confused in silly things like why there is routing both in frontend (angularjs) and backend (flask)? Assume that I want to get one request from frontend, process it and send back the response (some json, e.g.), how would one achieve that? I am sorry but I am very new to web development. – exAres Sep 18 '13 at 14:01

1 Answers1

7

The way I do it is to have a single route for the interface (eg /) that will load up the main html template. That template then references the js for your angular app in the static folder.

Then I create routes for the various interaction points (in my case it's rest-y) that angular talks too. I use an angular module called restangular to make that easier / cleaner. My routes return everything in json that can then be directly used.

I also set up and extra route so that /blah/whatever will also route through to the main interface. I ignore the path and once the angular js has loaded, the router (in angular) will look at the path and map it to the correct interface route.

@app.route('/<path:path>')
@app.route('/')
def admin(path=None):
    return render_template('angular_interface.html')

Basically - for the interface I get flask out of the way completely.

EDIT: Folder-wise you might have something like:

__init__.py
api
api/__init__.py
api/resources.py
api/views.py
static/interface/css/style.css
static/interface/js/app.js
static/interface/js/other_modules_etc.js
static/shared/js/angular.js
static/shared/js/restangular.js
templates/interface.html

In my __init__.py I have the routing structure described above (and the Flask app stuff).

My interface.html template looks like the following.

<html>
<head>
  <title>Blah</title>
  <link rel="stylesheet" href="{{ url_for('static', filename='interface/css/style.css') }}"/>
  <script src="{{ url_for('static', filename='shared/js/angular.js') }}"></script>
  <script src="{{ url_for('static', filename='shared/js/restangular.js') }}"></script>
  <script src="{{ url_for('static', filename='interface/js/app.js') }}"></script>
</head>
<body>
  {% raw %}
  <div ng-app="blah" ng-cloak>
    <div ng-controller="BlahCtrl" class="sidebar">
    </div>
  </div>
  {% endraw %}
</body>
</html>
Aidan Kane
  • 3,856
  • 2
  • 25
  • 28
  • Hey Aidan. Can you please show me your directory map (output of 'tree' on your app folder) too? So that it might help me to structure my web application. Thanks. – exAres Sep 18 '13 at 13:05
  • 1
    I've updated with a simplified outline of how I layout the structure. Let me know if you need any more guidance. – Aidan Kane Sep 19 '13 at 09:33
  • Hey Aidan. Thanks for the reply. Could you please give me your email id so that I can ask you my specific doubts in mail(I mean, if you are willing to help me there)? Thanks. – exAres Sep 19 '13 at 10:25
  • 2
    I'd be happy to try to help. Not sure if my email in my profile is viewable, if not it's my first and last name together at that google based email. – Aidan Kane Sep 20 '13 at 07:38