Angular Routing E-Book

Abdelfattah Ragab

• Herausgeber: tredition
• Kategorie: Wissenschaft und neue Technologien
• Sprache: Englisch

Seitenzahl: 19

Veröffentlichungsjahr: 2024

Beschreibung

Welcome to the book "Angular Routing". In this book, I explain everything you need to know about Angular routing. Routing helps you to change what the user sees in a single-page app. In this book, you will learn how to implement common routing tasks. You will learn how to set up routes, retrieve route information, display 404 pages, prevent unauthorized access, and much more. By the end of this book, you will be confident working with routing in your Angular application and be able to handle all kinds of scenarios. Let us get started.

Leseprobe

Angular Routing

Everything you need to know

Abdelfattah Ragab

Introduction

Welcome to the book “Angular Routing”.

In this book, I explain everything you need to know about Angular routing.

Routing helps you to change what the user sees in a single-page app.

In this book, you will learn how to implement common routing tasks. You will learn how to set up routes, retrieve route information, display 404 pages, prevent unauthorized access, and much more.

By the end of this book, you will be confident working with routing in your Angular application and be able to handle all kinds of scenarios.

Let us get started.

Configuration

If you open the Angular application in Visual Studio Code, you can find the app.config.ts file in the src/app folder of the application.

In the providers array, you must specify the routes as follows: provideRouter(routes). This is what it looks like:

import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';

import { provideRouter } from '@angular/router';

import { routes } from './app.routes';

providers: [provideZoneChangeDetection({ eventCoalescing: true }), provideRouter(routes)]

};

The routes array is defined in the app.routes.ts file. It will be empty at first:

import { Routes } from '@angular/router';

<router-outlet />

The router outlet is a directive that acts as a placeholder that Angular fills dynamically based on the current router state.

If you open the app.component.html file, you will find it in the last line of the file. Normally we remove all the code above this line when we start a new application.

We remove everything in the app.component.html file and leave only one line: the <router outlet />.

If you want to add a header to the application, you can add it above this line, and if you want to add a footer, you need to add it after this line. The router outlet line is the place where the dynamic component is placed based on the current router state.

How the router works

Angular routing is very simple, you just have to add a new entry to the routes array. That's it.

If you enter this path in the address bar, the desired component will be displayed in the <router-outlet /> placeholder.

Let us see this in action by adding a new entry to the routes array in the app.routes.ts file.