Can someone explain why the below code is not working?
I am new to Angular and am trying a very basic example.
The HTML simply prints {{data1}} instead of "hi!".
<!DOCTYPE html ng-app='myApp'>
<html>
<head>
<title></title>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js"></script>
<script>
var module1=angular.module('myApp',[]);
module1.controller('controller',function ($scope){
$scope.data1='hi!';
});
</script>
</head>
<body ng-controller='controller'>
<p>{{data1}}</p>
</body>
</html>
<!DOCTYPE html ng-app='myApp'>
<html>
needs to be
<!DOCTYPE html>
<html ng-app='myApp'>
Related
I am new in angularjs, so i try this script in Index.html like this:
<!DOCTYPE html>
<html lang="en" ng-app="DEMO">
<head>
<title></title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script src="angular.min.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.HelloMessage = "Hello Pejman";
}
</script>
</body>
</html>
but when i run this, it show {{HelloMessage}} instead of Hello Pejman , what is the problem?
EDIT : this is the tutorial:
You did not bootstrap angular module, that is why your code doesnt work. You must call ng-app in any HTML tag to notify Angular start in there. So all of the sub tags under the tag Angular declared will be able to use directives, scope, controller etc.
Please check here to understand how to create controller and use it : https://docs.angularjs.org/guide/controller
Try this:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Hello World</title>
<script src="angular.min.js"></script>
</head>
<body>
<h1 ng-app="demo" ng-controller="HelloWorldCtrl">{{HelloMessage}}</h1>
<script type="text/javascript">
var app = angular.module('demo', []);
app.controller('HelloWorldCtrl', function($scope) {
$scope.HelloMessage = "Hello Pejman";
});
</script>
</body>
</html>
I'm trying to make my AngularJS HelloWorld work but I can't. My code is the following:
<!DOCTYPE html>
<html np-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
</body>
The output:
{{mensagem}}
I searched about similar questions here in SO but found only questions with a missing ng-app atribute.
I tried opening my file both in Firefox and Chrome and I get the same error. Logging both angular and app reveal that they are both defined.
I don't know what I'm doing wrong.
In your HTML tag, you've misspelled ng-app, which is probably the main reason it's not working. You should also place the include for Angular down at the end of the body, which ensures the app and controller elements are defined before the script runs:
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Angular Test</title>
</head>
<body>
<div ng-controller="appCtrl">
{{mensagem}}
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("appCtrl",function($scope){
$scope.mensagem="HelloWorld!";
});
console.log(angular);
console.log(app);
</script>
</body>
</html>
My task is to show Hello, Angular! in the browser, using AngularJS.
This is my HTML:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Introduction to AngularJS Application</title>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
This is my JavaScript:
/// <reference path="../angular.js" />
var MainController = function ($scope) {
$scope.message = "Hello, Angular!";
};
And here's what I'm getting:
This is my expected result:
<!DOCTYPE html>
<html ng-app>
<head>
<title>Introduction to AngularJS Application</title>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>Hello, Angular!</h1>
</body>
</html>
The interpolation isn't functioning correctly. Why is this, and how can I fix it?
I have taken your code and updated it. You were missing the app name in ng-app. Click Run code snippet to see it working.
angular.module('myApp', []).controller('MainController', function($scope){
$scope.message = "Hello, Angular!";
});
<html ng-app="myApp">
<head>
<title>Introduction to AngularJS Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
On the HTML you're missing the Angular source code and your app name on ng-app directive.
On the JS you're missing the module declaration.
HTML should be something like
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<title>Introduction to AngularJS Application</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="Scripts/MyScripts/Example01Scripts.js"></script>
</head>
<body ng-controller="MainController">
<h1>{{message}}</h1>
</body>
</html>
and your Example01Scripts.js should be something like:
angular.module('MyApp', []).controller('MainController', function($scope){
$scope.message = "Hello, Angular!";
});
Looks like the module was missing. Have created a wee test script that will do what you wanted.
Code example here
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.
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...