angular-odometer-js

Angular.JS wrapper for Hubspot Odometer

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
angular-odometer-js
1930.1.26 years ago8 years agoMinified + gzip package size for angular-odometer-js in KB

Readme

Bower version NPM version
Build Status Code Climate
angular-odometer
Angular.JS directive for Hubspot odometer.
Copyright (C) 2014, Sebastian Wallin

Requirements

  • AngularJS (http://angularjs.org)
  • Odometer (http://github.hubspot.com/odometer/docs/welcome/)

Install with Bower

bower install angular-odometer-js --save

Install with NPM

npm install angular-odometer-js --save

Usage

Include angular-odometer.js in your application, as well as the odometer.js and the default theme CSS file
<script src="components/odometer/odometer.js"></script>
<script src="components/angular-odometer/dist/angular-odometer.js"></script>

<link rel="stylesheet" href="components/odometer/themes/odometer-theme-minimal.css"/>

Add the module ui.odometer as a dependency to your app:
var app = angular.module('app', ['ui.odometer']);

Then use the directive on a tag of choice tag and it will convert it to a odometer for you. Examples:
<span odometer="'5'">

<span odometer="visitors">

<span odometer="visitors" odometer-options="{theme: 'digital', duration: 3000}">

Configuration

The options that are sent along to Odometer can be set either directly in the directive as seen above with odometer-options hash or configured as default parameters via the odometerOptionsProvider:
angular.module('ui.odometer').config([
  'odometerOptionsProvider', function(odometerOptionsProvider) {
    odometerOptionsProvider.defaults = {
      duration : 3000,
      theme    : 'digital'
    };
  }
]);

All the available options can be seen over at the Odometer docs

License

MIT