How should I structure my AngularJS routing to handle URL rewriting and page refreshes?

Question

I'm building my own website using AngularJS. I want my site's navigation to behave without the "browser flash" that exists when you go between pages, eg clicking a link on index.html that takes you to foo.html . I also want clean URLs, so for instance I can go to mysite.com/foo and have the browser display the content in foo.html .

Angular's client-side routing in HTML5 mode is an effective solution, but there are exceptions:

If I go to mysite.com , I can configure $routeProvider to map the view to the appropriate partials (eg index.html or foo.html ) and modify the URL the browser displays. However, if I go to mysite.com/foo by directly typing that URL into the browser, I will get a 404 error because the server is looking for something in mysite.com/foo/ that isn't there. The same will happen if I refresh the page while Angular is pointing to mysite.com/foo .

In short, navigating to mysite.com/foo is only handled properly if navigated from within the Angular app.

How can I handle this so that my site behaves the way I want? Do I use PHP and/or mod_rewrite to redirect the browser back to mysite.com upon 404?

In essence, I want the URL mysite.com/foo to display the mysite.com view + the foo.html partial whether the URL is set by Angular or manually typed in the browser URL bar .

Answer 1

Yes you need something like mod_rewrite.

http://ericduran.io/2013/05/31/angular-html5Mode-with-yeoman/