Table of Contents

Hello <first name> <last name> with AngularJS

Rumman Ansari July 28, 2024 638 views

Hello with AngularJS

1. Hello <first name> <last name> with AngularJS

Write a program that uses first name and last name as the input to display the message Hello <first name> < last name>.

Use ng-controller and ng-module (use scope 4 variables first_name and last_name for input fields).


<!-- Hmtl -->
<html>
<head>
<script src="lib/angularjs/angular.min.js"></script>
<script src="lib/angularjs/angular-mocks.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="first_name"><br><br>
<input ng-model="last_name"><br><br>

Hello <span type="text"><!-- add your first name and last name model values here as expressions--></span> !

</div>

</body>
</html>

Solution

index.html


  <!-- Hmtl -->
<html>
<head>
<script src="lib/angularjs/angular.min.js"></script>
<script src="lib/angularjs/angular-mocks.js"></script>
<script src="index.js" type="text/javascript"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="first_name"><br><br>
<input ng-model="last_name"><br><br>

Hello <span type="text"> <span>{{first_name}} {{last_name}}</span> <!-- add your first name and last name model values here as expressions--></span> !

</div>

</body>
</html>

index.js


// JS
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
    $scope.first_name = "";
    $scope.last_name = "";
});