An AngularJS directive for countUp.js
CoffeeScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.idea
bower_components/countUp.js
dist
examples
src
.gitignore
Gruntfile.coffee
README.md
bower.json
countup-angularjs-directive.iml
package.json

README.md

Original blog post here: http://www.andrewboni.com/2014/09/03/a-countupjs-angularjs-directive/

About

This is an AngularJS directive for the countUp.js library.

Dependencies

  • AngularJS
  • countUp.js

Installation

Install via Bower:

bower install -S countup-angularjs-directive

or NPM:

npm install countup-angularjs-directive

Then, add the module name to your app.js or app.coffee file:

modules = [
  ...
  'ngCountup'
  ...
]
angular.module('myApp', modules).run(...)

...and include the file dist/countup-angularjs-directive.min.js somewhere on your page, after angular and countUp.

Like so:

   <head>
       <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
       <script src="js/app.js"></script>
       <script src="../bower_components/countUp.js/countUp.min.js"></script>
       <script src="../dist/countup-angularjs-directive.min.js"></script>
   </head>

Usage

<h1 count-up id="opens" ng-model="dynamicStats.opens"></h1>

Note that you need the attribute count-up, ng-model, as well as an id. The count-up attribute is self explanatory, while the ng-model is the numerical value to apply the countUp effect to. The id is necessary for countUp itself- it doesn't matter what the name of the id is.

Optionally, you can configure the number of decimals and the animation length (in seconds) like so:

<h1 count-up id="opens" ng-model="dynamicStats.opens" data-num-decimals="2" data-animation-length="10"></h1>

This directive is a work in progress- there are probably a ton of optimizations that can be made. If you have any suggestions, please submit a pull request!

Development

Run grunt dev to build/uglify the dist files from src and watch src files for changes. Run grunt build to merely build and uglify from src.

Server

Run http-server to get a lightweight server up and running.

#MIT License