mark mark - 1 month ago 8
AngularJS Question

Angular JS Multiple controller not working

Hello all i am doing a simple login and registration app. I am using two controllers one for login and one for sign up on same html page.The login is working not the registration.Where am i doing wrong.

<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<meta charset="UTF-8">
<title>WeBeR</title>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer- reset/2.0/reset.min.css">
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css? family=Roboto:400,100,300,500,700,900|RobotoDraft:400,100,300,500,700,900'>
<link rel='stylesheet prefetch' href='http://maxcdn.bootstrapcdn.com/font- awesome/4.3.0/css/font-awesome.min.css'>
<link rel="stylesheet" href="resources/css/style.css">
<link rel="stylesheet" href="resources/css/animate.css">
</head>
<body>
<div class="container">
<div class="top">
<h1 id="title" class="hidden"><span id="logo"><span><br><br><br><br> </span></span></h1>
</div>
<div class="login-box animated fadeInUp">
<div class="module form-module">
<div class="toggle">
<h3> SignUp</h3>
<i class="fa fa-times fa-pencil"></i>
<div class="tooltip">
Register
</div>
</div>
<div class="form" ng-controller="SignUpController as ctrl">
<h2>LogOn</h2>
<form name="ctrl.signupForm" ng-submit="ctrl.signup()">
<!-- *************************************USERNAME********************************************************************** -->
<div class="error" role="alert" ng-show="errorMsg"><strong>{{errorMsg}}</strong></div><br>
<div class="form-group" ng-class="{'has- error':ctrl.hasErrorClass('userName')}">
<input type="text" id="userName" name="userName" required placeholder="UserName"
ng-model="ctrl.newCustomer.userName" ng- model-options="{ updateOn : 'default blur' }"
ng-focus="ctrl.toggleUsernamePrompt(true)" ng-blur="ctrl.toggleUsernamePrompt(false)"/>
</div>
********************PASSWORD**********************************************************************
<div ng-class="{'has- error':ctrl.hasErrorClass('password')}">
<input type="password" id="password" required placeholder="Password"
type="{{ctrl.getPasswordType()}}"
ng-model-options="{ updateOn : 'default blur' }"
ng-model="ctrl.newCustomer.password"/>
</div>
<button type="submit">Sign In</button>
</form>
</div>
<!-- *************************************************REGISTRATION******************************************************** -->
<div class="form" ng-controller="RegistrationController as rctrl">
<h2>Create an account</h2>
<form name="rctrl.regForm" ng-submit="rctrl.register()">
<!-- *************************************************FIRSTNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('firstName')}">
<input id="firstName" name="firstName" class="form-control" type="text" required placeholder="First Name"
ng-model="rctrl.newCustomer1.firstName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleFirstNamePrompt(true)" ng-blur="rctrl.toggleFirstNamePrompt(false)" />
</div>
<!-- *************************************************LASTNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('lastName')}">
<input id="lastName" name="lastName" class="form-control" type="text" required placeholder="Last Name"
ng-model="rctrl.newCustomer1.lastName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleLastNamePrompt(true)" ng-blur="rctrl.toggleLastNamePrompt(false)"/>
</div>
<!-- *************************************************EMAIL******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('email')}">
<input id="email" name="email" class="form-control" type="email" required placeholder="E-mail"
ng-model="rctrl.newCustomer1.email" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleEmailPrompt(true)" ng-blur="rctrl.toggleEmailPrompt(false)" email-available/>
<div class="message-animation" ng-if="rctrl.regForm.$pending.emailExists">checking....</div>
<div class="message-animation" ng-if="rctrl.regForm.$error.emailExists">Email exists.</div>
</div>
<!-- *************************************************USERNAME******************************************************** -->
<div class="form-group" ng-class="{'has-error':rctrl.hasErrorClass('userName')}">
<input id="userName" name="userName" class="form-control" type="text" required placeholder="UserName"
ng-model="rctrl.newCustomer1.userName" ng-model-options="{ updateOn : 'default blur' }"
ng-focus="rctrl.toggleUsernamePrompt(true)" ng-blur="rctrl.toggleUsernamePrompt(false)" user-available/>
<div class="message-animation" ng-if="rctrl.regForm.$pending.userExists">checking....</div>
<div class="message-animation" ng-if="rctrl.regForm.$error.userExists">UserName exists already.</div>
</div>
<!-- *************************************************PASSWORD******************************************************** -->
<div class="form-group">
<div class="input-group" ng-class="{'has-error':rctrl.hasErrorClass('password')}">
<input id="password" name="password" class="form-control" required placeholder="Password"
type="{{rctrl.getPasswordType()}}"
ng-model-options="{ updateOn : 'default blur' }"
ng-model="rctrl.newCustomer1.password"
/>
</div>
</div>
<button>Register</button>
</form>
</div>
<div class="cta">
</div>
</div>
</div>
</div>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"> </script>
<script src="resources/js/register.js"></script>
<script src="resources/js/animate.js"></script>
<script src="resources/js/login.js"></script>
</body>
</html>


My JS

