How To Make A Timer/Stopwatch Using AngularJS

I’ve got some leeway pushing Khrunus off the ground.  I’ve always been successful using JavaScript’s timing functions but since Khrunus would primarily be built-in in AngularJS. I have to research a way to reuse my timing snippets into proper Angular code.  To study, I built a simple angular app:

Problem

How to use AngularJS to make a time related app, in this case a timer for logging elapsed time?

What I need

Before I started this little venture, I need to detail the parameters of the experiment.

Firstly,  I need to layout my application in two sections. The top section will show a digital clock face and a button to toggle(start or stop) the clock. The bottom section will be a table showing start and end times, as well as the total duration. To know that the application is successful, start and end times should be logged. Using those values I can compute for the duration.

We have two modes; an idle state,”stopped” and an active mode,”started”. We need to consider that when coding the helper functions.

Solution

Firstly, we start with a basic AngularJS template. Please note I am assuming you have at least some experience working with HTML, Javascript and AngularJS.

I need two sections so I make two main DIVs.

Next in DIV 1,  we add another div to serve as the container for the timer digits and a button.

Next in DIV #2, we format a table with a header and three columns; “Start”, “End” and “Duration(secs)” correspondingly.

What we have now is not very pretty, we’re going to fix that in a bit. Create a CSS file, call it “app.css”. Let’s style everything as follows,

Looking good! 🙂  Now to add the functionality we need. Let’s start with some data binding and a basic controller.

HTML

Javascript

Awesome! For the button, we’re going to use that as a trigger to toggle between modes as well as an indicator to show the user what’s happening.

Now, we can switch between modes, using the button data {{mode}} as a toggle flag. Now to the meat of the application, as a reference I’m going to use this basic clock code I use when I need digital clock displays.

The hero of this application is AngularJS’s $timeout service. The $timeout service gives the user a wrapper for window.setTimeOut. So it still acts like setTimeOut but with the code organization and excellent exception handling that AngularJS provides. Our code should follow this format

We build the clock functionality via a $timeout statement, but first let’s refactor our controller and add two functions to handle the Start and Stop modes.

Now for the $timeout service,

You can see that we used the timeout service to recursively call the StartTimer function. When you call $timeout, just as window.setTimeOut, you create a timing object that we then save to our variable tmPromise. We’ll get into more of that later just take a note of it. Since we’re really making a stopwatch and not a clock that tells the current time, let’s recode. We need the current time so we use date.getTime(). Adding two more variables timeStart and timeEnd. When we button is clicked, we save the time to timerStart. Every time the timeout completes and we call StartTimer, the value of $scope.timeEnd changes. We then subtract $scope.timeStart to get the current elapsed time in milliseconds. We add some normalization code and we end up with this,

Now for the stopTimer function, issuing the cancel method will stop the $timeout service. Remember the variable we made earlier, tmPromise. We will use that as the parameter for our cancel call illustrated below. We then collect the start and end times and push that into the history array.

Conclusion

Yay, we just made an AngularJS timer widget. Adding a service to insert a line in our table we end up with this.

This is a very simple implementation. One that did not need a unit test but if we wanted to, we can use $timeout.flush() method. More details from the reference links below.

See the app in action here

** UPDATE: I made a directive check it out here

Download all the source here.

References

  • https://docs.angularjs.org/api/ng/service/$timeout
  • https://docs.angularjs.org/api/ng/filter/date

Comments

  1. Ron Kadarishko

    I relish, lead to I discovered exactly what I was taking a look for. You’ve ended my 4 day long hunt! God Bless you man. Have a great day. Bye

    1. cabadmin says:

      Thank you Ron! Checkout the other posts.

  2. Mahmoud Heidarian

    Attractive section of content. I just stumbled upon your weblog and in accession capital to assert that I acquire in fact enjoyed account your blog posts. Any way I’ll be subscribing to your feeds and even I achievement you access consistently rapidly.

    1. cabadmin says:

      Thank you! Appreciate your words of encouragement.

Leave a Reply

Your email address will not be published. Required fields are marked *