AngularJs Routing without hashtag in link?

Question

I\'ve recently began learning AngularJs for web development and am loving it so far. However, I\'m not so sure about having hashtags withing the link when routing between views.

Answer 1

When I remove the hashtag, the reload the page and gets 404 error

That's because in your server side code you are probably not handling a request like "www.sampledomain.com/orders/450"

You can have your server-side code handle this request by either returning a redirect to the new URL ("www.sampledomain.com/#/orders/450") or just return the correct HTML directly. The "right" solution will depend on your needs.

Answer 2

1. User can just click link with a hashtag and it will be directed straight to the order page.

2. Google treats links with hashtags as different URL's when the content is different. It's more about SEO then angular.js, but here is an article about that: The First Link Counts Rule and the Hash Sign - Does it Change PR Sculpting?

Answer 3

You might want to set Angular's $locationProvider to use html5Mode.

FTA: $location service has two configuration modes which control the format of the URL in the browser address bar: Hashbang mode (the default) and the HTML5 mode which is based on using the HTML5 History API. Applications use the same API in both modes and the $location service will work with appropriate URL segments and browser APIs to facilitate the browser URL change and history management.

html5Mode will give you "normal" urls in modern browsers while falling back to hash bangs on older browsers.

An html5Mode url:

http://foo.com/bar?baz=23#baz

a hashbang url:

http://foo.com/#!/bar?baz=23#baz