Angular Timer not working

Question

Angular Timer not working

I want to show the countdown timer. I link to the following page http://siddii.imtqy.com/angular-timer/

But I get the following error.

Error: Invalid allocation area for the timer directive: @?

Can someone tell me what I'm missing.

index.html

<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="angular-timer.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
</body>
</html>

app.js

var appModule=angular.module('app', ['timer']);

+4

angularjs angular timer

Nisha shetty May 20, '15 at 6:39

source share

3 answers

Jcdenton86 · Answer 1 · 2015-05-20T07:43:08+0000

Try it. He works:

I added moment.js and humanizeDuration.js libraries based on the errors I was getting.

Hope this helps

<!DOCTYPE html>
<html>

  <head>
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.3/moment.js"></script>
   <script src="https://raw.githubusercontent.com/EvanHahn/HumanizeDuration.js/master/humanize-duration.js"></script>
   <script src="https://raw.githubusercontent.com/siddii/angular-timer/master/dist/angular-timer.js"></script>
  </head>

   <body ng-app="app">

    <div ng-controller="ctrl">
      <timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer>
	</div>
	
	<script>
	   var app = angular.module('app',['timer']);
			
	   app.controller('ctrl', function($scope){});
	</script>
   </body>
</html>

Run code Hide result

Rick · Answer 2 · 2016-02-28T19:58:58+0000

You need to pull the necessary libraries for the timer to work.

bower install momentjs --save
bower install humanize-duration --save

Now in your HTML add dependencies

<script type="text/javascript" src="bower_components/humanize-duration/humanize-duration.js"></script>

<script type="text/javascript" src="bower_components/momentjs/min/moment-with-locales.min.js"></script>

Nisha shetty · Answer 3 · 2015-05-21T07:06:17+0000

<!DOCTYPE html>
<html ng-app="app" lang="en">
<head>
<!-- <meta http-equiv="refresh" content="1" /> -->
<title>Insert title here</title>
<script type="text/javascript" src="angular.js"></script>
<script type="text/javascript" src="angular-timer.min.js"></script>
<script type="text/javascript" src="moment.js"></script>
<script type="text/javascript" src="locales.min.js"></script>
<script type="text/javascript" src="humanize-duration.js"></script>


<script type="text/javascript" src="app.js"></script>
</head>
<body>
<div>
<timer end-time="1451628000000">{{days}} days, {{hours}} hours, {{minutes}} minutes, {{seconds}} seconds.</timer></div>
</body>
</html>

224 , 23 , 12 , 56 .

.

humanize-duration.js: 259 : undefined.

Angular Timer not working

More articles: