I want to display a count down timer.I have been referring the following page
http://siddii.github.io/angular-timer/
But i am getting the below error.
Error: Invalid isolate scope definition for directive timer: #?
Could anybody tell me what i am i missing out.
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']);
Try this. It's working:
I added moment.js and humanizeDuration.js libraries based on errors I was getting.
Hope it 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>
You need to pull in the right libraries in order for the timer to work.
bower install momentjs --save
bower install humanize-duration --save
Now in your HTML add the 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>
Related
I'm trying to learn the basics on angular. I installed angular via npm.
Just trying to run my first app
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
</body>
</html>
In my app.js it's just this line of code:
angular.module("ngClassifieds", []);
I ran the below command to start up the server as I had installed http server on my project directory
http-server
I opened up my localhost url which was localhost:8080 but for some reasons it was not showing Hello message but instead it was showing {{message}}
Not sure what I went wrong here.
<script type="text/javascript" scr="node_modules/angular/angular.js"></script>
<script type="text/javascript" scr="scripts/app.js"></script>
it is not scr chenge it to src
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
Below code will solve you problem.
angular.module("ngClassifieds", []);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>ngClassifieds</title>
</head>
<body ng-app="ngClassifieds" ng-init="message = 'Hello' ">
<h1>{{message}}</h1>
<script type="text/javascript" src="node_modules/angular/angular.js"></script>
<script type="text/javascript" src="scripts/app.js"></script>
</body>
</html>
i'm running it using XAMPP but it's not working and showing output of {{"Hello"+"you"}} rather than Hello you
<!DOCTYPE HTML>
<html>
<head ng-app="store">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js">
</script>
<script >
var abc=angular.module('store',[]);
</script>
<p>
{{"Hello"+"you"}}
</p>
</body>
</html>
First, you should create a controller in your JS, then you use it in your view.
You can do it setting the ng-controller directive, as below:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('store', [])
.controller('storeCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="storeCtrl">
<p>
{{"Hello"+"you"}}
</p>
</body>
I have following code, and try to run in IE11.Can not figure out what is wrong.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore-min.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone-min.js"></script>
<script>
var Todo = Backbone.Model.extend({});
</script>
</body>
</html>
Did you checked if the files exists? Neither underscore and backbone are accessible via the provided links.
Replace the source files with:
<script src="http://underscorejs.org/underscore-min.js"></script>
<script src="http://backbonejs.org/backbone-min.js"></script>
I know asking this is silly but I am stuck and not getting out of it. I am new to Angular.js and have created the following program but it is not running as the program can't find the script sources..I have tried all the possible ways but haven't found the solution.
<!DOCTYPE html>
<html ng-app="eventsApp">
<head>
</head>
<body>
<div ng-controller="EventController">
{{event.name}}
</div>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js" > </script>
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"></script>
</body>
</html>
Following is the snapshot of my folder arrangement:
I think you should remove the / before js in the src.if it is not working then check if it is the right path.
<script type="text/javascript" src="/js/app.js"></script>
<script type="text/javascript" src="/js/controllers/EventController.js"> </script>
Should Be
<script type="text/javascript" src="../js/app.js"></script>
<script type="text/javascript" src="../js/controllers/EventController.js"></script>
OR
<script type="text/javascript" src="js/app.js"></script>
<script type="text/javascript" src="js/controllers/EventController.js"></script>
Depending on your location and path of js folder....
just for learning purpose--
index.html
<html>
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="ctrl.js"></script>
</head>
<body ng-app="abc">
<h1 ng-controller="ctrl">{{data}}</h1>
</body>
</html>
script.js
angular.module('abc', []);
ctrl.js
angular.module('abc').controller('ctrl',function($scope){
$scope.data="hello";
});
js fiddle link
it showing error... what i ve done wrong here???
You named your controller file wrongly.
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.3/angular.min.js"></script>
<script src="script.js"></script>
<script src="cntrl.js"></script>
</head>