ng.clock

AngularJS 1.X clock module with customisable circular analog and digital clock

Getting started

First You need to install the ng.clock module as a dependency for Your project via npm:

npm i -s ng.clock

Second You need to add AngularJS 1.X and ng.clock references to Your project:

<script src="node_modules/angular/angular.js"></script>
<script src="node_modules/ng.clock/index.js"></script>

Third You need to simply add the ng.clock module as a dependency to Your app:

angular.module('myApp', ['ng.clock'])

Then You can finally use the directives to add either the analog clock or the digital clock to Your project:

<digital-clock></digital-clock>
<!-- or -->
<analog-clock></analog-clock>

Customising

Both of these directives have some attributes to modify how the clock looks like

The digital clock

By default the digital clock has only hours and minutes displayed and the colon in between them is used to reference the seconds passing by blinking.

If You want to also display the seconds as numbers, set the seconds attribute true:

<digital-clock seconds="true"></digital-clock>

This will stop the colon blinking and instead will append the seconds to the end.

The analog clock

By default the analog clock has only hours and minutes hands visible and the default color for everything is black.

You can change the colors of each of the hands and the number dots separately with hour-color, min-color, sec-color and num-color.

<analog-clock hour-color="blue" min-color="#aabbcc" sec-color="red" num-color="green"></analog-clock>

You could also change both main hands colors at the same time with main-hands-color.

<analog-clock main-hands-color="navy" sec-color="red"></analog-clock>

Also You could turn the seconds hand on by setting the attribute sec-hand

<analog-clock sec-hand="true"></analog-clock>

The seconds hand is turned on by either the parameter sec-hand or by setting the color for the seconds hand with sec-color.

powered by 3dtech