Routing

Learn how to use Angular Router to set routes and create single page applications.

Angular Routing Overview

Overview

What are routes?

Routes are how we navigate within our SPA, single page application. Wait what is a Single Page Application? In the past, websites would load a full new webpage when the user navigated to different sections of the website . A non-SPA web page will load the entire new page to take you to a new section. In a single page application, which is what angular is, we are only loading the parts of the html that need to change. This brings us back to routes. Routes are how we change the inner parts of our html. The route you are on is part of url of the website.

Routing in Action

Notice the path on then end of espn.com changes to match what is clicked on. Each sport, has a route espn.com/nba, espn.com/nfl and each route has its own unique content, but the shared content, the header in this case stays the same regardless of the route.

Key Point:

with Single Page Applications only the content that needs to be updated changes vs a full refresh.

From angular router docs “The Angular Router ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a view. And the router logs activity in the browser's history journal so the back and forward buttons work as well.”

In your angular app, the index html is where our base route is defined in our angular app. Index.html

index.html in an angular app

Resources:

Angular Docs

Angularangular.io