<!DOCTYPE html>
<html>
<head>
<script src="js/angular.js"></script>
<script src="js/Script.js"></script>
</head>
<body ng-app="LoginPage" ng-controller = "LoginPageController">
<form action = "next.html" ng-submit="fun1($event)">
username : <input name = "username" ng-model="un">
<div>{{message1}}</div>
password : <input type = "password" name = "password" ng-model="pw">
<div>{{message2}}</div>
<input type = "submit" value = "login">
</form>
</body>
</html>I am currently working on developing a simple login page using AngularJs. Unfortunately, I have encountered an issue where the browser is not displaying the expected scope message, but rather showing the tag as {{message}}.
//defining a new module
var loginPage = angular.module("LoginPage",[]);
//attaching the controller to the module
loginPage.controller("LoginPageController",function ($scope){
$scope.un = "";
$scope.pw = "";
$scope.message1="";
$scope.message2="";
$scope.fun1 = function(e){;
if($scope.un.length == 0){ //verifying length
$scope.message1 = "Please enter your username"; //verification message 1
e.preventDefault();
}else{
$scope.message1=""; // verification message 2
}
if($scope.pw.length == 0){
$scope.message2 = "Please enter your password";
e.preventDefault();
}else{
$scope.message2="";
}
}});