Konfigurowanie tras w Angularze

W tej lekcji poznają Państwo routing w Angularze — sposób nawigowania między widokami i zarządzania adresami URL w aplikacji.

Czym jest routing?

Routing umożliwia nawigowanie między różnymi komponentami lub stronami aplikacji Angulara na podstawie adresu URL.

Konfigurowanie modułu routingu

Moduł routingu można utworzyć podczas rozpoczynania projektu lub później za pomocą Angular CLI:

ng generate module app-routing --flat --module=app

Definiowanie tras

Trasy definiuje się jako tablicę ścieżek powiązanych z komponentami:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

Outlet routera

Elementu <router-outlet></router-outlet> należy użyć do dynamicznego renderowania komponentów dopasowanych do trasy.

<router-outlet></router-outlet>

Nawigowanie za pomocą routerLink

Między widokami można nawigować za pomocą dyrektywy routerLink:

<a routerLink="/home">Home</a>

Nawigowanie programowe

Można również nawigować programowo za pomocą usługi Router:

this.router.navigate(['/home']);

Trasy wieloznaczne

Nieokreślone ścieżki można obsługiwać za pomocą tras wieloznacznych, aby wyświetlać niestandardową stronę 404:

{ path: '**', component: PageNotFoundComponent }

Podsumowanie

Znają już Państwo podstawy routingu i potrafią skutecznie konfigurować trasy w aplikacjach Angular. Świetna praca!