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.
Related
I don't understand why the plunker IDE won't correctly render angular code that has a script reference to the latest version of angular v2.0.0
When I run the following code it works:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" data-semver="1.5.8" src="https://code.angularjs.org/1.5.8/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app="">
<h1>Hello Plunker!</h1>
{{ 7 / 22 }}
</body>
</html>
Yet when I run this code it does not work:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#*" 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>
{{ 7 / 22 }}
</body>
</html>
Link to Plunk: https://plnkr.co/edit/YiUoXpiNIT29GDwO5Bbd?p=preview
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 have written the following program to print Hello, Angular! but it does not work. Please guide.
<!DOCTYPE html>
<html ng-app="gemStore" ng-init="person={text:'Hello, Angular!'>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1><div>
{{person.text}}
</div></h1>
</body>
</html>
You need a closing brace and quote for the ng-init
ng-init="person={text:'Hello, Angular!'}"
Replace :
ng-init="person={text:'Hello, Angular!'>
with:
ng-init="person={text:'Hello, Angular!'}">
You have typo mistake, replace your code with below.
<!DOCTYPE html>
<html ng-app="gemStore" ng-init="person={text:'Hello, Angular!'}>
<head>
<link rel="stylesheet" type="text/css" href="bootstrap.min.css" />
<script type="text/javascript" src="angular.min.js"></script>
<script type="text/javascript" src="app.js"></script>
</head>
<body>
<h1><div>
{{person.text}}
</div></h1>
</body>
</html>
You forgot the right bracet and the quote. See the example below.
I'm trying to go through a simple tutorial on AngularJS and can't seem to get past the first step. {{ 10 x 10}} isn't appearing as 100. Any ideas?
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>
You might have mentioned multiple versions of ng-app (probably in <html> tag).Otherwise your code is working fine
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.4.0" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-app>
<h1>Hello Plunker!</h1>
{{ 10*10}}
</body>
</html>
Here's the demo
I want to distribute my app in two similar variants. Only the start screen of both variants is different.
What's the right pattern for this setup? I think using a index_a.html and index_b.html is a good start?!
My index.html looks like this
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="utf-8">
<title>myApp</title>
<link rel="stylesheet" href="styles/application.css"/>
</head>
<body ng-controller="AppController">
<div ng-view></div>
<script src="lib/angular/angular.js"></script>
<script src="scripts/app.js"></script>
<script src="scripts/services.js"></script>
<script src="scripts/controllers.js"></script>
<script src="scripts/filters.js"></script>
<script src="scripts/directives.js"></script>
</body>
</html>
Thanks