This repo contains an Angular Directive for displaying a ticking clock. The focus of this project was to create
a lightweight ticking clock which does not cause any additional digest cycles by using $interval
or $timeout
.
This is important especially for large applications with many watchers, as digest cycles could potentially cause the
whole Angular application to evaluate all of their watchers.
This directive is compatible with Angular 1.4 to 1.6.
You can install this software via
npm install angular-ticking-clock
ToDo: We will provide this module on bower soon!
Include the JavaScript File:
<script src="node_modules/angular-ticking-clock/dist/angular-ticking-clock.js"></script>
or use the minified version
<script src="node_modules/angular-ticking-clock/dist/angular-ticking-clock.min.js"></script>
In your Angular JS Application you have to inject angular-ticking-clock
as a module:
var app = angular.module('app', [
// ... your dependendies
'angular-ticking-clock'
]);
You must use this directive as an element! This is because we need exclusive access on the DOM of this element to modify it.
<div>
<!-- Clock without any config -->
<ticking-clock></ticking-clock>
</div>
<div>
<!-- Clock with a date-time-format -->
<ticking-clock date-time-format="yyyy/mm/dd HH:mm:ss"></ticking-clock>
</div>
<div>
<!-- Clock with a date-time-format which automatically updates -->
<ticking-clock date-time-format="yyyy/mm/dd HH:mm:ss" update-interval="1000"></ticking-clock>
</div>
You can use any date time format supported by the Angular date filter.
We are using the MIT License. Feel free to use this little project as you like, as long as you keep a copy of the license.
Feel free to fork this repo and create pull-requests. Please always include an example with your pull request!