How to configure Spring and Angular to work together

Question

I have a spring REST server (v3.2) and AngularJS for the client code.

From my understanding in the basic scenario the user navigates to the base domain .com, index.html is being sent back and and from that point Angular manages the communication.

My questions are: 1. How to set Spring to return the Angular file. 2. How to handle a situation where the user does not go though the base domain and just navigates to .com/books/moby-dick which currently returns a JSON representation of the Moby-Dick book that was suppose to be rendered by the client

A good tutorial will be highly appreciated. This is my web initialzer class:

public class WebAppInitializer implements WebApplicationInitializer {

    private static Logger LOG = LoggerFactory.getLogger(WebAppInitializer.class);

    @Override
    public void onStartup(ServletContext servletContext) {
        WebApplicationContext rootContext = createRootContext(servletContext);

        configureSpringMvc(servletContext, rootContext);

        FilterRegistration.Dynamic corsFilter = servletContext.addFilter("corsFilter", CORSFilter.class);
        corsFilter.addMappingForUrlPatterns(null, false, "/*");

//        configureSpringSecurity(servletContext, rootContext);
    }

    private WebApplicationContext createRootContext(ServletContext servletContext) {
        AnnotationConfigWebApplicationContext rootContext = new AnnotationConfigWebApplicationContext();

//        rootContext.register(CoreConfig.class, SecurityConfig.class);
        rootContext.register(CoreConfig.class);

        servletContext.addListener(new ContextLoaderListener(rootContext));
        servletContext.setInitParameter("defaultHtmlEscape", "true");

        return rootContext;
    }


    private void configureSpringMvc(ServletContext servletContext, WebApplicationContext rootContext) {
        AnnotationConfigWebApplicationContext mvcContext = new AnnotationConfigWebApplicationContext();
        mvcContext.register(MVCConfig.class);

        mvcContext.setParent(rootContext);
        ServletRegistration.Dynamic appServlet = servletContext.addServlet(
                "webservice", new DispatcherServlet(mvcContext));
        appServlet.setLoadOnStartup(1);
        Set<String> mappingConflicts = appServlet.addMapping("/");

        if (!mappingConflicts.isEmpty()) {
            for (String s : mappingConflicts) {
                LOG.error("Mapping conflict: " + s);
            }
            throw new IllegalStateException(
                    "'webservice' cannot be mapped to '/'");
        }
    }

This is my MVC configuration file:

@Configuration
@EnableWebMvc
@ComponentScan(basePackages = {"com.yadazing.rest.controller"})
public class MVCConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addResourceHandlers(ResourceHandlerRegistry registry) {
        registry.addResourceHandler("/resources/**").addResourceLocations("/resources/");
    }
}

Answer 1

(disclaimer: I am the author of JHipster)

You can have a look at JHipster which will generate such an application for you, with a Spring backend and an AngularJS frontend.

As the generator goes far beyond what you need (security, etc), you can also have a look at our sample application.

Answer 2

How about this then for #1:

registry.addResourceHandler("/index.html").addResourceLocations("/index.html");