Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 59 down vote favorite
32

I am pretty new to this whole MV* client-side framework frenzy. It doesn't have to be Angular.js, but I picked it because it feels more natural to me than either Knockout, Ember or Backbone. Anyway what is the workflow like? Do people start with developing a client-side application in Angular.js and then hooking up the back-end to it? Or the other way around by first building the back-end in Django, Flask, Rails and then attaching an Angular.js app to it? Is there a "right" way of doing it, or is it just a personal preference in the end?

I am also not sure whether to structure my project according to the Flask or Angular.js? community practices.

For example, Flask's minitwit app is structured like so:

minitwit
|-- minitwit.py
|-- static
   |-- css, js, images, etc...
`-- templates
   |-- html files and base layout

Angular.js tutorial app is structured like this:

angular-phonecat
|-- app
    `-- css
    `-- img
    `-- js
    `-- lib
    `-- partials
    `-- index.html
|-- scripts
 `-- node.js server and test server files

I could picture a Flask app by itself, and it's fairly easy to see Angular.js app like ToDo List by itself but when it comes to using both of these technologies I don't understand how they work together. It almost seems like I don't need a server-side web-framework when you already have Angular.js, a simple Python web server will suffice. In the Angular to-do app for example they use MongoLab to talk to the database using Restful API. There was no need having a web framework on the back-end.

Maybe I am just awfully confused, and Angular.js is nothing more than a fancy jQuery library so I should use just like I would use jQuery in my Flask projects (assuming I change Angular's template syntax to something that doesn't conflict with Jinja2). I hope my questions make some sense. I mainly work on the back-end and this client-side framework is an unknown territory for me.

share|improve this question
5  
Thanks, this is EXACTLY what I wondered. – Prof. Falken Sep 13 '12 at 21:28

2 Answers

up vote 21 down vote accepted

You can start on either end.

You are right that you probably don't need a full server-side framework with AngularJS. It's typically better to serve static HTML/CSS/JavaScript files, and provide a RESTful API for the back end for the client to consume. One thing that you should probably avoid is mixing server-side templates with AngularJS client-side templates.

If you want to use Flask to serve your files (might be overkill, but you can use it nonetheless) you would copy the contents of "app" from "angular-phonecat" into the "static" folder of "minitwit."

AngularJS is more targeted at AJAX-like applications, whereas flask gives you the ability to do both the older-style web apps as well as create RESTful APIs. There are advantages and disadvantages to each approach, so it really depends what you want to do. If you give me some insights, I might be able to make further recommendations.

share|improve this answer
19  
+1 - but I wouldn't say that Flask is targeted at older-style web apps - it provides all the helpers you need to use it as a web API backend too ;-) There is also Flask-Restless if you want to be able to generate a JSON-serving API for your web app really easily using Flask-SQLAlchemy - just FYI :-) – Sean Vieira Jul 18 '12 at 15:09
Good point! I'm not especially familiar with Flask; thanks for providing some expertise on the subject. – btford Jul 18 '12 at 19:11
3  
also check out our tutorial which shows how to build crud apps with angular and all of the tooling we provide: docs.angularjs.org/tutorial – Igor Minar Jul 24 '12 at 19:46
2  
To me, it seems fair to put the "app" folder from "angular-phonecat" to the static folder. But I think the index.html file should be put into the minitwit templates folder. The css and img folders should be moved to "static". – Nezo Jan 24 at 17:12
up vote 20 down vote

I would start out by organizing the Flask app in the standard structure as follows:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
|-- templates

And as btford mentioned, if you are doing an Angular app, you'll want to focus on using Angular client-side templates and stay away from server-side templates. Using render_template('index.html') will cause Flask to interpret your angular templates as jinja templates, so they won't render correctly. Instead, you'll want to do the following:

@app.route("/")
def index():
    return send_file('templates/index.html')

Note that using send_file() means that the files will be cached, so you might want to use make_response() instead, at least for development:

    return make_response(open('templates/index.html').read())

Afterwards, build out the angularjs part of your app, modifying the app structure so that it looks like this:

app
|-- app.py
|-- static
    |-- css
    |-- img
    |-- js
        |-- app.js, controllers.js, etc.
    |-- lib
        |-- angular
            |-- angular.js, etc.
|-- templates
    |-- index.html

Make sure your index.html includes angularjs, as well as any other files:

<script src="static/lib/angular/angular.js"></script>

At this point, you haven't yet constructed your RESTful API, so you can have your js controllers return predefined sample data (only a temporary setup). When you're ready, implement the RESTful API and hook it up to your angular app with angular-resource.js.

And now you've got the basic setup! Keep on building out your app!

share|improve this answer
2  
This was really helpful. Thanks – Adam Soffer Apr 3 at 4:34

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.