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
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
I need to alert the path name by clicking the link tag but it's not working for me. Since I am new to angular I am confused about where I went wrong. Can somebody help me with this?
Here is my index.html
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#2.0.0-alpha.20" data-semver="2.0.0-alpha.20" src="https://code.angularjs.org/2.0.0-alpha.20/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<script>
var myApp = angular.module('myApp',[]);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
}
}
</script>
</body>
</html>
And here is my plnkr:http://plnkr.co/edit/Cir7Ardx3OVvwPWYJNNv?p=preview
I cleaned up your Plunkr demo and forked it here:
http://plnkr.co/edit/YuinLcjb6OU7VsdSMca9?p=preview
First, I wasn't sure if you intended to target the unstable 2.0 version or not, so I changed it to target the latest stable release of AngularJS (1.3.15). Next, I moved your script to the script.js file and formatted your controller properly.
Now the HTML looks like:
<!DOCTYPE html>
<html>
<head>
<script data-require="angular.js#1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
<script src="script.js"></script>
</head>
<body ng-app="myApp" ng-controller="ProductCtrl">
<form name="frmMain" id="frmMain">
<input type="file" name="myFile" id="myFile" />
Show Name
</form>
<hr />
{{ name }}
</body>
</html>
and your script looks like this:
angular.module('myApp', [])
.controller("ProductCtrl", ProductCtrl);
function ProductCtrl($scope) {
$scope.showFileName= function(){
var fil = document.getElementById("myFile");
alert(fil.value);
};
}
This is half the battle: making sure that your framework is working correctly. Now, how to show the full path of the selected file? Here are a few links to help you with that (or not, actually):
How to get the full path of the file from a file input
Get file path through type=file
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