AngularJS - scope is not rendering the variables in HTML - javascript

I have the below AngularJS code.
The current time is not displayed after executing the below code:
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="angular.js"></script>
</head>
<body>
<h1>Clock Application</h1>
<div ng-controller="t"></div>
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>


Keep the controller to parent tag. Then it will work.
Corrected code below:
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body ng-controller="t">
<h1>Clock Application</h1>
<div></div>
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>


The timeString value is not binding because the ng-bind is not aware of the $scope.timeString, since it is not inside the controller.
Try this
<div ng-controller="t">
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<html ng-app="a">
<head>
<title>Clock App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.6/angular.min.js"></script>
</head>
<body>
<h1>Clock Application</h1>
<div ng-controller="t">
<p> The current time is </p>
<p ng-bind="timeString"></p>
<p>{{50+3}}</p>
</div>
<script>
var d = angular.module("a", []);
d.controller("t", function ($scope) {
var currentDate = new Date();
$scope.timeString = currentDate.toTimeString();
});
</script>
</body>
</html>

Related

Angular does not show output

Have tried every solution on stackoverflow but it does not solve my problem,
my output is not showing.
The output does appear in logs and everywhere else but due to some reason angular is unable to render it.
In my real scenario i will be receiving data from a server and i have mimicked the object structure i will be getting in the 'controller.js' file
Html
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="application.js"></script>
<script src="controller.js"></script>
</body>
</html>
Controller.js
var app=angular.module('application', []);
app.controller("controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
Application.js
var app = angular.module("application", []);
app.run(function(){
console.log("App running!");
});

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="_controller">
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</div>
<script>
var app=angular.module('application', []);
app.controller("_controller", function($scope) {
var d= [{'Task':'Say hi!','Status':'failed'}];
$scope.t=d[0].Task;
$scope.s=d[0].Status;
console.log("Task",$scope.t);
console.log("Status",$scope.s);
});
app.run(function(){
console.log("App running!");
});
</script>
</body>
</html>

Syntax error in console.log, missing leading quote on App running.
//script.js
var app = angular.module("application", []);
app.run(function() {
console.log("App running!");
});
app.controller("controller", function($scope) {
var d = [{
'Task': 'Say hi!',
'Status': 'failed'
}];
$scope.t = d[0].Task;
$scope.s = d[0].Status;
console.log("Task", $scope.t);
console.log("Status", $scope.s);
});
<html lang="en">
<head>
</head>
<body>
<div ng-app="application" ng-controller="controller">
<ng-view>
<h2> Todo List: </h2>
<ul>
<li> {{t}}</li>
<li> {{s}}</li>
</ul>
</ng-view>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<script src="script.js"></script>
</body>
</html>

You have mistake in this line
console.log(App running!");
You forgot one "
that should be
console.log("App running!");
Solving that your code works fine.

AngularJS not working with my html

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.....
});

How to use AngularJS $scope?

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>

Handlebars.js no output

I am really struggling with Handlebars.js. The below example is the extent of my test html document.
I just cannot work out why the html variable is not writing the desired context content is not providing an output:
<!doctype html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.js"></script>
<script src="js/handlebars-v4.0.5.js"></script>
</head>
<body>
<script id="entry-template" type="text/x-handlebars-template">
<div class="entry">
<h1>{{title}}</h1>
<div class="body">
{{body}}
</div>
</div>
</script>
<script type="text/javascript">
var source = $("#entry-template").html();
var template = Handlebars.compile(source);
var context = {
title: "My New Post",
body: "This is my first post!"
};
var html = template(context);
</script>
</body>
</html>

Why isn't my Angular.js GET request working?

My goal is to spin a servo for a certain amount of seconds on a HTML button click. I am using an Arduino Yun as my microcontroller.
When I type in the URL directly the servo spins as it should. When I click on these buttons using the Angular.js GET request nothing happens. Even a regular form submit button works.
Is there something missing from my code?
Is there an easier way to accomplish this?
Here is my front-end code:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body>
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
</script>
If I just type in the URL in my browser with the setting value of 1 or 2 the servo works fine.

Please see working demo
var app = angular.module('app', []);
app.controller('ArduinoCtrl', function($scope, $http) {
$scope.response = {};
$scope.progress = false;
$scope.setServo = function(setting) {
$scope.progress = true;
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url).then(sucess, error).then(function() {
$scope.progress = false;
});
function sucess(response) {
angular.copy(response, $scope.response)
}
function error(response) {
angular.copy(response, $scope.response)
}
}
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<div ng-app="app">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
<p ng-show="progress">Please wait</p>
<div ng-hide="progress">
<hr/>
<p>Response</p>
<pre>{{response | json}}</pre>
</div>
</div>
</div>

You need to add the ng-app directive and add your controller to a module:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="jquery-1.11.1.min.js"></script>
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>
<title>winner's cat Feeder</title>
</head>
<body ng-app="myApp">
<div ng-controller="ArduinoCtrl" class="container">
<button ng-click="setServo(1)" class="btn">3 Seconds(Food)</button>
<button ng-click="setServo(2)" class="btn">9 Seconds(Food)</button>
</div>
</body>
</html>
<script type="text/javascript">
function ArduinoCtrl($scope, $http)
{
$scope.setServo = function (setting)
{
var url = "http://192.168.1.79/arduino/" + setting
$http.get(url);
}
}
angular.module("myApp", []).controller("ArduinoCtrl", ArduinoCtrl);
</script>

Categories