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...
Related
This is a very basic ng-click example. I can't seem to get it to work. Not sure what the issue is. I swear I've used Angular before! Here's a jsbin:
JS Bin
<!DOCTYPE html>
<html ng-app>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<h1>{{1 + 2}}</h1>
<button ng-click="alert('hello world')">Click me!</button>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.0/angular.min.js"></script>
</body>
</html>
Module:
angular.module('app', []);
It will be helpful to you while doing angularjs you should add the controller, In your case, I have created a function and passed a string value to show a message by the alert.
var app=angular.module('app', []);
app.controller('testCtrl',function($scope){
$scope.showalert=function(str){
alert(str);
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-strict-di ng-controller="testCtrl">
<h1>{{1 + 2}}</h1>
<button ng-click="showalert('hai this is angularjs click event')"> click Me!..</button>
</div>
Here i try to Angular setup in html page for that i wrote simple code as Below
MyApp.js
/// <reference path="angular.js" />
var app = angular.module('MyApp', [])
debugger;
app.controller('HomeCtrls', function ($scope) {
$scope.msg = "This is MyApp....";
})
Master.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head ng-app="MyApp">
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
Here why my msg is not Loading This is MyApp....
ng-app inject wrong place. Not <head ng-app="MyApp">, Inject html or body or div tag as per your web application need.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="../../Script/angular.js"></script>
<script src="../../Script/MyApp.js"></script>
</head>
<body ng-app="MyApp" ng-controller="HomeCtrls">
{{msg}}
</body>
</html>
the problem is with your angular script, is not loaded, check your path, you can use the CDN also :
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>
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>
Using Angular v1.3.13. Version1 does not work in Chrome:
<!doctype html>
<html lang="en" ng-app>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
}
</script>
</body>
</html>
Error:
Argument 'HelloWorldCtrl' is not a function, got undefined
Version2 works fine:
<!doctype html>
<html lang="en" ng-app=myApp>
<head>
<meta charset="utf-8">
<title>Hello World</title>
</head>
<body>
<h1 ng-controller="HelloWorldCtrl">{{helloMessage}}</h1>
<script src="./bower_components/angular/angular.js"></script>
<script type="text/javascript">
angular.module('myApp', []).controller('HelloWorldCtrl',
function HelloWorldCtrl($scope) {
$scope.helloMessage = "Hello World";
});
</script>
</body>
</html>
Version1 is the original code from a Pluralsight course. In the course the code works fine. Did I make an error or does this no longer work due to changes in AngularJs?
From angularV1.3 to use functions defined on window scope as controllers we need call alloGlobals method defined on $controllerProvider.
module.config(function($controllerProvider){
$controllerProvider.allowGlobals();
});
documentation
changelog
Yes. Using global functions is not supported anymore. But it's been quite a long time: since 1.3.0
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'>