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

Check the Demo

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”):

Check the Demo Part 2

 

Version 1:

Check the Demo Part 1

 

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.