Ionic and AngularJS Timer App

As I work on several projects I figured maybe a timer app that I could add new projects, put in a time and have it alert me when its over. So I started with the very good sample code here: http://goo.gl/DJR0En from siddii and was easily able to adapt the array of jobs to include a bit of editing as well as adding a stop and remove button. I bumped up the interface a bit using Ionic Cards. But, I feel the interface could be better. Maybe swipe cards for each timer, a little animation etc.  Not too bad for the few hours I put in to learn Ionic and AngularJS.

The video of the app in action can be seen here: http://youtu.be/8KX8pa-dtZs

More Ionic

So, playing around with Ionic a bit more I decided to pull the initial data from the server and then store that onto the device using local storage, a technique I have used a lot in the past. It worked well except for a problem when using the ng-repeat. It seems that angular adds a hash key to the array to keep track of them The problem was when reading this back from local storage it had a repeating key, which broke the repeater. After much searching on removing these to no avail I finally found out how to stop it. In the hg-repeat you have to add a ‘track by ‘ that angular can use to keep track of the repeater. This allowed it to stop adding the hash key and breaking the app.

You can see the current result here: http://cincyplanet.com/ionic

It loads the first time from the server. Then saves that to local storage. This allows you to add new friends and save them on the device. Currently you cannot delete a friend. This is due to using the Ionic template set us to read the id number that has to correspond to the array position. I plan to change this to allow deleting of the friends, just not sure the best way to do it as of this writing.