Login Validation Using Angular Js and JSP

Question

I am making an angular js - jsp application, for that I have created a login page, also I have created a servlet for fetching database and comparing username and password. created login form and passed values my angular controller on login form submit. now I need to access the servlet that compares the login how do I pass information to servlet ? I have created a factory for that, also I have to use post method for passing datas.

I am pasting code til I have done.

HTML

<div class="container">

        <form name="myForm" novalidate class="col-md-4 col-md-offset-4">
        <h2>{{login.username}}</h2>
            <div class="form-group">
                <input type="email" ng-model="login.username" required class="form-control input-lg" placeholder="Email">
            </div>

            <div class="form-group">
                <input type="password" required ng-model="login.password"  class="form-control input-lg"
                    placeholder="Password">

            </div>

            <div class="form-group">
                <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid"  ng-click="formSubmit(login)" class="btn btn-primary btn-lg btn-block" value="Sign In"/>
                <span><a href="#">Need help?</a></span> <span class="pull-right"><a
                    href="#">New Registration</a></span>
            </div>

        </form>

    </div>

Controller.js

var appController = angular.module('appController', []);


appController.factory('AccountGroup', ['$resource', 'Data', function ($resource, Data) {
  return $resource( 
    {
      query: {
        isArray: true,
        method: 'POST'
      }
    }
  );
}]);

appController.controller('LoginController', ['$scope','$http', function ($scope,$http) {

      $scope.formSubmit = function(item) {
          debugger;
            console.log(item);
          };


}]);

This is my eclipse directory structure

LoginValdiator.java is the servlet used for login comparison

Answer 1

To access a servlet, add servlet mapping for that servlet in the Deployment descriptor file(web.xml).

Eg :

<servlet>
    <servlet-name>servlet1</servlet-name>
    <servlet-class>org.mycompany.test1</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>servlet1</servlet-name>
    <url-pattern>/path/test</url-pattern>
</servlet-mapping>

Here you can access the servelet by .../path/test

Answer 2

You missed to add name attributes on your form field which enables form validation rule on that field by angular.

Markup

<div class="container">

    <form name="myForm" novalidate class="col-md-4 col-md-offset-4">
        <h2>{{login.username}}</h2>
        <div class="form-group">
            <input type="email" name="email" ng-model="login.username" required class="form-control input-lg" placeholder="Email">
        </div>
        <div class="form-group">
            <input type="password" name="password" required ng-model="login.password" class="form-control input-lg" placeholder="Password">
        </div>

        <div class="form-group">
            <input type="submit" ng-disabled="myForm.user.$dirty && myForm.user.$invalid ||  
myForm.email.$dirty && myForm.email.$invalid" ng-click="formSubmit(login)" class="btn btn-primary btn-lg btn-block" value="Sign In" />
            <span><a href="#">Need help?</a></span> <span class="pull-right"><a
                    href="#">New Registration</a></span>
        </div>
    </form>
</div>

For more information why name attributes are required, You can refer this Answer by me only