Routing

Routing pozwala zawrzeć pewne aspekty stanu aplikacji w adresie URL. Dla aplikacji front-end jest to opcjonalne - możemy zbudować pełną aplikację bez zmiany adresu URL. Dodanie routingu pozwala jednak użytkownikowi przejść od razu do pewnych funkcji aplikacji. Dzięki temu aplikacja jest łatwiej przenośna i dostępna dla zakładek oraz umożliwi użytkownikom dzielenie się linkami z innymi.

Routing ułatwia:

  • Utrzymanie stanu aplikacji
  • Wdrażanie aplikacji modułowych
  • Stosowanie ról w aplikacji (niektóre role mają dostęp do określonych adresów URL)

Bazowy adres URL

Początek URL (adres bazowy) musi być ustawiony w seksci <head> głównego pliku index.html aplikacji. Poniższy zapis oznacza, że en początek będzie adresem URL serwera:

<base href="/">

W stosunku do adresu bazowego ustalane są wszystkie adresy wewnątrz strony.

Definicje tras

Typ Routes to tablica tras definiująca routing dla aplikacji. Tutaj możemy ustawić oczekiwane ścieżki i komponenty, których chcemy używać. Każda trasa może mieć różne atrybuty:

  • path - URL wyświetlany w przeglądarce, gdy aplikacja znajduje się na określonej trasie
  • component - komponent do renderowania, gdy aplikacja znajduje się na określonej trasie
  • redirectTo - przekierowanie trasy w razie potrzeby; każda trasa może mieć atrybut komponentu lub przekierowania (omówiony w dalszej części tego rozdziału)
  • pathMatch - opcjonalna właściwość, która domyślnie przyjmuje prefiks; określa, czy dopasować pełne adresy URL, czy tylko początek. Podczas definiowania trasy z pustym ciągiem znaków ustaw parametr pathMatch na full, w przeciwnym razie dopasuje wszystkie ścieżki.
  • children - tablica obiektów definiujących trasy reprezentująca trasy podrzędne tej trasy (opisana w dalszej części tego rozdziału).

Aby użyć Routes, utwórz tablicę konfiguracji tras.

Poniżej znajduje się przykładowa definicja tablicy Routes:

const routes: Routes = [
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

Zobacz definicję tras

RouterModule

RouterModule.forRoot pobiera tablicęRoutes jako argument i zwraca configured router module. Poniższy przykład pokazuje, jak importujemy ten moduł do pliku app.routes.ts.

app/app.routes.ts

...
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  { path: 'component-one', component: ComponentOne },
  { path: 'component-two', component: ComponentTwo }
];

export const routing = RouterModule.forRoot(routes);

Następnie zaimportujemy naszą konfigurację routingu do katalogu głównego naszej aplikacji.

app/app.module.ts

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

@NgModule({
  imports: [
    BrowserModule,
    routing
  ],
  declarations: [
    AppComponent,
    ComponentOne,
    ComponentTwo
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {
}