Angular variable not displaying correctly on web page
As the name suggests, I'm trying to learn Angular.js on my own, but I ran into an unexpected frustrating roadblock ... I can't even get the variables to display correctly on the webpage!
<!DOCTYPE html>
<html ng-app>
<head>
<title>Lets test this out?</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
</head>
<body>
Write your name in the text box!
<input type="text" ng-model="sometext" />
<h1>Hello {{ sometext }}</h1>
</body>
</html>
I would really appreciate anyone who can tell me what I am doing wrong because I have been banging my head against my desk for an hour and looking for this problem, but I don’t understand why it doesn’t work.
+3
source to share
2 answers
Check if the angular link is loading correctly. Try adding ng-app to your body tag
DEMO
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<body ng-app>
Write your name in the text box!
<input type="text" ng-model="sometext" />
<h1>Hello {{ sometext }}</h1>
</body>
+3
source to share
This is a perfect job, you need to remove the first tag
<html ng-app>
<head>
<title>Lets test this out?</title>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js</script>
</head>
<body>
Write your name in the text box!
<input type="text" ng-model="sometext" />
<h1>Hello {{ sometext }}</h1>
</body>
</html>
0
source to share