angular.module('MyApp', [])
.controller('SignUpController',function($scope, $http) {

var ctrl = this, newCustomer = {
userName : '',
password : ''
};

var signup = function() {
if (ctrl.signupForm.$valid) {
ctrl.showSubmittedPrompt = true;
submitForm();
clearForm();
}
};

var register = function() {
if (ctrl.signupForm.$valid) {
ctrl.showSubmittedPrompt = true;
alert("success");
}
};


var clearForm = function() {
ctrl.newCustomer = {
userName : '',
password : ''
};
ctrl.signupForm.$setUntouched();
ctrl.signupForm.$setPristine();
};


var submitForm = function(userName, password) {

$http({
method : 'POST',
url : 'http://localhost:8081/Classmate/user/getvalid',
data : {

'userName' : $scope.ctrl.newCustomer.userName,
'password' : $scope.ctrl.newCustomer.password

},
headers : {
'Content-Type' : 'application/json'
}
}).success(function(data, status, headers, config) {
console.log(data);
if (data == false) {
var path = "/Classmate/view.jsp";
window.location.href = path;
} else {
$scope.errorMsg = "Invalid Credentials";
}
}).error(function(data, status, headers, config) {
$scope.errorMsg = 'Unable to submit.Please try after sometime.';
})
};

var getPasswordType = function() {
return ctrl.signupForm.showPassword ? 'text' : 'password';
};

var toggleUsernamePrompt = function(value) {
ctrl.showUsernamePrompt = value;
};

var hasErrorClass = function(field) {
return ctrl.signupForm[field].$touched
&& ctrl.signupForm[field].$invalid;
};

var showMessages = function(field) {
return ctrl.signupForm[field].$touched
|| ctrl.signupForm.$submitted
};

ctrl.showUsernamePrompt = false;
ctrl.showSubmittedPrompt = false;
ctrl.toggleUsernamePrompt = toggleUsernamePrompt;
ctrl.getPasswordType = getPasswordType;
ctrl.hasErrorClass = hasErrorClass;
ctrl.showMessages = showMessages;
ctrl.newCustomer = newCustomer;
ctrl.signup = signup;
ctrl.clearForm = clearForm;
})
/*********************************************REG CONTROLLER*******************************************************/
.controller('RegisterController', function($scope, $http) {
var rctrl = this, newCustomer1 = {
firstName : '',
lastName : '',
email : '',
zipName : '',
userName : '',
password : ''
};

var register = function() {
if (rctrl.regForm.$valid) {
rctrl.showSubmittedPrompt = true;
submitRegForm();
clearForm();
}
};

var clearForm = function() {
rctrl.newCustomer1 = {
firstName : '',
lastName : '',
email : '',
userName : '',
password : ''
};
rctrl.regForm.$setUntouched();
rctrl.regForm.$setPristine();
};

var submitRegForm = function() {

var formData = {
'firstName' : $scope.rctrl.newCustomer1.firstName,
'lastName' : $scope.rctrl.newCustomer1.lastName,
'email' : $scope.rctrl.newCustomer1.email,
'userName' : $scope.rctrl.newCustomer1.userName,
'password' : $scope.rctrl.newCustomer1.password
}
var response = $http.post(
'http://localhost:8081/Classmate/user/save', formData);
response.success(function(data, status, headers, config) {
/*
* alert( "Congrats,"+JSON.stringify(data.firstName)+"
* Welcome aboard.");
*/
var path = "/Classmate/sample.jsp";
window.location.href = path;
});
response.error(function(data, status, headers, config) {
alert("Error Details1: " + JSON.stringify({
data : data
}));
});
};

var getPasswordType = function() {
return rctrl.regForm.showPassword ? 'text' : 'password';
};

var toggleEmailPrompt = function(value) {
rctrl.showEmailPrompt = value;
};

var toggleUsernamePrompt = function(value) {
rctrl.showUsernamePrompt = value;
};

var toggleFirstNamePrompt = function(value) {
rctrl.showFirstNamePrompt = value;
};

var toggleLastNamePrompt = function(value) {
rctrl.showLastNamePrompt = value;
};

var hasErrorClass = function(field) {
return rctrl.regForm[field].$touched
&& rctrl.regForm[field].$invalid;
};

var showMessages = function(field) {
return rctrl.regForm[field].$touched
|| rctrl.regForm.$submitted
};

rctrl.showLastNamePrompt = false;
rctrl.showFirstNamePrompt = false;
rctrl.showEmailPrompt = false;
rctrl.showUsernamePrompt = false;
rctrl.showSubmittedPrompt = false;
rctrl.toggleEmailPrompt = toggleEmailPrompt;
rctrl.toggleUsernamePrompt = toggleUsernamePrompt;
rctrl.toggleFirstNamePrompt = toggleFirstNamePrompt;
rctrl.toggleLastNamePrompt = toggleLastNamePrompt;
rctrl.getPasswordType = getPasswordType;
rctrl.hasErrorClass = hasErrorClass;
rctrl.showMessages = showMessages;
rctrl.newCustomer1 = newCustomer1;
rctrl.register = register;
rctrl.clearForm = clearForm;
})

.directive(
'emailAvailable',
function($timeout, $q, $http) {
return {
restrict : 'AE',
require : 'ngModel',
link : function(scope, elm, attr, model) {
model.$asyncValidators.emailExists = function(email) {
return $http.get(
'http://localhost:8081/Weber/user/getemail? email='
+ email).then(function(res) {
+$timeout(function() {
model.$setValidity('emailExists', res.data);
console.log(res.data);
}, 1000);
});

};
}
}
})

.directive(
'userAvailable',
function($timeout, $q, $http) {
return {
restrict : 'AE',
require : 'ngModel',
link : function(scope, elm, attr, model) {
model.$asyncValidators.userExists = function(userName) {
return $http.get(
'http://localhost:8081/Weber/user/checkuser?user='
+ userName).then(function(res) {
+$timeout(function() {
model.$setValidity('userExists', res.data);
console.log(res.data);
}, 1000);
});

};
}
}
});


When i try to click on register it doesn't hit the controller

Thank you
Mark

Answer

You have your controller misnamed. You call it RegisterController in your controller js file but declare it as RegistrationController in your ng-Controller directive.