In the past month or so I've been endeavouring to make my first proper single page web application that I can describe with all those amazing buzzwords you hear about if you're at all involved in software development (e.g. RESTful APIs, MVC Javascript app frameworks, responsive web design).

My aim is to build a functioning web application that I can note down my moods on any given day and track them over time to give me a few pretty graphics.

It has taken me quite awhile to pull everything together, and I'm still working on it as we speak but I've got a basic framework that I can build on now.

I decided to go with AngularJS for the client-side code, and the Flask Python library for my API. All data that is displayed to the user is collected by AngularJS through object endpoints that I've created in Flask using Flask-Restless.


The developers of SQLAlchemy (a database-independent DBMS for Python) have a plugin for Flask that allows the user to access database records as individual Pythonic objects which is really neat. Pass these objects into Flask-Restless and you have ready made object endpoints that you can access from /api/Object/:objectid:. This is really fricking neat. I decided to set my app up with just a User and a set of Entries, which would be associated with the User through a one-to-many relationship, which Flask and SQLAlchemy set up rather nicely.
class User(db.Model):
  id = db.Column(db.Integer, primary_key=True)
  username = db.Column(db.String(80), unique=True)
  email = db.Column(db.String(120), unique=True)
  entries = db.relationship('MoodEntry', backref='user', lazy='dynamic')
  def __init__(self, username, email):
    self.username = username = email
  def __repr__(self):
    return '<User %r>' % self.username
class MoodEntry(db.Model):
  id = db.Column(db.Integer, primary_key=True)
  user_id = db.Column(db.Integer, db.ForeignKey(''))
  score = db.Column(db.Integer)
  latitude = db.Column(db.Float)
  longitude = db.Column(db.Float)
  timestamp = db.Column(db.DateTime, default=datetime.datetime.utcnow())
  expression = db.Column(db.Integer)
  def __init__(self, score, expression, latitude, longitude):
    self.score = score
    self.expression = expression
    self.latitude = latitude
    self.longitude = longitude
  def __repr__(self):
    return '<MoodEntry %r>' %
A quick note: when you link a DBO with another in a one-to-many relationship, it is unclear how to add new "many" objects using RESTful verbs. The Flask-Restless docs don't really cover this well and I needed to rummage around to find the actual data structure to pass through. Here's an example for adding an entry to the User: Endpoint URL: /api/User/:userid: **JSON encoded request data:**
{"entries": {
  "add": [
      {"score" : "35", "expression" : "bad"}


Client-side, I just have an AngularJS app hosted on the /angular endpoint from my Flask server. The app fetches all data through the use of services. I did this through the code fragment that I found on Stack:

@app.route('/angular/ ') def angular_static(filename): return send_from_directory(app.config['ANGULAR_STATIC_PATH'], filename)

All front-end files are stored in *ANGULAR_STATIC_PATH* and served through Flask. It's a pretty neat setup and means that I don't have any cross-origin request issues.

I haven't bothered implementing authentication yet, which I probably should, but if I do it will follow this helpful guide which has already been broadcasted widely around AngularJS circles.

I have also made use of the Foundation front-end framework; it's been challenging getting this working in tandem with AngularJS. I found a semi-functional port of Foundation Javascript components that work in an 'Angular' way as directives. I say semi-functional because it's not the full Foundation workflow that I wish to use with auto-compilation of Sass, and I had to wrangle together the Angular-Seed project with my Foundation website codebase that I'd already written.

Challenges I still face

There's a few things that I'm still unsure about that are unclear either in best-practice guides on the internet or on AngularJS' official documentation.

Most sources on the internet suggest that you have very lean controllers that don't store many functions but merely contain a baseline to call other functions. This makes sense to some extent but I am confused as to where you then store all these functions. My confusion mainly lies in how to process service data coming in from a AJAX call, after interacting with the 'promise' interface in the controller. Should the data processing (making it presentable) be done in the service? The controller? Another layer?

How to most effectively process large amounts of raw data in Javascript; currently I analyse all data in raw Javascript by looping through each entry and collecting data on each attribute, and then creating averages for all entries; at some stage surely this has a degradative effect on the user experience. It's also a bit messy and results in a lot of spaghetti code. Further to this, how to best implement graphs into my controllers in an "Angular" way.