Angular Router Guide: Angular 10/9 Routing & Navigation by Example
🙋♂ ️Hello Dev! And welcome to this Angular Router guide which will teach you routing and navigation in Angular 10/9 by example.
Routing allows you to map pages (components) to specific URL paths and navigation allows you to navigate between these pages.
> ✋✋ Join our Facebook group 👈 to discuss anything related to Angular development.
Why Would You Need Angular Routing?
Routing and navigation are often needed in web apps even in the so-called Single Page Apps or SPAs which what we actually build using modern front-end frameworks and libraries such as Angular, React, Vue or Svelte, etc.
🤚 🤚 🤚 Watch this video if you want to understand client-side routing vs server-side routing:
You can think of web pages in this case as virtual pages as we don’t actually request the HTML document of the page from the server when we navigate to its corresponding route — using the address bar in the web browser or a navigation link.
Angular Routing Helps Build SPAs
In SPAs built with Angular or other frameworks, the whole app is requested and downloaded in the first HTTP request but thanks to client-side routing, in our case Angular routing, we can show only specific views to the user to provide an app-like experience.
A single-page application (SPA) is a website design approach where each new page’s content is served not from loading new HTML pages but generated dynamically through JavaScript’s ability to manipulate the DOM elements on the existing page itself.
In a more traditional web page architecture, an index.html page might link to other HTML pages on the server that the browser will download and display from scratch.
An SPA approach allows the user to continue consuming and interacting with the page while new elements are being updated or fetched, and can result in much faster interactions and content reloading.
In addition, the HTML5 History API allows us to alter the page’s URL without reloading the page, allowing us to create separate URLs for different views. Source
Before diving in practical routing with Angular 10/9 and Angular Router we’ll be introducing some basic concepts such as client-side routing and SPAs. If you are familiar with these concepts, feel free to skip them. 🦶
What is Client-Side/Angular Routing? 👇
The client-side routing is an important feature for any frontend framework, like Angular, just like in traditional backend frameworks. It allows developers to build modern Single Page Applications (SPAs) that can be loaded once by the browser and provide multiple views that the user can navigate between them using the browser’s address bar and navigation buttons or hyperlinks in the application interface.
Routing is the process of driving the UI of an application using URLs.
What About a SPA? 👇
Angular apps are SPAs. Here is the definition of a SPA from Wikipedia:
A single-page application (SPA) is a web application or web site that interacts with the user by dynamically rewriting the current page rather than loading entire new pages from a server.
So in an Angular SPA, only one page is requested from the server. The multiple views that you can transition to are rendered dynamically by the browser not fetched as new pages from the server.
Client-side/Angular routing is similar in concept to server-side routing but uses different mechanisms for implementation. In a traditional web application, you will mostly have multiple pages. Each page maps to a different URL which you can use to access it either directly by entering the URL in the browser’s address bar or via clicking a navigation link or hyperlink in the application UI which has the URL in its href attribute (e.g <a href="/page1">Page 1</a>).
In server-side routing, when the user navigates to a specific page, the browser sends a request to get the page from the server and display it. In client-side Angular routing, the browser has already retrieved all the pages in the first place and the logic to show the requested view will be done in the browser with JavaScript and Angular Router.
What is a Client-Side Router (Angular Router)? 👇
Here comes the role of the client-side (or JavaScript) router such as Angular Router.
A client-side router is an essential entity in Angular and most frontend frameworks and libraries. It is the code responsible for organizing the application into multiple views (also called screens or states) and navigating between them on user request.
For example, the router will display the home view when the application is first loaded, and then allow the user to navigate to other views like contact or about screens via a navigation menu.
The client side router lets you dynamically display different content depending on the current URL.
Popular client side routers include the Angular Router, React Router and Vue Router.
See this GitHub repository for an example implementation of a JavaScript Router.
What is the URL? 👇
URL stands for Uniform Resource Locator and in its simplest definition, it’s a web address that references a web page.
Here is the definition of a URL from Wikipedia:
A Uniform Resource Locator (URL), colloquially termed a web address, is a reference to a web resource that specifies its location on a computer network and a mechanism for retrieving it. A URL is a specific type of Uniform Resource Identifier (URI), although many people use the two terms interchangeably. URLs occur most commonly to reference web pages (http), but are also used for file transfer (ftp), email (mailto), database access (JDBC), and many other applications.
🤚 🤚 🤚 Also, watch this video for more information about how URLs work:
Angular 10 Routing by Example 🙏
Angular CLI, version 10 at this time, allows you to quickly set up routing in your project in different ways:
Angular CLI 10 allows you to quickly set up routing in your project in different ways:
- You can use the routing flag when running the ng new command for initializing a new project,
- You can simply answer by Y when prompted by the CLI if Would you like to add routing?
After you add Angular routing in one of the available ways, you'll have a routing module inside your src/app/ folder which is conventionally called routing-module.ts
Continue reading here 👍 👍 👍
