AngularJS - Single Timer
- - -AngularJS - Single Timer
+ + +<!DOCTYPE html> <html> @@ -160,22 +155,22 @@-AngularJS - Single Timer
<br/> </body> </html>
AngularJS - Multiple Timer
- +AngularJS - Multiple Timer
+ -<!DOCTYPE html> <html> @@ -212,22 +207,22 @@-AngularJS - Multiple Timer
</div> </body> </html>
AngularJS - Polling Timers
- +AngularJS - Polling Timers
+ -<!DOCTYPE html> <html> @@ -287,22 +282,22 @@-AngularJS - Polling Timers
<br/> </body> </html>
JQuery Timer
- +JQuery Timer
+ -<!DOCTYPE html> <html> @@ -331,22 +326,22 @@-JQuery Timer
<br/> </body> </html>
Plain JavaScript
- +Plain JavaScript
+ -<!DOCTYPE html> <html> @@ -374,17 +369,17 @@-Plain JavaScript
<br/> </body> </html>
- Introduction
++ Introduction
-- Directives in AngularJS is a powerful way of building - reusable UI components. This simple project will serve as a sample/reference implementation - demonstrating its flexibilities by making it inter-operable across runtime (AngularJS, plain simple - JavaScript & jQuery)
++ Directives in AngularJS is a powerful way of building + reusable UI components. This simple project will serve as a sample/reference implementation + demonstrating its flexibilities by making it inter-operable across runtime (AngularJS, plain simple + JavaScript & jQuery)
-- For basic understanding of how directives work in AngularJS, please head to this developer guide.
-- Basic Example
++ For basic understanding of how directives work in AngularJS, please head to this developer guide.
++ Basic Example
-
- This simple directive <timer /> will start the timer with the default option of
- ticking every 1 millisecond
+ This simple directive <timer /> will start the timer with the default option of
+ ticking every 1 millisecond
-
-
-
- - Timer with hours, minutes & seconds
++ Timer with hours, minutes & seconds
-
- This markup <timer interval="1000">{{hours}} hours, {{minutes}}
- minutes, {{seconds}} seconds.</timer> will run the clock timer ticking every second
+ This markup <timer interval="1000">{{hours}} hours, {{minutes}}
+ minutes, {{seconds}} seconds.</timer> will run the clock timer ticking every second
- {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.
-
-
- - Progressbar Timer
++ Progressbar Timer
-- Timer directive along with Twitter Bootstrap's Progressbar will set the timer - on Progressbar control.
-<timer interval="1000"><div class="progress
- progress-striped active"> <div class="bar" style="width: {{seconds}}%;"></div>
- </div></timer>
+ + Timer directive along with Twitter Bootstrap's Progressbar will set the timer + on Progressbar control.
+<timer interval="1000"><div class="progress
+ progress-striped active"> <div class="bar" style="width: {{seconds}}%;"></div>
+ </div></timer>
-
-
-
-
-
-
-
-
-
- - Countdown Timer
++ Countdown Timer
-
- The countdown timer <timer interval="1000" countdown="100"/>
- will start its countdown from 100 until it reaches 0 by ticking every second
+ The countdown timer <timer interval="1000" countdown="100"/>
+ will start its countdown from 100 until it reaches 0 by ticking every second
- {{countdown}}
-
- - Timer with Interval Event
++ Markup
-- The interval event will fire 'your-named-event' on the $rootScope every interval. -
-- Remember the single quotes around the event name. (Angular needs to know it is a string.)
-
-
- <timer interval="1000" intervalEvent="'event:timer-interval-check-a-thing'">{{intervalEventName}}: {{intervalEventCount}}</timer>
-
-
- <timer interval="3000" intervalEvent="'event:timer-interval-save-document'">{{intervalEventName}}: {{intervalEventCount}}</timer>
-
- {{intervalEventName}}: {{intervalEventCount}}
-
- {{intervalEventName}}: {{intervalEventCount}}
-
- - Markup
+
+ Timer directive can be declared using following options. By default, it will display milliseconds inside
+ span tag. It can also take template string to display user-defined formats.
- Timer directive can be declared using following options. By default, it will display milliseconds inside
- span tag. It can also take template string to display user-defined formats.
- <timer interval="1000" />
- <timer interval="1000">{{hours}} hours, {{minutes}} minutes,
- {{seconds}} seconds, {{millis}} milliseconds.</timer>
-
- <timer interval="3000" intervalEvent="'event:timer-interval-save-document'">{{intervalEventName}}: {{intervalEventCount}}</timer>
-
-
- Attributes
-| - Name - | -- Required - | -- Default value - | -
|---|---|---|
| - interval - | -- false - | -- 1 millisecond - | -
| - countdown - | -- false - | -- | -
| - intervalEvent - | -- false - | -
- The interval event will fire 'event:eventName' on the $rootScope every interval.
- |
-
- Methods
- +<timer interval="1000" />
+
- Following DOM methods can be invoked to timer. Prepend to timer- for scope based
- events when calling from AngularJS controllers.
| - Method name - | -- Description - | -
|---|---|
| - start - | -- Starts the timer - | -
| - stop - | -- Stops the timer - | -
| - resume - | -- Resumes the timer. Will NOT reset the start time - | -
- Events
+<timer interval="1000">{{hours}} hours, {{minutes}} minutes,
+ {{seconds}} seconds, {{millis}} milliseconds.</timer>
+ + Attributes
+| + Name + | ++ Required + | ++ Default value + | +
|---|---|---|
| + interval + | ++ false + | ++ 1 millisecond + | +
| + countdown + | ++ false + | ++ | +
+ Methods
-| - Event name - | -- Description - | -
|---|---|
| - timer-tick - | -- Tick event that gets emitted for every timer tick for specified interval. Please refer to Polling Timer - example for its usage. - | -
- Contributions welcome!
+
+ Following DOM methods can be invoked to timer. Prepend to timer- for scope based
+ events when calling from AngularJS controllers.
| + Method name + | ++ Description + | +
|---|---|
| + start + | ++ Starts the timer + | +
| + stop + | ++ Stops the timer + | +
| + resume + | ++ Resumes the timer. Will NOT reset the start time + | +
+ Events
-- We welcome any or all kinds of contributions! Please submit pull requests or create issues to contribute to this - project :)
-| + Event name + | ++ Description + | +
|---|---|
| + timer-tick + | ++ Tick event that gets emitted for every timer tick for specified interval. Please refer to Polling Timer + example for its usage. + | +
+ Contributions welcome!
+ ++ We welcome any or all kinds of contributions! Please submit pull requests or create issues to contribute to this + project :)
+