Here is my code,
WORKING CODE
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{value}}</h1>
</div>
</body>
</html>
NOT WORKING CODE:
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>
Normally using parseInt on an expression should work, what is the issue here?
You have to parse the value in the controller since angular is not able to parseInt into an Angular expression:
In the other hand if you really want to make this in the DOM one of the best options is to use an angular filter like:
var app = angular.module("app", []);
app.filter('parseInt', function() {
return function(value) {
return parseInt(value);
};
});
app.controller("ListCtrl", ["$scope",
function($scope) {
$scope.value = '20';
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1>{{(value | parseInt) + 44}}</h1>
</div>
</body>
</html>
As per the doc
https://docs.angularjs.org/guide/expression
Angular does not use JavaScript's eval() to evaluate expressions. Instead Angular's $parse service processes these expressions.
For the question about why it does not display check this
https://docs.angularjs.org/guide/interpolation
if the interpolated value is not a String, it is computed as follows:
undefined and null are converted to ''
Since ParseInt in not available inside interpolation, it is undefined and so is the displayed value.
you will have to create your own function in the controller $scope.
var app = angular.module("app", []);
app.controller("ListCtrl", ["$scope",function($scope) {
$scope.value = '20';
$scope.parseInt = function(value)
{
return parseInt(value);
}
}
]);
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.7" data-semver="1.4.7" src="https://code.angularjs.org/1.4.7/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app='app'>
<div ng-controller="ListCtrl">
<h1> {{parseInt(value)}}</h1>
</div>
</body>
</html>
Related
I am trying to build my first AngularJS app but it is not working, i am unable to find the problem why it is not working. It is not showing the name and result of sayHello function on the html page.
This is my js and html file.
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]);
.controller('myFirstController', function($scope){
// body...
$scope.name = "Isha";
$scope.sayHello = function() {
// body...
return "Hello";
}
});
})();
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>
Just remove the ; after the Module, and add the controller. Otherwise you need to declare as
var app = angular.module('myFirstApp',[]);
then
app.controller('myFirstController', function($scope){
DEMO
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]).controller('myFirstController', function($scope){
$scope.name = "Isha";
$scope.sayHello = function() {
return "Hello";
}
});
})();
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>
You have a semicolon too much
(function(){
// body...
'use strict';
angular.module('myFirstApp',[]) // <= note I removed the ;
.controller('myFirstController', function($scope){
// body...
$scope.name = "Isha";
$scope.sayHello = function() {
// body...
return "Hello";
}
});
})();
<html>
<head>
<title>My First AngularJS App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="app.js"></script>
</head>
<body>
<h1>My First AngularJS App</h1>
<div ng-app="myFirstApp" ng-controller="myFirstController">
{{sayHello()}}
{{name}}
</div>
</body>
</html>
Remove the semi-colon after:
angular.module('myFirstApp',[]); // <-- Remove this semi-colon
You can do it by two ways:
1: Assign your module in a variable
var app = angular.module('myFirstApp',[]);
app.controller('myFirstController', function($scope){
// body...
});
2: You can directly take the reference of your module in your controller
angular.module('myFirstApp',[])
.controller('myFirstController', function($scope){
//body.....
});
I have a paragraph and a counter. I want to update the counter when someone clicks on the paragraph using AngularJS. I wrote the following code:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<p>Click on this paragraph.</p>
<div ng-app="myApp" ng-controller="myCtrl">
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$ang=$scope;
$ang.count=10;
});
$(document).ready(function(){
$("p").click(function(){
console.log("The paragraph was clicked.");
$ang.count=$ang.count-1;
});
});
</script>
</body>
</html>
But it's not working. I guess I'am using $scope in a wrong way but I am not sure how to fix it.
Don't mix angular with jQuery!
Rather follow angular way of doing it, Wrap all things in angular context just by moving ng-app & ng-controller directive on body and have and then place ng-click on p tag and do your desired task there
Markup
<body ng-app="myApp" ng-controller="myCtrl">
<p ng-click="increamentCount()">Click on this paragraph.</p>
<div>
<h2>{{ count }}</h2>
</div>
<body>
Code
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.increamentCount = function(){
$scope.count = $scope.count + 1;
}
});
Demo Plunker
It is should be:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<p ng-click="click()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
<script>
var $ang;
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.count = 10;
$scope.click = function(){
$scope.count=$scope.count-1;
}
});
</script>
</body>
</html>
You had several errors in your code. I've refactored it a bit. Make sure to use ng-app and ng-controller properly. Do not use jquery in combination with angular. You can observe scope changes with the $watch function - this method is expensive in terms of computation and should not be overused.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<div ng-controller="myCtrl">
<p ng-click="onClick()">Click on this paragraph.</p>
<h2>{{ count }}</h2>
</div>
</div>
<script>
angular
.module('myApp', ['ng'])
.controller('myCtrl', function($scope) {
$scope.count = 10
$scope.onClick = function () {
$scope.count--
}
// this is how you can observe state
// changes outside of event handlers
$scope.$watch('count', function(newValue, oldValue) {
console.log("The paragraph was clicked.")
})
})
</script>
</body>
</html>
Below code is not giving output as expected i:e Hello,World
output: {{ greetings.text }}, world
Can anyone help me why its not displaying 'hello, world' instead where I am wrong
<!doctype html>
<html ng-app>
<head>
<meta charset="utf-8">
<title>Angular JS App 1</title>
<script type="text/javascript" src="angular-v1.4.js"></script>
<script type="text/javascript" src="controllers.js"></script>
</head>
<body>
<div ng-controller='HelloController'> //controller
<p>{{ greetings.text }}, World</p>
</div>
</body>
</html>
script for controller
function HelloController($scope){
$scope.greetings = {text : 'hello'};
}
Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("HelloController", function($scope) {
$scope.greetings = {
text: 'hellow world'
}
});
HTML
add module name
<html ng-app="app">
add module name in ng-app..
like
<div ng-app='app'>
</div>
like this
<script>
angular.module('app', [])
.controller('testCtrl', ['$scope', function($scope){
$scope.test ="hello world";
}])
</script>
plunker code here
You need to provide the value for ng-app directive.
Like
<html ng-app="myapp">
and you should have the angular module myapp defined in script.
I have a very basic example that isn't working: I have two aspects, the index.html and the main.js. They are in the same folder:
<!DOCTYPE html>
<html>
<head>
<title> AngularJS Tutorials </title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="main.js"></script>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
<script type="text/javascript" src="js/angular.min.js"></script>
</body>
</html>
main.js
function FirstCtrl($scope) {
$scope.data = {message: "Hello"};
}
my page shows this:
{{data.message}}
You need to add the controller to the angular module. you can use the controller function to add the js function for your controller.
var FirstCtrl = function FirstCtrl($scope) {
$scope.data = {message: "Hello2"};
};
angular.module("myApp",[]).controller("FirstCtrl",FirstCtrl);
If you already had the angular module defined somewhere else in the page, Use this version.
angular.module("myApp").controller("FirstCtrl",FirstCtrl);
Here is a working sample http://jsbin.com/tiroteharu/edit?html,js,console,output
<script src="~/Scripts/angular/angular.js"></script>
<script>
var myApp = angular.module('myApp', []);
myApp.controller('FirstCtrl', ['$scope', function ($scope) {
$scope.data = { message: "Hello" };
}]);
</script>
<div ng-app="myApp">
<div ng-controller="FirstCtrl">
<h1>{{data.message}}</h1>
</div>
</div>
More help read: https://docs.angularjs.org/guide/controller
What am I doing wrong? angular.min.js is in the folder js. I am using the book from O'Reilly. There is an example like this. But on my PC it doesn't work.
//controller.js
function HelloController($scope) {
$scope.greeting = { text: 'Hello' };
}
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
</head>
<body ng-app="">
<div ng-controller='HelloController'>
<p>{{greeting.text}}, World</p>
</div>
</body>
</html>
I think you are referring to old book. Please update your controller as below
//controller.js
var app = angular.module('myApp', []);
app.controller('HelloController', function($scope) {
$scope.greeting = { text: 'Hello' };
});
and in HTML
ng-app="myApp"
Please try and let us know whether it is working or not