Angular Timer, a simple, inter-operable AngularJS directive

### AngularJS - Single Timer

    <!DOCTYPE html>
    <html>
    <head>
        <title>AngularJS Example - Single Timer Example</title>
        <script src="../angular/angular.min.js"></script>
        <script src="../app/js/timer.js"></script>
        <script>
            angular.module('MyApp', ['timer']);
            function MyAppController($scope) {
                $scope.timerRunning = true;

                $scope.startTimer = function (){
                    $scope.$broadcast('timer-start');
                    $scope.timerRunning = true;
                };

                $scope.stopTimer = function (){
                    $scope.$broadcast('timer-stop');
                    $scope.timerRunning = false;
                };

                $scope.$on('timer-stopped', function (event, data){
                    console.log('Timer Stopped - data = ', data);
                });
            }
            MyAppController.$inject = ['$scope'];
        </script>
    </head>
    <body ng-app="MyApp">
        <div ng-controller="MyAppController">
            <h1>AngularJS - Single Timer Example</h1>
            <h3><timer/></h3>
            <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timer</button>
            <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timer</button>
        </div>
        <br/>
    </body>
    </html>

### AngularJS - Multiple Timer

    <!DOCTYPE html>
    <html>
    <head>
        <title>AngularJS Example - Multiple Timers Example</title>
        <script src="../angular/angular.min.js"></script>
        <script src="../app/js/timer.js"></script>
        <script>
            angular.module('MyApp', ['timer']);
            function MyAppController($scope) {
                $scope.timerRunning = true;

                $scope.startTimer = function (){
                    $scope.$broadcast('timer-start');
                    $scope.timerRunning = true;
                };

                $scope.stopTimer = function (){
                    $scope.$broadcast('timer-stop');
                    $scope.timerRunning = false;
                };
            }
            MyAppController.$inject = ['$scope'];
        </script>
    </head>
    <body ng-app="MyApp">
        <div ng-controller="MyAppController">
            <h2>AngularJS - Multiple Timers Example</h2>
            <h3>Timer 1: <timer/></h3>
            <h3>Timer 2: <timer interval="2000"/></h3>
            <h3>Timer 3: <timer>{{minutes}} minutes, {{seconds}} seconds.</timer></h3>
            <button ng-click="startTimer()" ng-disabled="timerRunning">Start Timers</button>
            <button ng-click="stopTimer()" ng-disabled="!timerRunning">Stop Timers</button>
        </div>
    </body>
    </html>

### AngularJS - Polling Timers

    <!DOCTYPE html>
    <html>
    <head>
        <title>AngularJS Example - Polling Timer Example</title>
        <script src="../angular/angular.min.js"></script>
        <script src="../app/js/timer.js"></script>
        <script>
            angular.module('MyApp', ['timer']);
            function PollingController($scope) {
                $scope.timerRunning = true;
                $scope.timerConsole = '';

                $scope.timerType = '';

                $scope.startTimer = function (){
                    $scope.$broadcast('timer-start');
                    $scope.timerRunning = true;
                };

                $scope.stopTimer = function (){
                    $scope.$broadcast('timer-stop');
                    $scope.timerRunning = false;
                };

                $scope.$on('timer-tick', function (event, args) {
                    $scope.timerConsole += $scope.timerType  + ' - event.name = '+ event.name + ', timeoutId = ' + args.timeoutId + ', millis = ' + args.millis +'\n';
                });
            }

            PollingController.$inject = ['$scope'];
        </script>
    </head>
    <body ng-app="MyApp">
        <div>
            <h1>AngularJS - Polling Timer Example using <code>timer-tick</code> event</h1>
            <div ng-init="timerType = 'Polling Server'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px;margin:15px">
            <h2>Polling Server every 5 seconds</h2>
            <h3><timer interval="5000"/></h3>
            <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
            <br/>
            <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
            <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
            </div>
            <br/>

            <div ng-init="timerType = 'Saving Documents'" ng-controller="PollingController" style="border: 1px darkgray dashed; padding: 15px">
            <h2>Saving Document every 3 seconds</h2>
            <h3><timer interval="3000"/></h3>
            <textarea style="height: 100px;" row=20 cols="200">{{timerConsole}}</textarea>
            <br/>
            <button ng-click="startTimer('poll-server')" ng-disabled="timerRunning">Start Timer</button>
            <button ng-click="stopTimer('poll-server')" ng-disabled="!timerRunning">Stop Timer</button>
            </div>

        </div>
        <br/>
    </body>
    </html>

### JQuery Timer

    <!DOCTYPE html>
    <html>
    <head>
        <title>JQuery Timer Example</title>
        <script src="../jquery/jquery-1.9.1.min.js"></script>
        <script src="../angular/angular.min.js"></script>
        <script src="../app/js/timer.js"></script>
        <script>
            function startTimer() {
                $('timer')[0].start();
            }

            function stopTimer() {
                $('timer')[0].stop();
            }
        </script>
    </head>
    <body>
    <div ng-controller="MyAppController">
        <h2>JQuery - Timer Example</h2>
        <h3 ng-app="timer"><timer/></h3>
        <button onclick="startTimer()">Start Timer</button>
        <button onclick="stopTimer()">Stop Timer</button>
    </div>
    <br/>
    </body>
    </html>

### Plain JavaScript

    <!DOCTYPE html>
    <html>
    <head>
        <title>Plain Javascript Timer Example</title>
        <script src="../angular/angular.min.js"></script>
        <script src="../app/js/timer.js"></script>
        <script>
            function startTimer() {
                document.getElementsByTagName('timer')[0].start();
            }

            function stopTimer() {
                document.getElementsByTagName('timer')[0].stop();
            }
        </script>
    </head>
    <body>
    <div>
        <h2>Plain JavaScript - Timer Example</h2>
        <h3><timer ng-app="timer"/></h3>
        <button onclick="startTimer()">Start Timer</button>
        <button onclick="stopTimer()">Stop Timer</button>
    </div>
    <br/>
    </body>
    </html>