Its been a while since I had written any code using AngularJS. I happened to look at one of our earlier fun project that incorporates a count down timer. So I decided to move the timer in to a separate project and make it skinnable.

A timer is a perfect component to make use of AngularJS directive.

AngularJS lets us write our own custom HTML tags using directive. In our example here, I introduced a custom tag <timer>, which takes in duration as one of its input(via attribute).

How cool can it get if we could get a working timer using the below tag?

<timer duration=’30’ autostart=’true’></timer>







For a component like a count-down timer, we would most likely choose SVG or Canvas to build its UI. But the problem here is, its not easy to theme/skin such a component. A natural alternative is CSS3 which is a lot lighter and easier to maintain than SVG or Canvas.

AngularJS templates permits us to add binding even on the style of an element. In our case, we need to set the angle of the moving hand, while the angle is calculated in our timer controller.

The timer emits the following events:

  1. timer_started
  2. timer_stopped
  3. timer_ended

The timer exposes the following methods:

  1. start()
  2. stop()
  3. restart()

TimerHandlerCntrl makes use of all the above. Working demo of the timer can be found here. The project can be forked from github.


ps: How to get the timer filled as the clock ticks down? Reference here.