Angular Router (@angular/router) is the official library for managing navigation in Angular applications and a core part of the framework. It is included by default in all projects created by Angular CLI.
Why is routing necessary in a SPA?
When you navigate to a URL in your web browser, the browser normally makes a network request to a web server and displays the returned HTML page. When you navigate to a different URL, such as clicking a link, the browser makes another network request and replaces the entire page with a new one.
A single-page application (SPA) differs in that the browser only makes a request to a web server for the first page, the index.html. After that, a client-side router takes over, controlling which content displays based on the URL. When a user navigates to a different URL, the router updates the page's content in place without triggering a full-page reload.
How Angular manages routing
Routing in Angular is comprised of three primary parts:
- Routes define which component displays when a user visits a specific URL.
- Outlets are placeholders in your templates that dynamically load and render components based on the active route.
- Links provide a way for users to navigate between different routes in your application without triggering a full page reload.
In addition, the Angular Routing library offers additional functionality such as:
- Nested routes
- Programmatic navigation
- Route params, queries and wildcards
- Activated route information with
ActivatedRoute - View transition effects
- Navigation guards
Next steps
Learn about how you can define routes using Angular router.