title: Problems with Spring MVC 4.0 application with Restful routing and AngularJS routing
body: <p>I have a Spring MVC 4.0 AngularJS application that seems to have collisions between the Restful interface routing, and the AngularJS routing when running on the same instance. It causes 404 errors. I dont think I have the application setup correctly.</p>
  
  <p>The application is bundled into a UserManager.war file and copied into the webapps directory on a Tomcat 7.0 instance running stand-alone (not embedded in an IDE).</p>
  
  <p>The application runs at:</p>
  
  <pre><code>http://localhost:8080/UserManager/main
  http://localhost:8080/UserManager/update
  http://localhost:8080/UserManager/insert
  </code></pre>
  
  <p>And the restful interfaces specifies these urls:</p>
  
  <pre><code>http://localhost:8080/UserManager/services/users/list
  http://localhost:8080/UserManager/services/users/{id}
  http://localhost:8080/UserManager/services/users/insert
  http://localhost:8080/UserManager/services/users/update/{id}
  http://localhost:8080/UserManager/services/users/delete/{id}
  </code></pre>
  
  <p>Here is my <strong>web.xml</strong>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" 
       xmlns="http://java.sun.com/xml/ns/javaee" 
       xmlns:web="http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" 
       xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd" 
       id="WebApp_ID" version="3.0"&gt; 
  &lt;display-name&gt;User Manager Application&lt;/display-name&gt;
  
  &lt;servlet&gt;
      &lt;servlet-name&gt;rest&lt;/servlet-name&gt;
      &lt;servlet-class&gt;org.springframework.web.servlet.DispatcherServlet&lt;/servlet-class&gt;
      &lt;load-on-startup&gt;1&lt;/load-on-startup&gt;
  &lt;/servlet&gt;
  
  &lt;servlet-mapping&gt;
      &lt;servlet-name&gt;rest&lt;/servlet-name&gt;
      &lt;url-pattern&gt;/*&lt;/url-pattern&gt;
  &lt;/servlet-mapping&gt; 
  &lt;/web-app&gt;
  </code></pre>
  
  <p>Here is my <strong>rest-servlet.xml</strong>:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="UTF-8"?&gt;
  &lt;beans xmlns="http://www.springframework.org/schema/beans"
  xmlns:context="http://www.springframework.org/schema/context"
  xmlns:mvc="http://www.springframework.org/schema/mvc" 
  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
  xmlns:p="http://www.springframework.org/schema/p"
  xsi:schemaLocation="
      http://www.springframework.org/schema/beans     
      http://www.springframework.org/schema/beans/spring-beans-4.0.xsd
      http://www.springframework.org/schema/context
      http://www.springframework.org/schema/context/spring-context-4.0.xsd
      http://www.springframework.org/schema/mvc
      http://www.springframework.org/schema/mvc/spring-mvc-4.0.xsd"&gt;
  &lt;context:component-scan base-package="localhost.rest.controller" /&gt;
  &lt;mvc:annotation-driven /&gt;
  &lt;/beans&gt;
  </code></pre>
  
  <p>Here is my <strong>UserManagerControler.java</strong>:</p>
  
  <pre><code>package localhost.rest.controller;
  
  import java.text.ParseException;
  import java.text.SimpleDateFormat;
  import java.util.Date;
  import java.util.List;
  import java.util.Locale;
  
  import org.springframework.http.HttpStatus;
  import org.springframework.http.ResponseEntity;
  import org.springframework.web.bind.annotation.PathVariable;
  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.ResponseBody;
  import org.springframework.web.bind.annotation.RestController;
  
  @RestController
  @RequestMapping("/services")
  public class UserManagerControler{
  
      @RequestMapping(value = "/users/list", method = RequestMethod.GET, headers="Accept=application/json")
      public @ResponseBody String getUsers() {
  
      }
  
      @RequestMapping(value = "/users/{pid}", method = RequestMethod.GET, headers="Accept=application/json")
      public @ResponseBody String getUserById(@PathVariable String pid) {
  
      }
  
      @RequestMapping(value = "/users/insert", method = RequestMethod.PUT, headers="Accept=application/json")
      public ResponseEntity&lt;User&gt; createUser(@RequestBody User user) {
  
      }
  
      @RequestMapping(value = "/users/update/{pid}", method = RequestMethod.POST, headers="Accept=application/json")
      public ResponseEntity&lt;User&gt; updateUser(@PathVariable String pid, @RequestBody User user) {
  
      }
  
      @RequestMapping(value = "/users/delete/{pid}", method = RequestMethod.DELETE, headers="Accept=application/json")
      public  ResponseEntity&lt;String&gt; deleteUser(@PathVariable String pid) {
  
      }
  
  }
  </code></pre>
  
  <p>Here is my <strong>app.js</strong> which sets up the AngularJS routing:</p>
  
  <pre><code>angular.module('PMApp', [ 'ngRoute', 'ui.bootstrap', 'PMApp.services' ])
  .config(
          [ '$routeProvider', '$locationProvider', '$httpProvider',
                  function($routeProvider, $locationProvider, $httpProvider) {
  
                      $locationProvider.html5Mode(true);
  
                      $routeProvider.when('/main', {
                          controller : 'MainController',
                          templateUrl : 'app/partials/main.html'
                      }).when('/insert', {
                          controller : 'InsertController',
                          templateUrl : 'app/partials/insert.html'
                      }).when('/update', {
                          controller : 'UpdateController',
                          templateUrl : 'app/partials/update.html'
                      }).otherwise({
                          redirectTo : '/main'
                      });
  
                  } ]
  
  ).run(function($rootScope, $window, $location) {
      $rootScope.initialized = true;
  });
  </code></pre>
  
  <p>The controllers are setup in the controller.js file, and calls to my restful webservice are performed in a services.js file.</p>
  
  <p><strong>services.js</strong>:</p>
  
  <pre><code>(function () {
      var userService = function ($http, $window, $q, $log, $rootScope) {
  
          var factory = {};
  
          factory.createUser = function (userId, last, first, sex, age, ethnicity, rank, dob) {
              var url = '/UserManager/services/users/insert';
  
              var parameters = {
                  "userId" : userId,
                  "last" : last,
                  "first" : first,
                  "sex" : sex,
                  "age" : age,
                  "ethnicity" : ethnicity,
                  "rank" : rank,
                  "dob" : dob
              };
  
              return $http.put(url, parameters)
                  .then(function (data, status) {
                      return data;
                  });
          };
  
          factory.deleteUser = function(userId) {
              var url = '/UserManager/services/users/delete/' + userId;
              return $http.delete(url)
                  .then(function (data, status) {
                      return data;
                  });
          };
  
          factory.updateUser = function (userId, last, first, sex, age, ethnicity, rank, dob) {
              var url = '/UserManager/services/users/update/' + userId;
  
  
              var parameters = {
                  "userId" : userId,
                  "last" : last,
                  "first" : first,
                  "sex" : sex,
                  "age" : age,
                  "ethnicity" : ethnicity,
                  "rank" : rank,
                  "dob" : dob
              };
  
              return $http.post(url, parameters)
                  .then(function (data, status) {
                      return data;
                  });
          };
  
          factory.getUsers = function () {
              var url = '/UserManager/services/users/list';
  
              return $http.get(url)
                  .then(function (response) {
                      return response.data;
                  });
          };
  
          factory.getUser = function (userId) {
              var url = '/UserManager/services/users/' + userId;
  
              return $http.get(url)
                  .then(function (response) {
                      return response.data;
                  });
          };
  
          return factory;
      }
  
      var app = angular.module("PMApp.services", ['ngResource']);
      app.factory('userService', userService);
  }());
  </code></pre>
  
  <p>I can get the webservice to work, but then I get 404 error on the application.  If I tweak my web.xml, I can get the application to start up, but then calls to the webservice fail with a 404 error.</p>