I am following a simple interpolation example but could not able to execute it properly. Here is my HTML code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="js/angular.js"></script>
</head>
<body>
<div ng-app="email" ng-controller="EmailController">
To: <input type="email" ng-model="to" /> <br>
Comment: <textarea ng-model="emailBody"></textarea> <br>
<pre>__previewText__</pre>
</div>
<script src="js/app.js"></script>
</body>
</html>
My app.js is :
emailApp= angular.module('email',['emailParser']);
emailApp.controller('EmailController',['$scope','EmailParser',function($scope,EmailParser){
$scope.$watch('emailBody',function(body){
if(body){
$scope.previewText= EmailParser.parse(body,{
to:$scope.to
});
console.log("body: " + $scope.previewText);
}
})
}]);
emailParser= angular.module('emailParser',[]);
emailParser.config(['$interpolateProvider',function($interpolateProvider){
$interpolateProvider.startSymbol="__";
$interpolateProvider.endSymbol="__";
}]);
emailParser.factory('EmailParser',['$interpolate',function($interpolate){
return {
parse: function(text,context){
var template= $interpolate(text);
return template(context);
}
};
}]);
Please advise.
The documentation says
Methods
startSymbol([value]);
...
endSymbol([value]);
So, these are methods, not attributes. Your code should thus be
$interpolateProvider.startSymbol("__");
$interpolateProvider.endSymbol("__");
although I'm not sure it's a good idea to use the same sequence for end and for start.
Once this fix is done, your code works as expected (at least, as I expect it to work, since you didn't explain what your expectations were): type foo#bar.comin the to field, type __to__in the comment text area, and the preview will display foo#bar.com.
Working plunkr: http://plnkr.co/edit/om4ShlL29faYfdLXxIFV?p=preview
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', [])
I am learning angular.. I tried to run a small example,but wasn't able to render correct output.Can anybody help?
index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>AngularJS Tutorial</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
</head>
<body ng-app='app' ng-controller='MainController as main'>
<div class='container'>
<h1>{{ title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
</div>
</body>
</body>
</html>
app.js
angular.module('app', []);
angular.module('app').controller("MainController", function($scope){
$scope.title = 'AngularJS Nested Controller Example';
});
angular.module('app').controller("SubController", function(){
this.title = 'Sub-heading';
});
I am not able to figure out why angular variables are getting displayed as normal text instead of its assigned value. kindly help...
It looks like you are missing a link to your app.js file.
Just a tip when referencing your .js files, make sure you reference any javascript which uses Angular AFTER the line where you reference angular.js
So your references should look something like this:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<script src="app.js"></script> <!-- this is the one you are missing -->
Please, plunkr
It works
<h1>{{main.title }}</h1>
<div ng-controller='SubController as sub'>
<h2>{{sub.title}}</h2>
<p>If we were not using the <strong>ControllerAs</strong> syntax we would have a problem using title twice!</p>
</div>
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've copied this code directly out of a book, and from what I can tell it should work, but it isn't. I'm not getting any errors, but the Recommendation value is just displaying the angular string (in curly braces), and the console.logs are never getting hit. Where am I going wrong? (Obviously there's a typo somewhere, but I don't know if it's my code or the book's).
<!DOCTYPE html>
<html>
<head>
<title>Calculator</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
</head>
<body>
<form data-ng-controller="CalcController">
Starting: <input data-ng-change="computeNeeded()" data-ng-model="funding.startingEstimate">
Recommendation: {{funding.needed}}
</form>
<script>
function CalcController($scope) {
$scope.funding = {startingEstimate:0};
computeNeeded = function() {
console.log("running");
$scope.funding.needed = $scope.funding.startingEstimate * 10;
console.log("funding needed: " + $scope.funding.needed);
};
$scope.$watch('funding.startingEstimate', computeNeeded);
}
</script>
</body>
</html>
Looks like this is missing an ng-app tag somewhere (I'd put it on the html). That directive tells Angular to bootstrap itself onto the page.
<html ng-app>
Edit: docs for ng-app: http://docs.angularjs.org/api/ng.directive:ngApp