Hello <first name> <last name> with AngularJS

Rumman Ansari   Software Engineer   2023-01-28   358 Share
☰ Table of Contents

Table of Content:

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 = "";
});
‹ Previous -   Bootstrapping AngularJS
Next › -   Assignment: Even or Odd with AngularJS