CODEWITHSUNDEEP
javascriptangularjsangularjs-directive
PoolDead
PoolDead

Reputation: 1

Why does my controller displays {{message}}, like this instead of actual configured message

<!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 trying to implement a basic login page using AngularJs, but however the browser doesn't display the actuall scope message, instead it displays the tag as {{message}}.

//creating a module
var loginPage = angular.module("LoginPage",[]);

//registering the above 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){            //checking for length
			$scope.message1 = "enter name";   //message 1
			e.preventDefault();
		}else{
			$scope.message1=""; // message 2
		}
		if($scope.pw.length == 0){
			$scope.message2 = "enter password";
			e.preventDefault();
		}else{
			$scope.message2="";
		
	}
}});

Upvotes: 0

Views: 50

Answers (1)

I. Ahmed
I. Ahmed

Reputation: 2534

The angular JS was not included properly in your code. Please add it properly. The working version is given below:

I just changed the following line:

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

If you want to use the downloaded version of the angular library, please check your path and file name.

//creating a module
var loginPage = angular.module("LoginPage",[]);

//registering the above 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){            //checking for length
			$scope.message1 = "enter name";   //message 1
			e.preventDefault();
		}else{
			$scope.message1=""; // message 2
		}
		if($scope.pw.length == 0){
			$scope.message2 = "enter password";
			e.preventDefault();
		}else{
			$scope.message2="";
		
	}
}});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
</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>

Upvotes: 1

Related Questions