I have a web application with Spring controllers and an AngularJS frontend. In the web.xml, calls to the /api/* route are handled by Spring, and index.html is registered as the welcome file
<web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee" version="3.1">
<servlet>
<servlet-name>springrest</servlet-name>
<servlet-class>org.springframework.web.servlet.DispatcherServlet</servlet-class>
<load-on-startup>1</load-on-startup>
</servlet>
<servlet-mapping>
<servlet-name>springrest</servlet-name>
<url-pattern>/api/*</url-pattern>
</servlet-mapping>
<welcome-file-list>
<welcome-file>index.html</welcome-file>
</welcome-file-list>
</web-app>
The UI Router states are defined as follows
angular
.module('app')
.config(stateConfig);
function stateConfig($stateProvider) {
$stateProvider.state('home', {
url: '/',
template: '<home-screen></home-screen>'
})
.state('employees', {
url: '/employees',
template: '<employees></employees>'
}
.state('employees.details', {
url: '/employees/{id:[0-9]+}',
template: '<employee></employee>'
})
}
There is one rest controller defined, with two methods that return either an array of objects, or a single object
@Controller
@ResponseBody
@RequestMapping("/employees")
public class SupplierController implements RestController {
@RequestMapping(method = RequestMethod.GET, value = "", produces = "application/json; charset=utf-8")
public String getEmployees() {
return "[{\"id\": 1, \"name\": \"Employee 1\"}, {\"id\": 2, \"name\": \"Employee 2\"}]";
}
@RequestMapping(method = RequestMethod.GET, value = "/{employeeId}", produces = "application/json; charset=utf-8")
public String getEmployeeDetails(@PathVariable Integer employeeId) {
return "{\"id\": 1, \"name\": \"Employee 1\", \"dateOfBirth\": \"2000-01-01\", \"contract\": \"Permanent\"}";
}
}
The index.html file contains a link to the employees state. The employees state sends a request to the "api/employees" endpoint, and displays the response as a list of link to the relevant employee state. The employee state sends a request to the "api/employees/{employeeId}" and displays the employee's details
This is deployed to an Apache Tomcat 8 server, which starts successfully. I can open http://localhost:8080/angularApp which displays the home screen from index.html correctly, and I can click the links to open the employees page, and from there the employee details screens.
However, if I enter the link to an employee screen directly into the adddress bar, e.g. http://localhost:8080/angularApp/employees/1234 then I get a 404 error.
I think this is because the server is checking for an "employees/*" route in web.xml, which is not configured in the file, whereas if I open the home page and browse from there, the UI router is handling the requests.
How can I configure the frontend to handle all requests that are not api requests?