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>
Related
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 running it using XAMPP but it's not working and showing output of {{"Hello"+"you"}} rather than Hello you
<!DOCTYPE HTML>
<html>
<head ng-app="store">
<link rel="stylesheet" type="text/css" href="bootstrap.min.css"/>
</head>
<body>
<script type="text/javascript" src="angular.min.js">
</script>
<script >
var abc=angular.module('store',[]);
</script>
<p>
{{"Hello"+"you"}}
</p>
</body>
</html>
First, you should create a controller in your JS, then you use it in your view.
You can do it setting the ng-controller directive, as below:
<!DOCTYPE html>
<html ng-app="store">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.min.js"></script>
<script>
angular.module('store', [])
.controller('storeCtrl', function($scope) {
});
</script>
</head>
<body ng-controller="storeCtrl">
<p>
{{"Hello"+"you"}}
</p>
</body>
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>
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...