zaqpiotr zaqpiotr - 3 months ago 72
AngularJS Question

How to reload angular single page subpages and don't lose content

I'm using Spring Boot 1.4.0.M2, Angular 1.5.8, Angular UI Router 0.3.1, and Thymeleaf templating.

What I want to do is to remove hash # from my url I want to something like this:

http://localhost:8080/#/contact

look like this

http://localhost:8080/contact

What I did:


  1. added to my angular configuration.js file something like this:

    $locationProvider.html5Mode(true);
    $locationProvider.hashPrefix('!');

  2. added to my userIndex.html head

    base href="/userIndex.html"/>



This userIndex.html contains all js libraries, this is my single page index page it contains imports like this:

<script type="text/javascript" th:src="@{/js/lib/jquery.min.js}" />


and UI router:

<div ui-view="" class="ui-container"></div>


After this hash # disappear from URL, but!

I open my web page http://localhost:8080/ than click link to for example "/contact" and go to sub page URL look perfect http://localhost:8080/contact no hash and page look like this.

enter image description here

And that when I press F5 to reload web page http://localhost:8080/contact and than content look like this:

enter image description here

Starting from http://localhost:8080/ and clicking link to /contact make everything ok, trying to enter URL http://localhost:8080/contact present raw html without css, js etc. userIndex.html is not loaded is it possible to load it to sub page like /contact?

This is how my project and template config looks like

enter image description here

Is any body here who could help me to fix this reload thing? Maybe it is something wrong with my spring boot template config?

Answer

The difference between the two ways is that in the first case you download the userIndex.html file and afterwards angular is intercepting your location change on client side to render the contact state.

In the second case, you are requesting the contact path from the server directly. This is where your viewController configuration comes into play and returns the probably not wanted html instead of the index page which would be required to run your angular app.

For node.js there is a concept called historyApiFallback that registers a 404 error handler to return the index.html page (e.g. this express module: https://github.com/bripkens/connect-history-api-fallback). In your case you need to avoid the clash between your registered viewControllers and the routing names used in the angular app. See this question for a similar case: How can I use Angular2 PathLocationStrategy in a Spring Boot application?

All in all it's not that convenient to use the PathLocationStrategy / html5Mode even if it is essential if you later want to have the possibility to also do server side rendering.

Comments