angularjsHow do I create an example using AngularJS?
The following example uses AngularJS to create a simple application that will display a greeting message when a button is clicked.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "";
$scope.greeting = function() {
alert("Hello " + $scope.name);
}
});
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
Name: <input type="text" ng-model="name">
<button ng-click="greeting()">Greet</button>
</div>
</body>
</html>
This example creates an AngularJS application with a controller named myCtrl
that has a single scope variable name
. The controller also has a function named greeting
that will display an alert box with a greeting message when called. The HTML body contains a single div element that is associated with the myApp
module and myCtrl
controller. Inside the div element, there is an input field and a button. The input field is bound to the scope variable name
using the ng-model
directive. The button is associated with the greeting
function using the ng-click
directive.
Parts of the example:
<script>
tag to include the AngularJS library.var app = angular.module('myApp', []);
to create the AngularJS module.app.controller('myCtrl', function($scope) {
to create the controller with a single scope variablename
.$scope.greeting = function() {
to create a function to display a greeting message.<div>
tag withng-app
andng-controller
directives to associate the module and controller with the HTML element.<input>
tag withng-model
directive to bind the scope variablename
to the input field.<button>
tag withng-click
directive to associate the button with thegreeting
function.
Helpful links
More of Angularjs
- How can I use Angular to zoom in and out of a div?
- How do I use Angular to zip files?
- How can I create an editable AngularJS application?
- How do I integrate an Angular Yandex Map into my software development project?
- How can I prevent XSS attacks when using AngularJS?
- How can I become an Angular expert from a beginner level?
- How do I use Angular Zone to run my code?
- How can I use Angular to zoom in on an image?
- How do I use Angular Zone to detect and run Angular change detection?
- How can I use AngularJS to create a zone in my software development project?
See more codes...