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 variable name.
$scope.greeting = function() { to create a function to display a greeting message.
<div> tag with ng-app and ng-controller directives to associate the module and controller with the HTML element.
<input> tag with ng-model directive to bind the scope variable name to the input field.
<button> tag with ng-click directive to associate the button with the greeting function.

Helpful links

Edit this code on GitHub

More of Angularjs

See more codes...