Angular JS Multiple controller not working

Question

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

In your JS, you have the registration controller named RegisterController, where as in your HTML, you have RegistrationController . — user3186219
– user3186219, Commented Oct 31, 2016 at 23:02

rlcrews · Accepted Answer · 2016-10-31 23:02:33Z

3

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

answered Oct 31, 2016 at 23:02

rlcrews

3,57221 gold badges73 silver badges121 bronze badges

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

1 Comment

mark Over a year ago

That's my bad.Thank you :D

Collectives™ on Stack Overflow

Angular JS Multiple controller not working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related