AngularJS routing without the hash '#'

Question

I\'m learning AngularJS and there\'s one thing that really annoys me.

I use $routeProvider to declare routing rules for my application:

Answer 1

If you are wanting to configure this locally on OS X 10.8 serving Angular with Apache then you might find the following in your .htaccess file helps:

    Options +FollowSymlinks
    RewriteEngine On
    RewriteBase /~yourusername/appname/public/
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} !.*\.(css|js|html|png|jpg|jpeg|gif|txt)
    RewriteRule (.*) index.html [L]

Options +FollowSymlinks if not set may give you a forbidden error in the logs like so:

Options FollowSymLinks or SymLinksIfOwnerMatch is off which implies that RewriteRule directive is forbidden

Rewrite base is required otherwise requests will be resolved to your server root which locally by default is not your project directory unless you have specifically configured your vhosts, so you need to set the path so that the request finds your project root directory. For example on my machine I have a /Users/me/Sites directory where I keep all my projects. Like the old OS X set up.

The next two lines effectively say if the path is not a directory or a file, so you need to make sure you have no files or directories the same as your app route paths.

The next condition says if request not ending with file extensions specified so add what you need there

And the [L] last one is saying to serve the index.html file - your app for all other requests.

If you still have problems then check the apache log, it will probably give you useful hints:

/private/var/log/apache2/error_log