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
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', [])
<html ng-app="notesapp">
<head>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Edit
For making small code like this work, we can actually define an empty ng-app.
Eg: <html ng-app = "">
If you however want to define ng-app with some value, we need to load that ng-app in javascript. It can be done in a separate js file or in the same html file with <script></script> tag. Please see below:
<script>
var app = angular.module('notesapp', []);
</script>
Please close the script tag in your head. Also angular needs ng-app for its functioning. Please use ng-app on the tag which encloses your angular content.
<html ng-app="notesapp">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.1/angular.min.js"></script>
</head>
<script>
var app = angular.module('notesapp', []);
</script>
<body>
<script type="text/javascript"></script>
NAME:<input ng-model="name" type="text"> <br/>
Hello: <span ng-bind="name"></span>
</body>
</html>
Also, as you know, Sublime is just an editor. It has nothing to do with angular. Cheers.
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
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
What is the Simplest 'Hello World' in AngularJS for a beginner. So far I have this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div data-ng-app="">
{{'Hello World' }}
</div>
<script src="angular.js"></script>
</body>
</html>
Simplest Hello World that shows 2-way databinding
<!doctype html>
<html lang="en" ng-app>
<head>
<title> Hello World </title>
</head>
<body ng-controller="MainCtrl">
<h1>{{helloWorld}}</h1>
<input type="text" ng-model="helloWorld"></input>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.min.js"></script>
<script type="text/javascript">
function MainCtrl($scope){
$scope.helloWorld = "Hello World";
}
</script>
</body>
</html>
edit:
A bit of explanation on what is what and why this is (in my view) a minimal Hello World app showcasing the power of AngularJS
The AngularJS library needs to be included
The custom attribute ng-app is added to kick of the angular application. This directive signals AngularJS to auto-bootstrap an application
The ng-controller directive is added and it's associated javascript function shows exposing an object by assigning it to the injected $scope
The double brackets expression {{helloWorld}} shows the convention used by AngularJS to output model values.
The ng-model directive is used to bind the helloWorld object and shows the power of AngularJS two-way datababinding
Simplest AngularJS 'Hello World' - "The Good Way"
<!doctype html>
<html data-ng-app="myApp">
<head>
<!-- .... -->
</head>
<body>
<div data-ng-controller="MyController">
<input type="text" data-ng-model="name" />
<p>Hello {{name}}</p>
</div>
<script src="angular.js"></script>
<script>
var myApp = angular.module("myApp", []);
myApp.controller("MyController", ["$scope", function($scope) {
$scope.name = "World";
}]);
</script>
</body>
</html>
Found on prettycode.org:
<!doctype html>
<html ng-app>
<head>
<title> Hello World </title>
</head>
<body>
Your name: <input type="text" ng-model="name"></input>
<p ng-show="name">Hi, {{ name }}!</p>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.js">
</script>
</body>
</html>