I'm copying my code exactly from an egghead.io tutorial but it isn't working. The angular expression isn't posting to the view properly (it posts with the {{}} rather than evaluating). It works if I remove ng-controller from the <body> and the value "app" from ng-app in the <html> so I can't figure out where to pinpont the problem. I've tried moving the script for the angular module/controller all over the html page (header, bottom of page, etc.) and no luck.
As a side question I'm wondering if Stackoverflow is the proper place to post this. Supposedly you're not supposed to use the 'code-review' tag and reviews of "other-wise working code" belongs on codereview.stack. My code is working sooo...
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller(FirstCtrl, function FirstCtrl()[
var first = this;
first.greeting = "First";
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
<!DOCTYPE html>
<html ng-app="app">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
</script>
<script>
angular.module("app", [])
.controller("FirstCtrl", [ function () {
var first = this;
first.greeting = "First";
}
])
</script>
</head>
<body ng-controller="FirstCtrl as first">
<input type="text" ng-model="first.greeting"/>
<div ng-class="first.greeting">
{{first.greeting}} {{World}}
</div>
</body>
</html>
I made a slight change to your code.
The Controller name needed double qoutes around it see "FirstCtrl" also you had a missing square bracket and closing bracket. Copy and past the above code it should work.
It works for me. :)
Your copying went wrong somewhere , controller name should be a string
Change:
.controller(FirstCtrl...
to
.controller('FirstCtrl'...
You should have seen errors thrown in console to give you clues about this
Related
I am starting to learn AngularJS and wanted to try building a simple calculator app, however, whenever I name the ng-app in my html-file, AngularJS stops working.
I tried building a controller, but seem to be doing something wrong when calling it or putting it to use.
I tried putting the files in the XAMPP webfolder because I thought it might not load from my hard drive, but to no avail.
(please disregard all the half-finished rest, right now I just want to get the controller working)
Here is the html:
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<input type="number" ng-model="first" autofocus>
<input type="number" ng-model="second">
<br>
<button onClick="defineOperator('+')">+</button>
<button onClick="defineOperator('-')">-</button>
<button onClick="test()">TEST</button>
<br>
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
<script src="http://localhost/calculator/scripts/app.js" type="text/javascript"></script>
</body>
</html>
And the js:
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.defineOperator = function(choice) {
switch (operator) {
case +:
return first + second;
break;
default:
}
};
$scope.testOperator = function(click) {
alert("You chose " + operator);
};
});
Any help would be greatly appreciated.
angular.module('calculatorApp', [])
.controller('mainCtrl', function($scope){
$scope.first="hello";
});
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
</head>
<body ng-app="calculatorApp">
<div ng-controller="mainCtrl">
<div>
{{first}}
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
</body>
</html>
Have a look at this. One thing you have not closed the tag in which angular is defined.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
You forgot to put > in above line.
Replace it with
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
You forgot to end the script tag with >
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"</script>
if you want to change the app-name in html page you should also change the app name in the js file :
angular.module('calculatorApp', [])
newbie here,
(this is important to me as i often don't have access to the internet.)
i have this strange problem where this code works fine on jsfiddle:
fiddle here ->https://jsfiddle.net/w4g71ea8/2/
but not when i try it on my own computer breaking it into seperate files (in same directory) and view with chrome.
Also I had to set no wrap-in on js fiddle for that to work.
test3.html :
<!doctype html>
<html>
Angular JS Tutorial
<head>
<script src= "file:///home/chronos/user/Downloads/angular/angular.js" > </script>
</head>
<body ng-app="myapp">
<script>
src= "script3.js"
</script>
<div ng-controller="HelloController" >
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
script3.js :
var app = angular.module('myapp', []);
app.controller("HelloController", function($scope) {
$scope.speak = "Joe";
});
I'm not sure where did you copy this html, but it's wrong. Try like this:
<!DOCTYPE html>
<html>
<head>
<title>Angular JS Tutorial</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="script3.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="HelloController">
<h2>Welcome {{speak}} to the world!</h2>
</div>
</body>
</html>
And, since you said you're a newbie, it'd be a good habit to start using your code ready for future minifications:
// script3.js
var app = angular.module('myapp', []);
app.controller('HelloController', ['$scope', function($scope) {
$scope.speak = 'Joe';
}]);
On the other hand, I don't agree with some comments above; you don't have to install any webserver or something to see it's working. Just create your html and js files, drop it to the browser. Only thing you need to keep in your mind is file:// usage is not valid here. Either use full url from any CDN, or download the file and enter local path like /js/angular.js. I'm not talking about ng-view and ng-include of course, since they are making AJAX calls, you'll need some sort of webserver. But in this example, you don't need at all.
The following html page works when ng-app="" but not when ng-app="MyApp". How can I make this page work with ng-app="MyApp"?
The code in this page will print out the text being input as user types into the textbox.
<!DOCTYPE html>
<html>
<head>
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp">
<p>Input something in the input box:</p>
<p>Name: <input type="text" ng-model="name" value="John"></p>
<p ng-bind="name"></p>
</div>
</body>
</html>
I tried including following JavaScript in this page, but still it did not work.
<script>
angular.element(document).ready(function() {
angular.bootstrap(document, ['MyApp']);
});
</script>
UPDATE 1
The following script did the trick, which I picked up after reading various responses to my post. I added this just before the closing 'body' tag.
<script>
angular.module('MyApp', []);
</script>
You need to declare your module in Angular. You must declare it in javascript whithin your file:
angular.module('MyApp', []);
Here you have a good starting tutorial:
http://tutorials.jenkov.com/angularjs/index.html#angularjs-hello-world
i'm new to angular, so started with very basic example, but this is also not working. so please help me out. below code should write the content of textbox to the page.
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app>
<title></title>
</head>
<body>
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
<script src="/script/angular.js" type="text/javascript"></script>
</body>
</html>
ng-app should be inside html or body, inside whichever tags you intend to use angular.
In your code ng-app scope is ending with in head tags only. You haven't used ng-app at root level. You can use it at html or body or main div tag level. And there is no ng-controller in your markup. Of course you can also configure controller through js file also.
You use below code.
HTML
<html ng-app="plunker">
<head>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.14/angular.js" data-semver="1.3.14"> </script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div class="container">
Name: <input type="text" ng-model="name" />{{name}}
</div>
</body>
</html>
JS
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.name = 'World';
});
ng-app should be in html tag, not head.
put ng-app in tag, not in head tag
Remove ng-app directives which is added to head tag and assign it to html
i m new in angularjs. But there is problem that i cant resolve it my code is below
My index.html file is given below
<!doctype html>
<html ng-app = "myApp">
<head>
<script src=""https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js""></script>
<script>
var app = angular.module('myApp', []);
app.run(function($rootScope){
$rootScope.name = "Ari Lerner";
});
</script>
</head>
<body>
<div>
{{name}}
</div>
</body>
</html>
But still the output on Browser in
{{name}}
please help to solve my problem
I think you made this pretty complex for your self. You need to play with the scope of that moment instead of using the rootScope when their is only one level of scope involved.
However in order to make your example work created a fiddle for the same:
Fiddle
Code Snippet:
HTML:
<div ng-app>
<div ng-controller="test">
{{name}}
</div>
</div>
JS:
function test($scope){
$scope.name = "Ari Lerner";
}
Make sure your angularjs is included properly:
Put double quotes only once:
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
demo: jsfiddle