Angular JS Digital Clock

In this tutorial, I will show you how to easily make an Angular JS Digital Clock without much coding in angular.

Get the full demo and source code for Angular JS digital clock. Here are the steps to make a beautiful digital clock using AngularJS.

Step 1:

Create a php file ‘clock.php’ and write the following code inside it.

[code]
<?php //set indian time zone date_default_timezone_set("Asia/Calcutta"); //get date $date = date(‘jS , F Y’); //get time $time = date(‘H:i:s’); //create a array and save date in time $response = array(‘date’=>$date,
‘time’=>$time);

//set as json
header(‘ContentType: Application/json’);
echo json_encode($response);
exit;
[/code]

This code will help us to show proper digital time and date on the front page where we want to show the code.

Step 2:

Next we will create a html file to show our clock.

Create a html page and write the following code inside it.

[php]
<!DOCTYPE html>
<!– To change this license header, choose License Headers in Project Properties. To change this template file, choose Tools | Templates and open the template in the editor. –>
<html ng-app="clock">
<head>
<title>Angular JS Digital Clock</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<link href=’https://fonts.googleapis.com/css?family=Orbitron’ rel=’stylesheet’ type=’text/css’>

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cstyle%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20%40font-face%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20’Orbitron’%2C%20serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%20%20.clock%20h1%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20font-family%3A%20’Orbitron’%2C%20serif%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%3C%2Fstyle%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<style>" title="<style>" />
</head>
<body>
<div class="container">
<div class="well">
<h1>Angular JS Digital Clock </h1>
</div>
</div>
<div class="container text-center clock" ng-controller="clockController">
<h1 ng-model="time">{{time}}</h1>
<h1 ng-model="date">{{date}}</h1>
</div><div class="container text-center">
<h4 class="text-uppercase">Learn more at: <a href="https://www.mehulprajapati.com">Meul Tech .com</a></h4>
</div><img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20src%3D%22https%3A%2F%2Fajax.googleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.3.15%2Fangular.min.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A%20%20%20%20%20%20%20%20%20%20%20%20var%20clock%20%3D%20angular.module(%22clock%22%2C%20%5B%5D)%3B%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20clock.controller(‘clockController’%2C%20function%20(%24scope%2C%20%24http%2C%20%24interval)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24interval(function%20()%7B%24scope.blink()%7D%2C1000)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24scope.blink%20%3D%20function%20()%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24http.get(‘clock.php’)%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20.success(function%20(response)%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24scope.time%20%3D%20response.time%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%24scope.date%20%3D%20response.date%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%3B%0A%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D)%3B%0A%20%20%20%20%20%20%20%20%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="<script>" title="<script>" />
</body>
</html>
[/php]

In this example, we have used simple angular js data binding and ajax request to get data from php file.
We are also using angular js interval service for blinking the clock every second. So, finally our digital clock is ready.
Thank you for reading our article.

Don’t forget to share your doubts in the comment box and also share this post on social media and with your friends because “You share, I share, let’s make the world aware”.

You may want to take a look at the following related posts:

Also for more awesome tutorials, please don’t forget to like our facebook page Meul Tech .

Bonus: We also give training on following topics:

1. Angular Training in Mumbai.

2. Bootstrap Training Course in Mumbai.

3. Web Designing Training in Mumbai.

4. UI / UX Training.

5. IOS Training Institute in Mumbai.

Tags: Angular, Angular JS, AngularJS, Digital Clock AngularJS