Skip to content

Commit f0e64ce

Browse files
siddiisiddii
committed
timer tick event
1 parent 80451f6 commit f0e64ce

File tree

3 files changed

+105
-2
lines changed

3 files changed

+105
-2
lines changed

‎examples.html

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@
8989
<ul class="dropdown-menu">
9090
<li><a href="examples.html#angularjs-single-timer">AngularJS - Single Timer</a></li>
9191
<li><a href="examples.html#angularjs-multiple-timer">AngularJS - Multiple Timers</a></li>
92+
<li><a href="examples.html#angularjs-polling-timer">AngularJS - Polling Timers</a></li>
9293
<li><a href="examples.html#jquery-timer">jQuery</a></li>
9394
<li><a href="examples.html#plain-javascript">Plain JavaScript</a></li>
9495
</ul>
@@ -213,6 +214,81 @@ <h3>AngularJS - Multiple Timer</h3>
213214
</div>
214215
</section>
215216

217+
<section id="angularjs-polling-timer">
218+
<h3>AngularJS - Polling Timers</h3>
219+
<ul class="nav nav-tabs" id="angularjs-polling-timer-tab">
220+
<li class="active"><a data-toggle="tab" href="#angularjs-polling-timer-source">index.html</a></li>
221+
<li><a data-toggle="tab" href="#angularjs-polling-timer-demo">Demo</a></li>
222+
</ul>
223+
224+
<div class="tab-content">
225+
<div class="tab-pane active" id="angularjs-polling-timer-source">
226+
<pre class="prettyprint linenums">
227+
&lt;!DOCTYPE html&gt;
228+
&lt;html&gt;
229+
&lt;head&gt;
230+
&lt;title&gt;AngularJS Example - Polling Timer Example&lt;/title&gt;
231+
&lt;script src="../angular/angular.min.js"&gt;&lt;/script&gt;
232+
&lt;script src="../app/js/timer.js"&gt;&lt;/script&gt;
233+
&lt;script&gt;
234+
angular.module('MyApp', ['timer']);
235+
function PollingController($scope) {
236+
$scope.timerRunning = true;
237+
$scope.timerConsole = '';
238+
239+
$scope.timerType = '';
240+
241+
$scope.startTimer = function (){
242+
$scope.$broadcast('timer-start');
243+
$scope.timerRunning = true;
244+
};
245+
246+
$scope.stopTimer = function (){
247+
$scope.$broadcast('timer-stop');
248+
$scope.timerRunning = false;
249+
};
250+
251+
$scope.$on('timer-tick', function (event, args) {
252+
$scope.timerConsole += $scope.timerType + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId.$$timeoutId + ', millis = ' + args.millis +'\n';
253+
});
254+
}
255+
256+
PollingController.$inject = ['$scope'];
257+
&lt;/script&gt;
258+
&lt;/head&gt;
259+
&lt;body ng-app="MyApp"&gt;
260+
&lt;div&gt;
261+
&lt;h1&gt;AngularJS - Polling Timer Example using &lt;code&gt;timer-tick&lt;/code&gt; event&lt;/h1&gt;
262+
&lt;div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px"&gt;
263+
&lt;h2&gt;Polling Server every 5 seconds&lt;/h2&gt;
264+
&lt;h3&gt;&lt;timer interval="5000"/&gt;&lt;/h3&gt;
265+
&lt;textarea style="height: 100px;" row=20 cols="200"&gt;{{timerConsole}}&lt;/textarea&gt;
266+
&lt;br/&gt;
267+
&lt;button ng-click="startTimer('poll-server')" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
268+
&lt;button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
269+
&lt;/div&gt;
270+
&lt;br/&gt;
271+
272+
&lt;div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px"&gt;
273+
&lt;h2&gt;Saving Document every 3 seconds&lt;/h2&gt;
274+
&lt;h3&gt;&lt;timer interval="3000"/&gt;&lt;/h3&gt;
275+
&lt;textarea style="height: 100px;" row=20 cols="200"&gt;{{timerConsole}}&lt;/textarea&gt;
276+
&lt;br/&gt;
277+
&lt;button ng-click="startTimer('poll-server')" ng-disabled="timerRunning"&gt;Start Timer&lt;/button&gt;
278+
&lt;button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning"&gt;Stop Timer&lt;/button&gt;
279+
&lt;/div&gt;
280+
281+
&lt;/div&gt;
282+
&lt;br/&gt;
283+
&lt;/body&gt;
284+
&lt;/html&gt;</pre>
285+
</div>
286+
<div class="tab-pane" id="angularjs-polling-timer-demo">
287+
<iframe src="examples/angularjs-polling-timer.html" width="100%" height="350px"></iframe>
288+
</div>
289+
</div>
290+
</section>
291+
216292
<section id="jquery-timer">
217293
<h3>JQuery Timer</h3>
218294
<ul class="nav nav-tabs" id="jquery-timer-tab">

‎examples/angularjs-polling-timer.html

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ <h1>AngularJS - Polling Timer Example using <code>timer-tick</code> event</h1>
3636
<div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px">
3737
<h2>Polling Server every 5 seconds</h2>
3838
<h3><timer interval="5000"/></h3>
39-
<textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
39+
<textarea style="height: 100px;" row=20 cols="80">{{timerConsole}}</textarea>
4040
<br/>
4141
<button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
4242
<button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
@@ -46,7 +46,7 @@ <h3><timer interval="5000"/></h3>
4646
<div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px">
4747
<h2>Saving Document every 3 seconds</h2>
4848
<h3><timer interval="3000"/></h3>
49-
<textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
49+
<textarea style="height: 100px;" row=20 cols="80">{{timerConsole}}</textarea>
5050
<br/>
5151
<button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
5252
<button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>

‎index.html

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -88,6 +88,7 @@
8888
<a href="examples.html#angularjs-single-timer">AngularJS - Single Timer</a></li>
8989
<li>
9090
<a href="examples.html#angularjs-multiple-timer">AngularJS - Multiple Timers</a></li>
91+
<li><a href="examples.html#angularjs-polling-timer">AngularJS - Polling Timers</a></li>
9192
<li>
9293
<a href="examples.html#jquery-timer">jQuery</a></li>
9394
<li>
@@ -297,6 +298,32 @@ <h4>
297298
</tr>
298299
</tbody>
299300
</table>
301+
<h4>
302+
Events</h4>
303+
304+
<table class="table table-bordered table-striped">
305+
<thead>
306+
<tr>
307+
<th>
308+
Event name
309+
</th>
310+
<th>
311+
Description
312+
</th>
313+
</tr>
314+
</thead>
315+
<tbody>
316+
<tr>
317+
<td>
318+
timer-tick
319+
</td>
320+
<td>
321+
Tick event that gets emitted for every timer tick for specified interval. Please refer to <a href="examples.html#angularjs-polling-timer">Polling Timer</a>
322+
example for its usage.
323+
</td>
324+
</tr>
325+
</tbody>
326+
</table>
300327
</section>
301328
<section id="contribute">
302329
<h3>

0 commit comments

Comments
 (0)