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
Related
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 am new to web development, trying to learn angularjs, and got stuck at very first step, this code works fine when I remove ng-controller but in this condition the browser shows Hello, {{name}}.
What am I doing wrong?
index.html
<!DOCTYPE html>
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
<head >
<script src="js/angular.min.js"></script>
<script type="text/javascript" src="js/controller.js"></script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<meta character="uft-8">
<title></title>
</head>
<body>
<h1>Hello, {{name}}</h1>
<input type="text" ng-model="name">
</body>
</html>
controller.js
function AppCtrl($scope)
{
$scope.name: "world";
}
You are calling module named app which you didn't declared.
<html lang="en" ng-app="app" ng-controller="AppCtrl" >
If you provide module name then controller have to bind with that module.
To assign a value you have to use = not :
$scope.name: "world";
Try Like this
$scope.name= "world";
Moreover Global controller isn't allowed from 1.3.x
Try like this
var app = angular.module("app", []);
app.controller("AppCtrl", function($scope) {
$scope.name= "world";
});
JSFIDDLE
I'm starting with angularjs and I'm having problems to put to work a really basic example with version 1.3.1. I followed a tutorial with the following code:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="UTF-8">
<title>Angular Demo</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.1/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h1>{{author.name}}</h1>
<p>{{author.company}}</p>
</div>
<script>
function MyController($scope) {
$scope.author = {
'name': 'Some Name',
'company': 'Some Company'
}
}
</script>
</body>
</html>
And I'm getting the following result:
{{author.name}}
{{author.company}}
It seems that angular is not properly initialized.
Give a name to your app:
<html lang="en" ng-app="app">
And then initialize it and your controller properly:
var app = angular.module('app', []);
app.controller('MyController',MyController);
http://plnkr.co/edit/dRWz0ZPQae75PlJmgSTM?p=preview
You can/should move your script to the <head> section as well, so that {author.name} doesn't flash on the screen before the controller is initialized.
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
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...