blog /

Countdown timer concept with AngularJS – Part1

countdown timer demo

In this experiment, we proved how fast you can build a very simple, custom countdown timer with AngularJS.

[button2 type=”default” size=”large” url2=”http://testing.2gika.si/article-angularjs-countdown-timer-part1/”]Check the Demo[/button2]

This still isn’t a MVP (minimal viable product) but merely a concept, from which we will build the final and complete version of the Countdown timer.

 

This is a new version (from article “part2″):

[button2 type=”default” size=”large” url2=”http://testing.2gika.si/article-angularjs-countdown-timer-part2/”]Check the Demo Part 2[/button2]

 

Version 1:

[button2 type=”default” size=”large” url2=”http://testing.2gika.si/article-angularjs-countdown-timer-part1/”]Check the Demo Part 1[/button2]

 

This experiment will be done in 4 parts and the final version will contain:

  • Input field for hours, minutes and seconds that the user will choose
  • Message and “beep” sound at the end of the countdown

Stay tuned ’till next time, when the countdown will be more useful than this version.

The code in JS file:


 var myModule = angular.module("countdownApp", [/* No Dependency Injection */]);

myModule.controller("counterCtrl",['$scope','$timeout', function($scope,$timeout){

//Number to count from

$scope.counter = 100;
var stopped;

//timeout function
//1000 milliseconds = 1 second
//Every second counts

$scope.countdown = function() {
    stopped = $timeout(function() {
       console.log($scope.counter);
     $scope.counter--;
     $scope.countdown();
    }, 1000);
  };

$scope.stop = function(){
   $timeout.cancel(stopped);

    } 

}]);

Till next time, take care.