How I do this is to have one route for an interface (e.g. /) that will load the main html template. This template then references js for your angular application in a static folder.
Then I create routes for various points of interaction (in my case it is rest-y), of which angular also speaks. I use the angular module called restangular to make it easier / cleaner. My routes return everything in json, which can then be used directly.
I also configured and added an additional route so that / blah / everything also worked out to the main interface. I ignore the path, and as soon as angular js loads, the router (in angular) will look at the path and map it to the correct interface.
@app.route('/<path:path>') @app.route('/') def admin(path=None): return render_template('angular_interface.html')
Basically - for the interface I completely close the flask.
EDIT: folder, 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 application app).
My interface.html template is as follows.
<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>