I am absolutely new to angular JS and going through the tutorial of ng-book. I am trying to add a clock on the page but the page is showing Hello {{clock}} instead of actual clock. I am using Angular 1.4.8.
Here is my code.
clock.html
<!doctype html>
<html ng-app>
<head>
<title>Angular clock demo</title>
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/app.js" ></script>
</head>
<body>
<div ng-controller="MyController">
<h1>Hello {{ clock }}</h1>
</div>
</body>
</html>
code for js/app.js
function MyController($scope) {
$scope.clock = new Date();
var updateClock = function(){
$scope.clock = new Date();
};
setInterval(function(){
$scope.$apply(updateClock);
},1000);
updateClock();
};
From angular 1.3.x global controller isn't allowed by default.
Bind your controller with module
Like this
var app=angular.module("app",[]);
app.controller("MyController",MyController);
html
ng-app="app"
DEMO
Related
I have newly started learning AngularJS. When I am running the application it is not showing the data to the view.
Here is my html page.
index.html:
<!DOCTYPE html>
<html ng-app="tutorialApp">
<head>
<meta charset="utf-8">
<title>Angular Tutorial</title>
<script src="lib/angular.min.js"></script>
<script src="js/app.js"></script>
<script src="js/controllers/tutorialCtrl.js"></script>
</head>
<body ng-controller="TutorialCtrl">
<h1>{{tutorialObject.title}}</h1>
<h2>{{tutorialObject.subTitle}}</h2>
<hr/>Number: {{2+2}}
<p>{{tutorialObject.bindOutput}}</p>
</body>
</html>
app.js:
var app = angular.module('tutorialApp', ['tutorialCtrlModule']);
tutorialCtrl.js:
angular.module('tutorialCtrlModule', [])
.controller('ToturialCtrl', ['$scope', function($scope){
//Code
$scope.tutorialObject = {};
$scope.tutorialObject.title = "Angular Tutorial";
$scope.tutorialObject.subTitle = "Basic";
$scope.tutorialObject.bindOutput = 2;
}]);
I could not even understand what could be the wrong thing i have done.
I am attaching the screenshot below:
You need to change the order of controller as tutorialAppp is dependent on tutorialCtrlModule
<script src="js/controllers/tutorialCtrl.js"></script>
<script src="js/app.js"></script>
EDIT:
You have made another typo mistake in the html, controller name as "TutorialCtrl" whereas it should be ToturialCtrl
Here is the working DEMO
I am using the datepicker directive of angularjs from angular materials to create a calendar for input of date.
HTML
<md-datepicker ng-model='vm.endtoDate'></md-datepicker>
The problem i am facing is that when i click on any date on the calendar it does not gets updated.
JS
function SearchController($scope,$stateParams, $q, $log, httpRequests, $location, searchResults, header, icons,leafletData){
var coordinates_selected;
var vm = this;
vm.endtoDate = new Date();
var endto= console.log(JSON.stringify(vm.endtoDate,'end'));
P.S i do not want to use the watch function to monitor the changed values as i later want to store the values in another variable for temporal searching.
If u dont want a watcher or something else i suggest you to go for a change event with in date picker and by using that store the changed date and use it where ever you want
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
angular.module('datepickerBasicUsage', ['ngMaterial'])
.controller('AppCtrl', function ($scope) {
$scope.endtoDate = new Date();
$scope.selecteddate=function(){
var endto= $scope.endtoDate;
console.log(endto);
}
});
<!doctype html>
<html ng-app="datepickerBasicUsage">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/t-114/assets-cache.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.css">
<script src="app.js"></script>
</head>
<body>
<div ng-controller="AppCtrl" >
<md-datepicker ng-model="endtoDate" ng-change="selecteddate()"></md-datepicker>
</div>
</body>
</html>
I'm starting learning Angular.js with this book "Angular.js OReilly", I am trying to construct the first examples that they have. I already downloaded Angular.js from the website and create my controller.js like it says, but I always get the error in the title.
This is what I did:
<html ng-app>
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
You need to put HelloController between tag inside tag.
<head>
<script src="angular.min.js"></script>
<script src="controllers.js"></script>
<script>
function HelloController($scope) {
console.log("a");
$scope.greeting = { text: 'Hello' };
}
</script>
</head>
Why are you using so old syntax? Try to start with new syntax you can do your above requirement like below code:
<html ng-app="myApp">
<head>
<script src="angular.min.js"></script>
<script>
var myApp = angular.module('myApp',[]);//creating app
myApp.controller('GreetingController', ['$scope', function($scope) { // creating controller
$scope.greeting = 'Hola!';
}]);
</script>
</head>
<body>
<div ng-controller="GreetingController">
{{ greeting }}
</div>
</body>
First you have to make app then make a controller. try this
Hello I had watched an tutorial about AngularJS. In this tutorial was showed how to build an easy hello world app but when I try the exactly same code it dosen't work.
All scripts are loaded well. Has someone an idea?
index.html
<!DOTYPE html>
<html ng-app>
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl">{{test}}</div>
</body>
</html>
Controller
function MyFirstCtrl($scope) {
$scope.test = "Hello World";
}
My output is {{test}}.
You need to give name to your ng-app directive, a different way using Controller as syntax, would be:
<!DOTYPE html>
<html ng-app="myApp">
<head>
/* load angular and controller script */
</head>
<body>
<div ng-controller="MyFirstCtrl as myFirst">{{myFirst.test}}</div>
</body>
</html>
and controller js
var app = angular.module("myApp", []);
app.controller('MyFirstCtrl', function () {
this.test = 'Some test';
});
A jsFiddle Demo
You must create the app like this:
angular.module('myApp',[])
.controller('MyFirstController',['$scope', function($scope) {
$scope.test = "Hello World";
}]);
And load in html ngApp the respective app:
<html ng-app="myApp">
You need to pass the angular script and your controller script
<!DOTYPE html>
<html ng-app>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
<script type="text/javascript" src="path/to/controller.js"></script>
</head>
...
I am brand new to AngularJS and I'm following an example from a book but am running into issues with the HTML rendering in a simple example.
Code is working with no problems in JSFiddle - http://jsfiddle.net/2436t/
I am running this in Firefox 30.0 and I just get the following output and no errors in Firebug
HTML Code:
<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script type="text/javascript" src="angular.min.js"></script>
<script src="controllers.js"></script>
</head>
<body ng-app>
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
</html>
Javascript (in external controllers.js file):
function HelloController($scope)
{
$scope.greeting = {text:"Hello"};
}
I am sure I'm missing something simple but any help would be greatly appreciated,
Sean
You are missing ng-app="????"
You also need to inject the controller in the module.
Here is the jsfiddle
http://jsfiddle.net/yogeshgadge/2436t/14/
The HTML
<body ng-app="myApp">
<div ng-controller="HelloController">
<p>{{greeting.text}}</p>
</div>
</body>
The JS part
var app = angular.module('myApp', []);
app.controller('HelloController',
function($scope) {
$scope.greeting = {
text: "Hello"
};
}
);