AngularJS Digital Clock using a Directive

Submitted by nurhodelta_17 on Thursday, January 25, 2018 - 16:50.

Add Angular JS

First in our html, we add our Angular JS and in this tutorial, I've used CDN so you need internet connection for it to work.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
 <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

You can place the script either in your html tag or at the bottom of body tag.

Creating our HTML

Next step is to create the place where we show our digital clock.

<div class="row">
        <div class="col-sm-4 col-sm-offset-4 text-center">
                <h3>Time now is:</h3>
                <my-clock></my-clock>
        </div>
</div>

Notice the my-clock tag? That is how we show our custom directive. That means that the name of our directive is myClock.

Adding our Angular Code

Lastly, we add our angular js scripts.

var myApp = angular.module('myApp', []);
 
myApp.directive('myClock', function($timeout, dateFilter) {
  return {
    restrict: 'E',
    link: function(scope, elmt) {
                (function updateClock() {
                        elmt.text(dateFilter(new Date(), 'hh:mm:ss a'));
                        $timeout(updateClock, 1000);
                })();
        }
        };
});

In here, we have set our clock filter as hh:mm:ss a. You can visit this link for more reference on angular date filter. That ends this tutorial. Happy Coding :)