title: Submitting a Form with Angular JS and Spring MVC
body: <p>I am noob with Angular JS and I am having difficulties to submit a simple Form using Angular JS and Spring MVC. I am getting this error: </p>
  
  <blockquote>
    <p>The requested resource is not available</p>
    
    <p>mock.jsp</p>
  </blockquote>
  
  <pre><code>&lt;%@taglib prefix='c' uri='http://java.sun.com/jsp/jstl/core'%&gt;
  &lt;%@taglib prefix="spring" uri="http://www.springframework.org/tags"%&gt;
  &lt;%@taglib prefix="form" uri="http://www.springframework.org/tags/form"%&gt;
  &lt;%@taglib prefix="security"uri="http://www.springframework.org/security/tags" %&gt;
  &lt;!doctype html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;title&gt;Settings&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/main.css"&gt;
  &lt;link rel="stylesheet" href="css/workflow.css"&gt;
  &lt;link rel="stylesheet" href="css/upload.css"&gt;
  &lt;link rel="stylesheet" href="css/jquery.qtip.min.css"&gt;
  &lt;link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css"&gt; 
  &lt;link rel="shortcut icon" href="images/logo-small.png" /&gt;
  
  &lt;/head&gt;
  &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      var app = angular.module('formSubmit', []);
  
      app.controller('FormSubmitController',[ '$scope', '$http', function($scope, $http) {
  
          $scope.list = [];
              $scope.headerText = 'AngularJS Post Form Spring MVC example: Submit below form';
              $scope.submit = function() {
  
                  var formData = {
                          "name1" : $scope.name1,
                          "name2" : $scope.name2,
                          "name3" : $scope.name3,
                  };
  
                  var response = $http.post('submitmock', formData);
                  response.success(function(data, status, headers, config) {
                      $scope.list.push(data);
                  });
                  response.error(function(data, status, headers, config) {
                      alert( "Exception details: " + JSON.stringify({data: data}));
                  });
  
                  //Empty list data after process
                  $scope.list = [];
  
              };
          }]);
  &lt;/script&gt;
  &lt;style&gt;        
  input.ng-invalid {    
      border: 2px red solid;
      }
  &lt;/style&gt;
  &lt;body ng-app="formSubmit"&gt;
  
      &lt;div class="container"&gt;
      &lt;div class="col-sm-8 col-sm-offset-2"&gt;
  
  
          &lt;form  data-ng-submit="submit()" data-ng-controller="FormSubmitController"&gt; &lt;!-- novalidate prevents HTML5 validation since we will be validating ourselves --&gt;
              &lt;table border="1"&gt;                          
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;label&gt;Name Line 1:&lt;/label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;               
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;div class="form-group"&gt;                            
                              &lt;input type="text" name="name1" class="form-control" ng-model="name1" required ng-Maxlength="40"&gt;   
                              &lt;p ng-show="userForm.name1.$error.required"  class="help-block"&gt;Name is required.&lt;/p&gt;
                              &lt;p ng-show="userForm.name1.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;label&gt;Name Line 2:&lt;/label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;div class="form-group"&gt;                    
                          &lt;input type="text" name="name2" class="form-control" ng-model="name2" ng-Maxlength="40"&gt; 
                          &lt;p ng-show="userForm.name2.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;label&gt;Name Line 3:&lt;/label&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;div class="form-group"&gt;                        
                          &lt;input type="text" name="name3" class="form-control" ng-model="name3" ng-Maxlength="40"&gt; 
                          &lt;p ng-show="userForm.name3.$error.maxlength" class="help-block"&gt;Maximum 40 characters&lt;/p&gt;
                          &lt;/div&gt;
                      &lt;/td&gt;
                  &lt;/tr&gt;   
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;h4&gt;You submitted below data through post:&lt;/h4&gt;
                               &lt;pre&gt;Form data ={{list}}&lt;/pre&gt;
                      &lt;/td&gt;   
                  &lt;/tr&gt;               
                  &lt;tr&gt;
                      &lt;td colspan="2"&gt;
                          &lt;!-- SUBMIT BUTTON --&gt;
                          &lt;button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid"&gt;Submit&lt;/button&gt;
                      &lt;/td&gt;
                      &lt;/tr&gt;
                  &lt;/table&gt;   
  
              &lt;/form&gt;
      &lt;/div&gt;
      &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <blockquote>
    <p>mockController.java</p>
  </blockquote>
  
  <pre><code>package com.opessoftware.controller;
  
  import org.springframework.stereotype.Controller;
  import org.springframework.ui.ModelMap;
  import org.springframework.web.bind.annotation.RequestBody;
  import org.springframework.web.bind.annotation.RequestMapping;
  import org.springframework.web.bind.annotation.RequestMethod;
  import org.springframework.web.bind.annotation.RequestParam;
  import org.springframework.web.bind.annotation.ResponseBody;
  import org.springframework.web.servlet.ModelAndView;
  
  import com.opessoftware.beans.MockForm;
  import com.opessoftware.beans.SettingsForm;
  
  @Controller
  public class MockController {
  
      @RequestMapping("/mock")
      public String getSettingsPage(){
          return "mock";
      }
  
      @RequestMapping(value = "/angularjs-http-service-ajax-post-code-example", method = RequestMethod.GET)
      public ModelAndView httpServicePostExample( ModelMap model ) {
          return new ModelAndView("httpservice_post");
      }
  
      @RequestMapping(value = "/submitmock", method = RequestMethod.POST)
      public @ResponseBody MockForm getMock(@RequestBody MockForm mockForm){      
          return mockForm;
      }
  
  
  
  }
  </code></pre>
  
  <p>Please Help.</p>
  
  <p>Spring version = 3.2.0 RELEASE</p>