> For the complete documentation index, see [llms.txt](https://softstack-factory.gitbook.io/mean-stack/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://softstack-factory.gitbook.io/mean-stack/angular/wk3/untitled-1.md).

# Routing

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

{% embed url="<https://www.youtube.com/watch?v=tUCa3JcFILI>" %}
Angular Routing Overview
{% endembed %}

## **Overview**

### **What are routes?**

&#x20;     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.\
&#x20;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

{% hint style="info" %}
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.
{% endhint %}

![](https://3729111192-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LJF8uz6T7DhCLClK6jV%2F-LeteAt-BsBzN_Qpienr%2F-LethT4ZkDEeJ7_ugSqG%2F96988741.gif?alt=media\&token=627364b1-e302-4b87-9e4c-3d7178c75934)

#### **Key Point:**

&#x20;with Single Page Applications only the content that needs to be updated changes vs a full refresh.\ <br>

From angular [router docs<br>](https://angular.io/guide/router) “The Angular Router  ("the router") borrows from this model. It can interpret a browser URL as an instruction to navigate to a [view](https://angular.io/guide/glossary#view). And the router logs activity in the browser's history journal so the back and forward buttons work as well.”<br>

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](https://lh6.googleusercontent.com/hWd-Adb7EK7oplHJcRXAw5akQKeFQm0tFcZdOBPH4flH4Xmldxt0OIHwnPHaErZmd0WoLTIpCeyZJtVDQzcLPYtGQmwO2FO3FmJ2TrGtLZN1S74XFjKkXzxgSKjW8auUD6Nyfbtx)

## Resources:

#### Angular Docs

{% embed url="<https://angular.io/guide/router>" %}