AngularJS HTML5 mode - How do direct links work unchanged on the server?

Question

Note. This question can also be read:

How to bookmark harmless client side mvc frameworks in Java.

I am moving on to an angular application using hashtags to html5mode . I have successfully installed

 $locationProvider.html5Mode(true); 

And all the links from the landing page (index.html) are working fine.

The problem is that if partial URLs are referenced directly, I get 404, of course, since the definitions of the server endpoints are not related to client-specific routes.

Thus, without HTML5 we get non-SEO friendly hashbangs, but with it we can’t bookmark anything except the landing page (the page that angular loads).

Why does this work if you first request the default landing page (index.html), i.e. htpp: //mydomain.com/:

• The browser requests index.html from the server
• The server returns index.html and the browser loads the angular framework
• Changes to the URL are sent to the client router and the corresponding partial / s are downloaded.

Why this does not work if (i.e.) http://mydomain.com/foo is requested directly from the browser:

• The browser requests mydomain / foo from the server.
• Resource does not exist
• Server returns 404

Something is missing in this story, I just don't know what. Here are just two answers that I see ...

• This is by design. How it works? Users should always land on the MVC platform boot page (usually index.html) and then navigate from there. This is not ideal, because the state cannot be saved, and there is no possibility of bookmarking ... not to mention a workaround.
• Server solution. . Does this work with a server side trick? For example, for all requests, return index.html and immediately call the router with additional context. If so, it contradicts the object that AngularJS is completely client-side and seems to be hacked.

Answer 1

AngularJS documentation really mentions this

Server side In this mode, server side URL rewriting is required, basically you should rewrite all your links to the application entry point (e.g. index.html)

In this case, one Java-based solution should tell the server to "map all URLs to index.html." This can be done on any HTTP server or container. I implemented this with Java / Servet, since I want my application to be an agnostic HTTP server (e.g. Apache or NginX, or just Tomcat / JBoss).

In web.xml:

  <welcome-file-list> <welcome-file>index.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>StaticServlet</servlet-name> <jsp-file>/index.jsp</jsp-file> </servlet> <servlet-mapping> <servlet-name>StaticServlet</servlet-name> <url-pattern>/app</url-pattern> </servlet-mapping> 

And index.jsp looks simple:

 <%@ include file="index.html" %> 

And add the following to the tag in index.html:

 <base href="/app" /> 

Answer 2

I have been thinking about this for my PHP site for a while. I keep all the server side code with the / api route to keep it separate from Angular. Here is the solution I came up with by updating apache configuration:

 RewriteEngine on #let the php framework do its thing RewriteRule ^(api/.*)$ index.php?url=$1 [QSA,L,NC] #let angular do its thing RewriteCond %{REQUEST_FILENAME} !-f RewriteCond %{REQUEST_FILENAME} !-d RewriteRule ^(.*) index.html [NC,L] 

I wrote how I did it using the Flight Framework at http://www.awnage.com/2013/10/10/taking-flight-with-angularjs/

Answer 3

The URLs that you link to and put them in the user’s address bar must link to valid content on the server, and if at all possible, they must link to the correct content. Of course, you can just serve the same page for each URL, and the client code is turned off and download real content, and everything works the same way in the hash URL world. In fact, this is the smallest code method. But it also qualifies as an “Internet hack,” so HTML5 and the History API provide you with a way to link to semantically correct URLs.

As a small example, if you go to https://github.com/kriskowal/q and you click "examples", the client code will load the "examples" in the file browser without leaving the page, and the URL bar will read https: //github.com/kriskowal/q/tree/master/examples . If you go to https://github.com/kriskowal/q/tree/master/examples directly, you will get the contents of the sample directory sent directly to your browser without intermediary on the client side, Yes, it’s more difficult to do and maybe It’s not possible in a “one-page application,” but it’s right to do it anytime you can.