How to display Hello with Your name using the AngularJs

June 11, 2019 XpertPhp Comments 0 Comment

Today, We will start to learn with angularjs. So first We will discuss how to display Hello with Your name using the AngularJS. we will take one textbox and create the angular app using the bootstrap.

We will define that app using the ng-app=”firstApp” and ng-controller=”firstCtrl”. After then we will assign static word “World” with your name using the $scope object. When you type in textbox then data will be bind into the h2 tag.

So, I think would you like the below example.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>how to display Hello with Your name using the AngularJs - XpertPhp</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script>
 
<script>
var app = angular.module('firstApp', []);
app.controller('firstCtrl', function($scope) {
    $scope.txtName = "World";
});
</script>
</head>
<body ng-app="firstApp">
	<div class="container">
	  <h2>How to display Hello with Your name using the AngularJs</h2>
	  <div ng-controller="firstCtrl">
		  <label for="txtName">Enter Your Name:</label> 
		  <input id="txtName" ng-model="txtName" class="form-control" type="text" placeholder="Enter Your Name">
		  <h2>Hello {{txtName}}</h2>
	  </div>
	</div>
</body>
</html>

<!DOCTYPE html>

<head>

<title>how to display Hello with Your name using the AngularJs - XpertPhp</title>

var app = angular.module('firstApp', []);

app.controller('firstCtrl', function($scope) {

$scope.txtName = "World";

});

</script>

</head>

<h2>How to display Hello with Your name using the AngularJs</h2>

<label for="txtName">Enter Your Name:</label>

<h2>Hello {{txtName}}</h2>

</div>

</body>

</html>

Show Demo

Please follow and like us:

Related posts: