Play games and win money

Maybe AngularJS is not for everything

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 Ive read so much about it that Ive got the impression its for everything. Now Im backed up a bit on that.


So AngularJS have a great part when its 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. Its 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 - its using JS timestamps in the data structure and shows hour:minute format strings on the UI. I was first thinking of filters - since its just a way of representing the timestamp. However thats exactly what I would like to keep open for editing. Soon Ive 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. Im 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.

Thats 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 actions finish time. Now its an interesting problem. On the UI you really dont 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

go to link download