Maybe AngularJS is not for everything

In the last couple of nights I was reading the AngularJS documentation. I was planing to 'Angularize' the time reporter app. Lately I've read so much about it that I've got the impression it's for everything. Now I'm backed up a bit on that.


So AngularJS have a great part when it's about interacting with data, continuous update cycle and UI responsiveness. You have your more or less sophisticated data models which will be turned into nice DOM elements.

The reporter application sounds exactly like that. It's a list of actions with times, that you present as a list indeed. During my experiment using it I realized I need to be able to edit the list. Just fixing some minutes if necessary. It turned out this problem might not suit AngularJS that well.

First - it's using JS timestamps in the data structure and shows hour:minute format strings on the UI. I was first thinking of filters - since it's just a way of representing the timestamp. However that's exactly what I would like to keep open for editing. Soon I've got the answer on StackOverflow. I have to create a directive that alters the way AngularJS is handling my model:

app = angular.module 'reporter', []

app.directive 'hourMinute', () ->
  {
    require: 'ngModel',
    link: (scope, element, attr, ngModelCtrl) ->
      ngModelCtrl.$formatters.unshift (val) ->
        date = new Date(val)
        date.getHours() + ':' + date.getMinutes()
      ngModelCtrl.$parsers.push (val) ->
        if /^\d{1,2}:\d{1,2}$/.test val
          parts = val.split ':'
          d = new Date()
          d.setHours(parseInt(parts[0]))
          d.setMinutes(parseInt(parts[1]))
          d.getTime() / 1000
  }

Now the second problem I had is the sync-back part. Whenever you overwrite something we want to send it to the storage department to save it. I'm still not sure how is it working in the Angular way. A listener or a watcher, or maybe just a custom callback. I might have to alter my data structure - depends if the scope in the list loop can preserve my exact data.

That's still ok - but my next problem started to doubt the validity of AngularJS in this case. To be able to represent an action with a time and interval you have to check the next action in line to detect the current action's finish time. Now it's an interesting problem. On the UI you really don't want to do any logic. The only option I could think of is to actually use the 'manufactured' list to be presented - and proxy the updates to the original data array. But that just seems too messy. You have to workaround many parts of the process that otherwise Angular could do.

My next idea is BackboneJS. I will check probably.

---

Peter