Skip to content

Commit 6585a5d

Browse files
siddiisiddii
committed
more examples
1 parent 85addb2 commit 6585a5d

File tree

4 files changed

+90
-6
lines changed

4 files changed

+90
-6
lines changed

‎examples/angularjs-multiple-timers.html

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,19 @@
22
<html>
33
<head>
44
<title>AngularJS Example - Multiple Timers</title>
5+
<style type="text/css">
6+
div {
7+
border: 1px solid gainsboro;
8+
text-align: center;
9+
margin: 15px;
10+
padding: 15px;
11+
}
12+
</style>
513
<script src="../angular/angular.min.js"></script>
614
<script src="../app/js/timer.js"></script>
715
<script>
816
angular.module('MyApp', ['timer']);
17+
918
function MyAppController($scope) {
1019
$scope.timerRunning = true;
1120

@@ -24,7 +33,7 @@
2433
</head>
2534
<body ng-app="MyApp">
2635
<div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
27-
<h2>Multiple Timers</h2>
36+
<h2>AngularJS - Multiple Timers Example</h2>
2837
<h3>Timer 1: <timer/></h3>
2938
<h3>Timer 2: <timer interval="2000"/></h3>
3039
<h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>

‎examples/angularjs-single-timer.html

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,20 @@
22
<html>
33
<head>
44
<title>AngularJS Example - Single Timer</title>
5+
<style type="text/css">
6+
div {
7+
border: 1px solid gainsboro;
8+
text-align: center;
9+
margin: 15px;
10+
padding: 15px;
11+
}
12+
</style>
513
<script src="../angular/angular.min.js"></script>
614
<script src="../app/js/timer.js"></script>
715
<script>
8-
var myApp = angular.module('MyApp', ['timer']);
16+
angular.module('MyApp', ['timer']);
917

1018
function MyAppController($scope) {
11-
var timerDirective = myApp.directive('timer');
12-
console.log('###### Timer Directive = ', timerDirective);
1319
$scope.timerRunning = true;
1420

1521
$scope.startTimer = function (){
@@ -26,8 +32,8 @@
2632
</script>
2733
</head>
2834
<body ng-app="MyApp">
29-
<div ng-controller="MyAppController" style="border: 1px solid gainsboro; text-align: center;">
30-
<h2>Single Timer</h2>
35+
<div ng-controller="MyAppController">
36+
<h2>AngularJS - Single Timer Example</h2>
3137
<h3><timer/></h3>
3238
<button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
3339
<button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>

‎examples/jquery-timer.html

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>AngularJS Example - Single Timer</title>
5+
<style type="text/css">
6+
div {
7+
border: 1px solid gainsboro;
8+
text-align: center;
9+
margin: 15px;
10+
padding: 15px;
11+
}
12+
</style>
13+
<script src="../jquery/jquery-1.9.1.min.js"></script>
14+
<script src="../angular/angular.min.js"></script>
15+
<script src="../app/js/timer.js"></script>
16+
<script>
17+
function startTimer() {
18+
$('timer')[0].start();
19+
}
20+
21+
function stopTimer() {
22+
$('timer')[0].stop();
23+
}
24+
</script>
25+
</head>
26+
<body>
27+
<div ng-controller="MyAppController">
28+
<h2>JQuery - Timer Example</h2>
29+
<h3 ng-app="timer"><timer/></h3>
30+
<button onclick="startTimer()">Start Timer</button>
31+
<button onclick="stopTimer()">Stop Timer</button>
32+
</div>
33+
<br/>
34+
</body>
35+
</html>

‎examples/plain-javascript.html

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>AngularJS Example - Single Timer</title>
5+
<style type="text/css">
6+
div {
7+
border: 1px solid gainsboro;
8+
text-align: center;
9+
margin: 15px;
10+
padding: 15px;
11+
}
12+
</style>
13+
<script src="../angular/angular.min.js"></script>
14+
<script src="../app/js/timer.js"></script>
15+
<script>
16+
function startTimer() {
17+
document.getElementsByTagName('timer')[0].start();
18+
}
19+
20+
function stopTimer() {
21+
document.getElementsByTagName('timer')[0].stop();
22+
}
23+
</script>
24+
</head>
25+
<body>
26+
<div ng-controller="MyAppController">
27+
<h2>Plain JavaScript - Timer Example</h2>
28+
<h3 ng-app="timer"><timer/></h3>
29+
<button onclick="startTimer()">Start Timer</button>
30+
<button onclick="stopTimer()">Stop Timer</button>
31+
</div>
32+
<br/>
33+
</body>
34+
</html>

0 commit comments

Comments
 (0)