Spring Boot with Angularjs HTML5Mode

Spring Boot with AngularJS html5Mode

I found a solution I can live with it.

@Controller
public class ViewController {

    @RequestMapping("/")
    public String index() {
        return "index";
    }

    @RequestMapping("/app/**")
    public String app() {
        return "index";
    }
}

The angularjs app has to be under the subdomain app. If you do not want that you could create a subdomain like app.subdomain.com that mapps to your subdomain app. With this construct you have no conflicts with webjars, statis content and so on.

Angular html5mode server rewrite wite spring mvc

Based on the answers from How to use a servlet filter in Java to change an incoming servlet request url? I ended up with a Spring OncePerRequestFilter.

It checks the incoming URLs whether they are for static resources (by extension) or whether they are calls to the REST api (with /api/ substring) and allows them to be executed as usual. In other cases, it redirects to the /index.html so Angular's router can handle the request.

public class Html5ModeUrlSupportFilter extends OncePerRequestFilter {
    @Override
    protected void doFilterInternal(HttpServletRequest request,
                                    HttpServletResponse response,
                                    FilterChain filterChain)
                                    throws ServletException, IOException {
        if (isStatic(request) || isApi(request)) {
            filterChain.doFilter(request, response);
        } else {
            request.getRequestDispatcher("/index.html").forward(request, response);
        }
    }

    private boolean isApi(HttpServletRequest request) {
        return request.getRequestURI().indexOf("/api/") >= 0;
    }

    private boolean isStatic(HttpServletRequest request) {
        return Pattern.matches(".+\\.((html)|(css)|(js))$", request.getRequestURI());
    }
}

Of course, the rules of detecting requests must be adjusted to your needs.

How to provide a specific link to angularJs routed page

When a request like http://localhost:8080/link/key1234 hits your server, you would need to forward the request to home page. Then, the client should get the response of the home page, while the URL will still be http://localhost:8080/link/key1234. html5mode will then come to play, changing the view at the client side.

I think the best way to do it might be to use urlrewrite filter, which should forward all requests except those starting with, say /api/**, to the home page.

AngularJS and Spring MVC Project remove '#!'

[1] Set html5Mode as true using below mentioned code,

.config(["$locationProvider", function($locationProvider) {
    $locationProvider.hashPrefix('');
    $locationProvider.html5Mode(true);
}])

[2] Set base url in index.html as follows,

<base href="/" />

[3] Create a controller to redirect urls to the index file

@RequestMapping(value = "/{[path:[^\\.]*}")
public String stalklist() {
    return "forward:/";
}

---

Related Topics