rewrite rules for apache 2 to use with angular js

angularjs, apache, mod-rewrite, url-rewriting

Solution

Here's something to get you going (put this inside your /.htaccess file):

Options +FollowSymLinks
IndexIgnore */*
RewriteEngine on

# if a directory or a file exists, use it directly
RewriteCond %{REQUEST_FILENAME} -s [OR]
RewriteCond %{REQUEST_FILENAME} -l [OR]
RewriteCond %{REQUEST_FILENAME} -d
RewriteCond %{REQUEST_URI} !/api

# otherwise forward it to index.html 
RewriteRule ^.*$ - [NC,L]
RewriteRule ^app/. /app/index.html [NC,L]

NOTE: For newer Apache versions see also the next answer, which uses the much easier `FallbackResource`

Problem

Obviously, there are a lot of mod rewrite discussions and answers all across the web. However, I am having a hard time grasping them. So I thought I would ask here. I'm asking for rewrite rules to do what Andy Joslin explained in the comments here: https://stackoverflow.com/a/11100438 This is my current dir structure at the root of example.com - app/ - app/index.html (the "root" of the angular js application) - api (This will be a symfony 2 app that is used for the 'api'. I'll be sending ajax requests to and from here from angular.) I would like to redirect all requests to app/index.html except for requests to /api. For example: http://example.com/categories/electronics/ipod would actually be like going to http://example.com/app/index.html/categories/electronics/ipod I would like for the app/index.html part to be hidden however. Then, there would be an exception for requests to http://example.com/api because I will need to make ajax requests to those url paths. Thanks for any and all help/guidance.

Original source

Related problems