Home
Do you use client-side routing?
  v3.0 Posted at 11/07/2017 5:17 AM by Tiago Araujo

Single page applications (SPAs) are getting more and more popular, and for good reason – a better and faster user experience, reduced server load and encourages good API separation.

But have you ever visited a website, thought “I’ll refresh that” and then got taken back to the home screen? Or tried to copy or bookmark the URL, only to find it’s just “/Home”? This happens when client side routing hasn’t been implemented properly and is a big hit to a site’s usability.

This is easily fixed with Angular ’s routing capabilities, and implementing it in your SPA will confer several advantages:

  • URLs can be copy-pasted and shared
  • Page refreshes work as expected
  • Less prone to errors
  • Better separation of concerns (navigation vs page state) 
client-side-bad.png
Figure: Bad example - The blog post component is choosing components based on the state of the component

A better way is to set up routes, and use a router (the first-party component router is great for this) to manage your components:

client-side-good.png
Good: Setting up declarative routes and outlets gives a good user experience, persistent URLs, ​and fewer moving parts

Related rules

    Do you feel this rule needs an update?

    If you want to be notified when this rule is updated, please enter your email address:

    Comments:

    Note: Social Media login for Yotpo is not working in IE or Safari, please use Chrome. We are waiting for Yotpo to fix it.