angular-counter

WebJar for angular-counter

License

License

MIT
Categories

Categories

Github Development Tools Version Controls Angular User Interface Web Frameworks
GroupId

GroupId

org.webjars.npm
ArtifactId

ArtifactId

github-com-indrimuska-angular-counter
Last Version

Last Version

0.2.0
Release Date

Release Date

Type

Type

jar
Description

Description

angular-counter
WebJar for angular-counter
Project URL

Project URL

http://webjars.org
Source Code Management

Source Code Management

https://github.com/indrimuska/angular-counter

Download github-com-indrimuska-angular-counter

How to add to project

<!-- https://jarcasting.com/artifacts/org.webjars.npm/github-com-indrimuska-angular-counter/ -->
<dependency>
    <groupId>org.webjars.npm</groupId>
    <artifactId>github-com-indrimuska-angular-counter</artifactId>
    <version>0.2.0</version>
</dependency>
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-indrimuska-angular-counter/
implementation 'org.webjars.npm:github-com-indrimuska-angular-counter:0.2.0'
// https://jarcasting.com/artifacts/org.webjars.npm/github-com-indrimuska-angular-counter/
implementation ("org.webjars.npm:github-com-indrimuska-angular-counter:0.2.0")
'org.webjars.npm:github-com-indrimuska-angular-counter:jar:0.2.0'
<dependency org="org.webjars.npm" name="github-com-indrimuska-angular-counter" rev="0.2.0">
  <artifact name="github-com-indrimuska-angular-counter" type="jar" />
</dependency>
@Grapes(
@Grab(group='org.webjars.npm', module='github-com-indrimuska-angular-counter', version='0.2.0')
)
libraryDependencies += "org.webjars.npm" % "github-com-indrimuska-angular-counter" % "0.2.0"
[org.webjars.npm/github-com-indrimuska-angular-counter "0.2.0"]

Dependencies

compile (2)

Group / Artifact Type Version
org.webjars.npm : angular jar [1.4.3,1.5)
org.webjars.npm : jquery jar [1.7.1,1.8)

Project Modules

There are no modules declared in this project.

Angular Counter

Join the chat at https://gitter.im/indrimuska/angular-counter

Angular Counter is a directive to animate number increment/decrement.

Check out the demo page at http://indrimuska.github.io/angular-counter.

Angular Counter

Dependencies

Installation

Get Angular Counter from npm, bower or git:

  npm install angular-counter
bower install angular-counter-animation
  git clone   https://github.com/indrimuska/angular-counter.git 

Update your HTML file:

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="./js/angular-counter.js"></script>

And your AngularJS module:

var app = angular.module('MyApp', ['counter']);

Usage

<!-- `counter` directive can be used as: Element / Class / Attribute -->
<div    class="counter"
        value="ctrl.myValue"
           to="ctrl.myTarget"
     duration="ctrl.myDuration"
       effect="ctrl.myEffect"
       finish="ctrl.counterFinish()"> {{ ctrl.myValue | number:0 }} % </div>

<!-- bind counter value anywhere -->
<span ng-bind="ctrl.myValue"></span>

INFO: Animation starts every time the attribute to changes.

Directive examples: http://plnkr.co/edit/d1KPDa?p=preview

Service

Angular Counter directive makes use of a built-in service $counter with a single function .count(..) that requires the following parameters:

Parameter Type Description
object object Object containing the number to animate.
property string Property of object to be updated.
from float Initial number.
to float Target number to reach.
duration integer Duration of the animation in ms.
effect string Effect name.
step function Callback after each animation step.
Remember to $apply the scope!
finish function Callback at the end of the animation.

License

Copyright (c) 2015 Indri Muska. Licensed under the MIT license.

Versions

Version
0.2.0