> For the complete documentation index, see [llms.txt](https://koziuk-s.gitbook.io/angular-starter/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://koziuk-s.gitbook.io/angular-starter/routing.md). # Angular Routing Angular Routing представляє собою перехід від одного компонента або модуля до іншого в залежності від заданого URL. Тобто з допомогою Angular Routing ми можемо реалізувати повноцінну навігацію, в межах однієї сторінки, зі зміною URL. Навігація в Angular додатках відбувається без перезавантаження сторінки. Для роботи з маршрутизацією в першу чергу варто визначити базову адресу аплікації. Для цього візьмемо веб-сторінку **index.html** і додамо в секцію `

` елемент ``. {% code title="index.html" overflow="wrap" lineNumbers="true" %} ```markup

``` {% endcode %} Ключовим елементом для роботи маршрутизації є **RouterModule**. Cтворимо **app-routing.module.ts** файл, це буде наш головний файл маршрутів (routes), в ньому ми будемо прописувати наші маршрути та їхні залежності. {% code title="app-routing.module.ts" overflow="wrap" lineNumbers="true" %} ```typescript import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } ``` {% endcode %} ### RouterOutlet Це елемент, що визначає куди буде вставлятися контент для відповідного маршрута. Тобто компоненти, на які вказує Angular Routing, вставиться в місце, де вказана директива ``. Додамо `` в **app.component.html** файл. {% code title="app.component.html" overflow="wrap" lineNumbers="true" %} ```markup ``` {% endcode %} В цьому випадку **app.component** буде контейнером для наших компонентів та модулів, які будуть відображатися відповідно до свого маршруту (route). ### Routes Розглянемо приклад створення маршрутів (routes). {% code title="app-routing.module.ts" overflow="wrap" lineNumbers="true" %} ```typescript // .... import { TodosComponent } from './pages/todos/todos.component'; const routes: Routes = [ { path: '', redirectTo: 'todos', pathMatch: 'full' }, { path: 'todos', component: TodosComponent }, { path: '**', component: PageNotFoundComponent } ]; // .... ``` {% endcode %} При створенні маршруту можна вказати наступні властивості | Властивість | Значення | | ----------- | ------------------------------------------------------------------------------------------------------- | | 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**. {% code title="cmd" %} ```bash ng g c pages/page-not-found ``` {% endcode %} {% code title="cmd" %} ```bash ng g c pages/about ``` {% endcode %} * Додати список роутів в **app-routing.module.ts** {% code title="app-routing.module.ts" overflow="wrap" lineNumbers="true" %} ```typescript // .... 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 } ]; // .... ``` {% endcode %}