Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 7 years ago.
Improve this question
I am new to AngularJS so I've been doing some tutorials and following some sample videos. I came across a very simple application but I cannot get it to run in my browser. Can anyone tell me what's wrong with my code?
<!DOCTYPE html>
<html ng-app="hello">
<head lang="en">
<title>My HTML 5 Page</title>
</head>
<body>
<h1>{{hello}}</h1>
<input type="text" ng-model="hello" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js" />
</body>
</html>
Do I have to run this from a webserver? Can I not run this in just the browser? I've tried both ways and neither way worked for me. I just end up with a big {{hello}} -
{{hello}}
and there's no text input box and definitely no binding. Do I need all the other dependencies? Shouldn't the script tag line contain everything I need?
I do not have any modules or anything else. Just an HTML file with those lines of code.
Thanks for any insight you gurus might shed on this mystery.
You should check your console for errors which will probably tell you something like the module hello is not defined.
The above will only work if you have a script that runs angular.module("hello", []) or if you simply remove hello and just use ng-app with no argument.
Turns out it was 2 things...
I needed to remove the "hello" from ng-app
I cannot self-close a script tag. Finally code that worked:
<!DOCTYPE html>
<html ng-app>
<head lang="en">
<title>My HTML 5 Page</title>
</head>
<body>
<h1>{{hello}}</h1>
<input type="text" ng-model="hello" />
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0-beta.6/angular.min.js">
</script>
</body>
</html>
<html ng-app="page">
<head lang="en">
<title>My HTML 5 Page</title>
</head>
<body>
<div ng-controller="PageController as page" >
<h1>{{page.product.message}}</h1>
<input type="text" ng-model="hello" />
</div>
</body>
</html>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="js/app.js"></script>
</html>
code for app.js
<html ng-app="page">
<head lang="en">
<title>My HTML 5 Page</title>
</head>
<body>
<div ng-controller="PageController as page" >
<h1>{{page.product.message}}</h1>
<input type="text" ng-model="hello" />
</div>
</body>
</html>
<script type="text/javascript" src="lib/angular.min.js"></script>
<script type="text/javascript" src="js/app1.js"></script>
</html>
Related
This code should evaluate the part in between the double curly braces according to a tutorial I'm following. I'm new to angularjs. So, pardon me if I'm asking silly question. Here's the link to plnkr http://plnkr.co/edit/sFhDiA?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0" data-semver="2.0.0" src="https://code.angularjs.org/2.0.0-snapshot/angular2.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
<div> {{ 78 + 8 }} </div>
</body>
</html>
You are missing your ng-app directive name on your html. Which means Angular won't run on your page.
Look into the ngApp documentation here. You can get a clear idea from there!
Similar SO question is also available here
I have been trying to do some proof of concept and I was expecting Plunker to write 4 for the expression {{40/10}} but it never did. What's wrong with it? However I see Scott Allen was able to do so.
Here is my plunker link: https://plnkr.co/edit/OTuxWEMmlWObMgGy9o2Z?p=preview
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://code.angularjs.org/2.0.0-beta.0/angular2.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{40/10}}
</body>
</html>
This is because the script you import is Angular 2. If you import Angular 1.x.x, your example will work.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.angularjs.org/1.5.0/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
If you want to learn how to use Angular 2, look at their website.
You are linking to angular2 while using an angular1 directive ng-app.
Here is a link to a working plnkr link
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 40/10 }}
</body>
</html>
Angular 2 is a complete redesign from angular1, so a code working in Angular 1 will not work in Angular 2.
Added ng-app. But still it shows as plain text instead of the result. What's missing?
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="2.0.0-alpha.45"
src="https://code.angularjs.org/2.0.0-alpha.45/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 67 / 23 }}
</body>
</html>
I have found that the angular library given to you by Plunker doesn't work.
Simply replace the script element with the google-provided version, and you're away.
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script>
I wanted to make input mask, in case CNPJ.
Then I saw it here.
https://github.com/assisrafael/angular-input-masks/
But not getting to implement.
See the excerpt from my code, in which case it did not work.
<html>
<head>
<meta charset="utf-8">
<script src="angular.js"></script>
<script src="js/masks.min.js"></script>
<script>
angular.module('ui.utils.masks');
</script>
</head>
<body ng-app>
<ul>
<li>Teste</li>
</ul>
<div>
<label>CNPJ:</label>
<input type="text" ng-model="cnpj" ui-br-cnpj-mask>
</div>
</body>
</html>
What is missing to work?
Declare module like below.
angular.module('app',['ui.utils.masks'])
And then change ng-app on HTML like below.
ng-app="app"
This would help you. Thanks.
Here is an example of a minimal example for angularjs which works when saved as angular.html:
<!DOCTYPE html>
<html lang="en" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js"></script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
However I strongly believe in XML and I like to create all my html documents XML compliant. I tried to adapt the example and save it as angular.xhtml:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:ng="http://angularjs.org" ng:app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
The big changes are the xhtml-Namespace and the file extension ".xhtml". There is no error or anything. It's just that the page is displayed as if angular was not present.
How do I get angularjs working with an XML compliant file?
One of the best ways to do this is to use the HTML/XHTML data- attributes. You can write valid HTML and XHTML without having to include any angular namespace. This would be as follows:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" data-ng-app="">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
This is also beneficial when it comes to all other Angular declarations, such as ng-repeat and ng-show, etc.
<div ng-repeat="item in items">{{item.name}}</div> // This won't validate.
<div data-ng-repeat="item in items">{{item.name}}</div> // This will validate.
Note that your solution with bootstrapping the Angular app is also valid - but it's not really a fix for the issue you're having. (It's simply a different way to load your Angular app, which happened to work for your situation since you didn't have any other ng- directives in your markup.)
See a similar question and answer here.
I found a solution using manual setup. The code then looks like this:
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>My HTML File</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js" />
<script type="text/javascript">
angular.module('myApp', []);
angular.element(document).ready(function() {
angular.bootstrap(document, ['myApp']);
});
</script>
</head>
<body>
<p>Nothing here {{'yet' + '!'}}</p>
</body>
</html>
While this seems a suitable workaround for now, I'd still love to know what the problem is...