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 nafull
, 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 }
];
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 {
}