Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • AngularJs Directive to show clock.

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1.31k
    Comment on it

    Hi All,
    In this post we will discuss about to build clock using AngularJs. Angularjs provides a directive to build clock face and digital clock. This clock is responsive and auto updated when we change the data. To use this directive we need to download respective files.
    We can download files through CLI:

    bower install angular-ui-clock save

    or

    We can download files from Github and copy files from dist folder.
    After download files we will include files in our index.html file.

    <script src="js/angular-clock.js"></script>
    <link rel="stylesheet" href="css/angular-clock.css">

    Now, inject ds.clock dependency in app’s module.

    angular.module('starter', ['ds.clock'])

    Now, we will use "ds-widget-clock" directive in our view. This directive is responsive and reactive. Some attributes of this directive as follows:

    •  start-time: We can initialize clock with desired time. This time should be in milliseconds.
    • digital-format: What can be the format to show time by default it is 'hh:mm:ss'.
    • gmt-offset: We can set timezone of clock.
    •  show-gmt-info: It shows gmt-offset value only if gmt-off attribute is set.
    • show-digital: To show digital clock. By default it set to true.
    • show-analog: To show analog clock.
    • theme: We can set a proper theme for clock using this attribute.

    Full example:

    index.html

    <ion-view view-title="Smart Clock">
        <ion-content class="padding">
            <ds-widget-clock theme="theme" show-analog show-digital digital-format="'EEEE MMMM d,yyyy hh:mm:ss a Z'"></ds-widget-clock>
        </ion-content>
    </ion-view>

    controller.js

    .controller('DashCtrl', function($scope){
        $scope.startTime = 1430990693334;
        $scope.theme = 'custom';
    })
    

    style.css

    /* clock custom themes*/
    .padding{padding-top:100px;}
    .widget-clock.custom .clock-face {
      stroke: #FFF3C7;
      fill: #0e2434;
    }
    .widget-clock.custom .minor {
      stroke: #FFF3C7;
      stroke-width: 0.5;
    }
    .widget-clock.custom .major {
      stroke: #FFF3C7;
      stroke-width: 0.5;
    }
    .widget-clock.custom .hour {
      stroke: #FFF3C7;
      stroke-width: 1;
    }
    .widget-clock.custom .minute {
      stroke: #FFF3C7;
      stroke-width: 0.75;
    }
    .widget-clock.custom .second,
    .widget-clock.custom .second-counterweight {
      stroke: rgb(234, 31, 54);
      stroke-width: 0.5;
    }
    .widget-clock.custom .second-counterweight {
      stroke-width: 1.5;
    }
    /*digital clock custom theme*/
    
    .widget-clock.custom .digital {
      text-align: center;
      border:1px solid #ccc;
      padding: 10px;
    }
    .widget-clock.custom .time {
      font-family: 'Rationale', sans-serif;
      font-size: 2.0em;
      color: #EE8D2D;
      line-height: 1.5em;
    }
    

    Hope this will help you.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: