Angular Routing

Angular Routing представляє собою перехід від одного компонента або модуля до іншого в залежності від заданого URL. Тобто з допомогою Angular Routing ми можемо реалізувати повноцінну навігацію, в межах однієї сторінки, зі зміною URL.

Навігація в Angular додатках відбувається без перезавантаження сторінки.

Для роботи з маршрутизацією в першу чергу варто визначити базову адресу аплікації. Для цього візьмемо веб-сторінку index.html і додамо в секцію <header> елемент <base href="/">.

index.html
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <base href="/" />
    <!-- ... -->
</head>
<body>
    <my-app></my-app>
    <!-- ... -->
</body>
</html>

Ключовим елементом для роботи маршрутизації є RouterModule.

Cтворимо app-routing.module.ts файл, це буде наш головний файл маршрутів (routes), в ньому ми будемо прописувати наші маршрути та їхні залежності.

app-routing.module.ts
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

const routes: Routes = [];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

RouterOutlet

Це елемент, що визначає куди буде вставлятися контент для відповідного маршрута. Тобто компоненти, на які вказує Angular Routing, вставиться в місце, де вказана директива <router-outlet></router-outlet>.

Додамо <router-outlet></router-outlet> в app.component.html файл.

app.component.html
<router-outlet></router-outlet>

В цьому випадку app.component буде контейнером для наших компонентів та модулів, які будуть відображатися відповідно до свого маршруту (route).

Routes

Розглянемо приклад створення маршрутів (routes).

app-routing.module.ts
// ....
import { TodosComponent } from './pages/todos/todos.component';

const routes: Routes = [
  { path: '', redirectTo: 'todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent },
  { path: '**', component: PageNotFoundComponent }
];

// ....

При створенні маршруту можна вказати наступні властивості

Властивість

Значення

path

найменування маршруту

component

компонент для відображення при переході на URL, що співпадає з path

redirectTo

перенаправляє на вказаний URL при попаданні на маршрут, зазначений в path

pathMatch

вказує, що адреса запиту повинна повністю відповідати маршруту, використовується спільно з redirectTo

children

для здійснення навігації на вкладеному рівні. Наприклад /routing/child-routing

Розберемо наш приклад більш детальніше.

Тут визначено три роути, кожен з яких буде оброблятися окремим компонентом. Для визначення роуту застосовується параметр path. Наприклад, шлях 'todos' представлятиме запит типу http://localhost:4200/todos і буде оброблятися класом TodosComponent.

Якщо запит не містить ніяких сегментів, наприклад, просто ім'я домену http://localhost:4200/, то такий запит буде зіставлятися зi шляхом '' (порожній рядок) і буде редіректитися на роут 'todos'. Значення pathMatch: 'full' вказує, що адреса запиту повинна повністю відповідати роуту.

Якщо додаток отримає запит, який не підходить ні під один з вище визначених роутів, то він буде зіставлятися з шаблоном '**', де дві зірочки відповідно будь-який шлях.

Завдання

  • Створити сторінки page-not-found та about.

cmd
ng g c pages/page-not-found
cmd
ng g c pages/about

  • Додати список роутів в app-routing.module.ts

app-routing.module.ts
// ....
import { TodosComponent } from './pages/todos/todos.component';
import { AboutComponent } from './pages/about/about.component';
import {
  PageNotFoundComponent
} from './pages/page-not-found/page-not-found.component';

const routes: Routes = [
  { path: '', redirectTo: 'todos', pathMatch: 'full' },
  { path: 'todos', component: TodosComponent },
  { path: 'about', component: AboutComponent },
  { path: '**', component: PageNotFoundComponent }
];
// ....
PreviousСтворення pipesNextNavigation

Last updated

Was this helpful?