Configure Spring MVC with AngularJS

I would like to be able to use Spring MVC as REST server and AngularJS on client side.

I have several urls for REST :

  • /rest/products
  • /rest/products/{id}

And i have several urls for the UI :

  • /shop/products
  • /shop/products/{id}

Since it is AngularJS which do the trick on client side, i just want to be able to redirect all default ui urls (not the rest ones) to the index.html file used by AngularJS.

So, in Spring MVC configuration, i would like to be able to do something like that :

@EnableWebMvc
@Configuration
@ComponentScan(basePackages = "com.mypackage.web")
public class WebAppConfiguration extends WebMvcConfigurerAdapter {

    @Override
    public void addViewControllers(ViewControllerRegistry registry) {
        registry.addViewController("/**").setViewName("index");
    }

    @Bean
    public ViewResolver viewResolver() {
        InternalResourceViewResolver resolver = new InternalResourceViewResolver();
        resolver.setPrefix("/");
        resolver.setSuffix(".html");
        return resolver;
    }

    @Override
    public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) {
        configurer.enable();
    }

}

With that, i want to delegate all the UI urls handling to AngularJS.

I also want that if the user writes a bad url in the browser he would be redirected by Spring MVC on the index.html file and it will be AngularJS which will do the redirect on the error ui page. I have seen several projects on the web with a single index.html file, but no one handle this error case.

I have been struggling a lot of time trying to do this trick but i can't find a solution.

So my question is : how can i do that ? and more generally, am i wrong with this Spring MVC-AngularJS wanted configuration ?

Very important : I use Spring MVC 3.2 and Tomcat 7.34 without web.xml (full Servlet 3.0)

Thanks a lot.

Maybe it is possible to solve it via $routeProvider:

$routeProvider.when('/redirect/:redirectParams', {templateUrl: 'partials/homePartial', controller: redirectController});
$routeProvider.when('/home', {templateUrl: 'partials/homePartial', controller: homeController});
$routeProvider.when('/someRoute', {templateUrl: 'partials/somePartial', controller: someController});
$routeProvider.when('/error/', {templateUrl: 'partials/errorPartial', controller: errorController});
$routeProvider.when('/error/:errorMessage', {templateUrl: 'partials/errorPartial', controller: errorController});
$routeProvider.otherwise({redirectTo: '/error'})

Just let the $routeProvider redirect to an error page when the route was not found.

Edit:

I've added a redirectController in the above example. This controller will read the $routeParams, in this case $routeParams.redirectParams and use $location to change the route to /error.

Spring just redirects to http://host:port/index.html/#/redirect/error=blabla. You could and should probably finetune this and support multiple routeParams.

In Spring you would have basically three request mappings:

To redirect all other requests:

@RequestMapping(value = "{path}", method = RequestMethod.GET)
public String redirect(@PathVariable String path) {
   String route = null;
   if (path.equals("/") || path.startsWith("/index.html")) {
     // load index.html
   } else {
     route = "redirect:/index.html/#/redirect/" + path; 
   }
   return route;
}

I think you can write an Interceptor which allows some known URLs like /rest/, /resources/, /webjars/* and for any other URLs redirect to index.html.