Unable to access controller in Angular JS

Question

I am new to Angular JS and was wanting to start with the login form. I read a few online materials and decided to give it a go.

Below is my code, and when I click "Login", nothing happens, I am not sure if my html script talks to the controller or did I code something wrong in controller.

<!DOCTYPE html>
<html data-ng-app="loginAuth">
	<head>
		<title>
		</title>
	</head>
	<body>
	
	<h2>Angular Authentication</h2>

	<div data-ng-controller="loginController">
		<label>Username</label>
		<input type="text" name="username" data-ng-model="login.username"/>
		<br/>
		
		<label>Password</label>
		<input type="password" name="password" data-ng-model="login.password"/>	
		<br/>
		
		<input type="button" ng-submit="login.submit(login.username, login.password)" value="Login"/>
		<br/><br/>
		{{login.message}}
	</div>
	
	<script src="angular.min.js"></script> 
	
	<script>
	
	'use strict';
	
	angular.module('loginAuth')
	.controller('loginController', function ($scope)
	{
	
	function login.submit(username, password)
	{
		if (username === 'admin' && password === 'test99')
		{
		 .then(onSuccess);
		}
		 else
		 {
		 .catch(onError);
		 }
	}
	
	function onSuccess()
	{
		login.message = 'Login Successful!';
	}
	function onError(reason)
	{
		login.message = reason.message;
	}

	});
	 
	</script>
	</body>

</html>

Can someone please help me out.

Pankaj Parkar · Accepted Answer · 2015-08-19 21:12:17Z

1

You app should be define in proper way.

angular.module('loginAuth', [])

Also you need to define your controller methods correctly

Controller

angular.module('loginAuth')
.controller('loginController', function($scope) {
  $scope.login = {};
  $scope.login.submit = function(username, password) {
    if (username === 'admin' && password === 'test99') {
      //.then(onSuccess); //this is something wiered
    } else {
      //.catch(onError); //this is something wiered
    }
  }

  function onSuccess() {
    $scope.login.message = 'Login Successful!';
  }

  function onError(reason) {
    $scope.login.message = reason.message;
  }

});

answered Aug 19, 2015 at 21:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1234 Over a year ago

I had changed my code to look like something below, still am unable to get through the issue angular.module('loginAuth', []) .controller('loginController', function ($scope) { function login.submit(username, password) { if (username === 'admin' && password === 'test99') { login.message = 'Login Successful!'; } else { login.message = 'Login failed!'; } }

Pankaj Parkar Over a year ago

you have declared function in wrong way..please look at the code which i added in my answer.

user1234 Over a year ago

Thanks for this. I see the issue, the controller seems to load fine now in the webpage and I don't seethe {{login.message}} bind on screen. But however, the data binding doesnt seem to work upon successful authentication or a failed authentication. Sorry if am asking too much but I would like to get my understanding right on the basics as I learn them

Tj Gienger · Accepted Answer · 2015-08-19 22:10:31Z

0

I made changes to your original code to make it work. Hopefully this will help you learn some Angular :)

<!DOCTYPE html>
<html data-ng-app="loginAuth">
	<head>
		<title>
		</title>
	</head>
	<body>
	
	<h2>Angular Authentication</h2>

	<div data-ng-controller="loginController">
		<label>Username</label>
		<input type="text" name="username" data-ng-model="login.username"/>
		<br/>
		
		<label>Password</label>
		<input type="password" name="password" data-ng-model="login.password"/>	
		<br/>
		
		<input type="button" ng-click="login.submit(login.username, login.password)" value="Login"/>
		<br/><br/>
		{{login.message}}
	</div>
	
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.min.js"></script> 
	
	<script>
	
	'use strict';
	
	angular.module('loginAuth', [])
	.controller('loginController', function ($scope) {
    $scope.login = {};
	$scope.login.submit = function(username, password)
	{
		if (username === 'admin' && password === 'test99')
		{
		 onSuccess();
		}
		 else
		 {
		 onError({message:'login failed'});
		 }
	}
	
	function onSuccess()
	{
		$scope.login.message = 'Login Successful!';
	}
	function onError(reason)
	{
		$scope.login.message = reason.message;
	}

	});
	 
	</script>
	</body>

</html>

answered Aug 19, 2015 at 22:10

Tj Gienger

1,4051 gold badge13 silver badges17 bronze badges

1 Comment

user1234 Over a year ago

Thanks! That worked, I see that I had used ng-submit, rather than ng-click for the button event. Thank you again!

Collectives™ on Stack Overflow

Unable to access controller in Angular JS

2 Answers 2

3 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related