Angular Routing #1

Location Stratagies

Angular supports two Location Strategies:

HashLocationStrategy

Where URL looks like http://localhost:4200/#/product

PathLocationStrategy

Where URL looks like http://localhost:4200/product

Server Side Routing

General behaviour of web application is it sends every request to the server for loading of each and every request

Client side routing

As angular handles all the routing part without sending each and every request to the server there are also some cons associated with this approach
You won’t be able to refresh the page
You won’t be able to go to a particular view by typing the URL
Sharing the URL with someone is not possible
The Back button will not work as you cannot go back to the previous page
SEO is not possible

The Client-side routing simply mimics server-side routing by running the process in the browser. It changes the URL in the browser address bar and updates the browser history, without actually sending the request to the server

The Client-side routing is handled in two ways

Hash style Routing
HTML 5 Routing(path Location)

Hash Style :

It user a tag #'es to achieve this
http://www.example.com
http://www.example.com/#/about
http://www.example.com/#/contact

HTML 5 Routing :

Using history.pushState() method, we can now programmatically add the browser history entries and change the location without triggering a server page request.

The history.pushState method accepts the following three parameters.

State object: A state object is a JavaScript object which is associated with the new history entry created by pushState()
Title: This is an optional title for the state
URL: The new history entry’s URL. The browser won’t jump to that page.

var stateObj= { message: "some message" };
history.pushState(stateObj, "title", newUrl);

When you request for http://www.example.com the server sends the index.html

Now, When you click on ProductList link, Angular use’s the history.pushState method to push the state and change the URL to http://www.example.com/ProductList

Now, when you click on the specific Product, we again the use history method to push the state and change the URL to http://www.example.com/product/1

Here, when you click the back button, the browser will retrieve the http://www.example.com/ProductList from history and displays it.

But there are cons to this approach

Not all browsers support HTML 5
The older browser does not support HTML5. So if you want to support older browser, you have to stick to the hash style routing
The server support is needed for HTML5 based routing.

Path Location Stratagey

The PathLocationStrategy is the default strategy in Angular application.

To Configure the strategy, we need to add in the

section of root page (index.html) of our application

The Browser uses this element to construct the relative URLs for static resources (images, CSS, scripts) contained in the document.

Hash Location Strategy

You can use the HashLocationStrategy by providing the useHash: true in an object as the second argument of the RouterModule.forRoot in the AppModule.
RouterModule.forRoot(appRoutes, { useHash: true })

Which Location Strategy to Use??

use the HTML 5 style (PathLocationStrategy ) as your location strategy.
It produces clean and SEO Friendly URLs that are easier for users to understand and remember.
You can take advantage of the server-side rendering, which will make our application load faster, by rendering the pages in the server first before delivering it the client
Use hash location strategy only if you have to support the older browsers.

Hope this helps..