Here's the strategy that I'm planning on implementing. I would love to get feedback on it.
My thoughts are that in the future I will be able to serve up Angular content to Google Bot either by parsing the javascript server-side or Google Bot will be smart enough to read javascript. Therefore, I would rather not have to maintain a bunch of #! url for the rest of my life, so I decided to just use absolute urls "/products" instead of "/#!/products" for example.
It turns out that Angular's html 5 Mode works perfectly with this strategy. If the browser supports html 5 location api it changes the url without a page refresh and if it doesn't it appends the hash ( #/products ).
On the server I have a catchall handler that catches all pages that aren't found and redirects them to their hash (#) equivalent. For example "/product" would be redirected to "/#/product". Since this is now loading the root page Angular will intercepts the request and rewrite it to "/product", but it will not reload the page.
The downside is that there is an extra redirect when users visit pages other then the root, but I hope to remedy this in future.
As for SEO I'm think the the catchall handler will inspect the headers. If if finds that a bot is making the request it will server static html, otherwise it will perform the redirect. This way Google Bot gets what it wants an I get to keep pretty urls.
Sorry for the long post. I would appreciate feedback on this strategy. I'm wondering if Google would penalize me for doing this, or if redirect would present any problems.
- Kyle