Зв’язування даних, Маршрути в Angular 18

Зв'язок даних — це комунікація між класом компонента та шаблоном представлення, є два типи зв'язку

1. Односторонній зв'язок: коли ми отримуємо доступ до властивості класу компонента і її відповідного шаблону представлення. Інтерполяція {{names і т.д.}}, зв'язок властивості [], зв'язок події ()

1. Двосторонній зв'язок: він зв'язує клас компонента з шаблоном представлення та шаблон з класом компонента. Це комбінація зв'язку властивості та зв'язку події

Огляд зв'язку даних

Типи зв'язку даних в Angular

Angular надає чотири типи зв'язку даних, які дозволяють здійснювати комунікацію між представленням (HTML) та моделлю.

Розглянемо їх один за одним.

1. Інтерполяція (Односторонній зв'язок даних: Модель → Представлення)

• Що робить: Виводить дані з моделі (компонента) до представлення (HTML).
• Як це працює: Огортає властивість моделі в подвійні фігурні дужки {{ }}.
• Приклад:

// app.component.ts  
 import { Component } from '@angular/core';  
@Component({  
 selector: 'app-root',  
 templateUrl: './app.component.html',  
 })  
 export class AppComponent {  
 message = 'Hello, Angular!'; // Модель  
 }  

 {{ message }}
Click Me ```  
- **Використання**: Обробка взаємодії з користувачем.

## 4. **Двосторонній зв'язок даних (Модель ↔ Представлення)**

- **Що робить**: Синхронізує дані між **представленням** та **моделлю** в обох напрямках.  
- **Як це працює**: Поєднує **зв'язок властивості** та **зв'язок події** за допомогою директиви `[(ngModel)]`.
- **Приклад**:

 // app.component.ts  
 export class AppComponent {  
 userName = ''; // Модель  
 }  

  Ваше ім'я: {{ userName }}

• Використання: Інтерактивні форми, де зміни в полі вводу оновлюють модель і навпаки.

Підсумок типів зв'язку даних в Angular

| Тип зв'язку | Напрямок | Приклад | Використання |
| — — — — — — — — — — — — — | — — — — — — — — — — — — | — — — — — — — — — — — — — |
| Інтерполяція | Модель → Представлення | {{ message }} | Виведення динамічних даних у представлення |
| Зв'язок властивості | Модель → Представлення | [src]=”imageUrl” | Динамічне оновлення атрибутів елементів |
| Зв'язок події | Представлення → Модель | (click)=”onClick()” | Обробка взаємодії з користувачем |
| Двосторонній зв'язок | Модель ↔ Представлення | [(ngModel)]=”userName” | Синхронізація полів вводу з моделлю |

Візуальне представлення

Інтерполяція: Модель → Представлення  
Зв'язок властивості: Модель → Представлення  
Зв'язок події: Представлення → Модель  
Двосторонній зв'язок: Модель ←> Представлення  

Чому важливий зв'язок даних?

• Спрощує розробку: Зменшує необхідність вручну оновлювати дані в представленнях або моделях.
• Покращує читабельність коду: Зробить більш очевидним, як дані рухаються в додатку.
• Підтримує динамічні додатки: Необхідно для створення відгукливих та інтерактивних веб-додатків.
  Практикуйте ці приклади, щоб закріпити свої знання!

Маршрутизатор в Angular

Маршрутизатори використовуються для навігації між частинами додатку або між різними виглядами. Для обробки навігації з одного вигляду на інший використовується маршрутизатор Angular (Router). Він дозволяє змінювати вигляд, інтерпретуючи URL браузера як команду для зміни вигляду.

Маршрут за замовчуванням:

Це зазвичай механізм резервного переходу для обробки невизначених або нерозпізнаних маршрутів в додатку.

1. Обробка помилок 404 (Сторінка не знайдена)

• Коли користувачі намагаються перейти за URL, який не відповідає жодному з визначених маршрутів, маршрут за замовчуванням може відобразити кастомну сторінку "404 — Сторінка не знайдена". Це покращує досвід користувача, надаючи зворотний зв'язок про помилки навігації, замість того, щоб показувати порожній екран або стандартне повідомлення про помилку.

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

2. Перенаправлення на сторінку за замовчуванням

• Маршрут за замовчуванням може бути використаний для перенаправлення користувачів на сторінку за замовчуванням або на домашню сторінку, коли вони вводять невизнаний URL.

{ path: '**', redirectTo: '/home', pathMatch: 'full' }

3. Динамічна маршрутизація

• В деяких додатках, маршрути за замовчуванням використовуються для захоплення динамічних частин URL, які не відповідають заздалегідь визначеним маршрутам. Наприклад, це може бути обробка слагів або динамічних параметрів.

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

Ключові моменти для запам'ятовування:

• Маршрути за замовчуванням повинні завжди розміщуватись останніми в конфігурації маршрутів, оскільки Angular (або інші фреймворки) обробляють маршрути по черзі.
• Уникайте надмірного використання маршрутів за замовчуванням, оскільки вони можуть перешкоджати логіці маршрутизації, якщо розташовані неправильно.
• Поєднуйте маршрути за замовчуванням з механізмами обробки помилок та логування, щоб відслідковувати часті проблеми з навігацією в додатку.

Ліниве завантаження маршрутів

Використовується для завантаження модулів за запитом, щоб оптимізувати продуктивність. Ліниве завантаження маршрутів у веб-розробці — це спосіб покращити продуктивність вашого додатку, завантажуючи тільки ті частини (або модулі), які необхідні, коли вони потрібні.

Як використовувати:

1. Створіть модуль з маршрутизацією.
2. Використовуйте loadChildren для лінивого завантаження модуля.

 // app-routing.module.ts  
   const routes: Routes = [    
    { path: 'admin', loadChildren: () => import('./admin/admin.module').then(m => m.AdminModule) }  
   ];  
   {path:'databinds',loadComponent:()=>import('./data-bindings-c/data-bindings-c.component').then(m=>m.DataBindingsCComponent)},

Чому використовувати ліниве завантаження маршрутів?

1.
Швидке початкове завантаження:

Коли користувач вперше відкриває ваш додаток, він завантажує лише код для сторінок, які йому потрібні негайно. Це дозволяє додатку завантажуватись швидше, особливо якщо він великий і містить багато функцій.

2. Економія пропускної здатності:

Якщо користувачі не відвідують певні частини вашого додатку, ці частини не будуть завантажуватися взагалі. Це корисно для користувачів з обмеженою швидкістю інтернету або мобільними даними.

3. Кращий досвід користувача:

Додаток здається швидким і відгукливим, оскільки завантажується менша частина коду замість всього додатку відразу.

4. Ефективне використання ресурсів:

Ваш додаток ефективніше використовує ресурси пристрою (пам'ять, потужність процесора), завантажуючи лише необхідний код.

Приклад в Angular

Уявімо, що у вас є додаток для покупок з двома розділами:

• Головна сторінка (для перегляду товарів)
• Сторінка кошика (для управління покупками)

Якщо користувач хоче лише переглядати товари, йому не потрібно завантажувати код для сторінки кошика відразу.

Без лінивого завантаження

Весь код для головної сторінки та сторінки кошика завантажується одночасно, навіть якщо користувач ніколи не перейде на сторінку кошика.

З лінивим завантаженням

• Додаток завантажує лише код головної сторінки спочатку.
• Коли користувач натискає "Перейти до кошика", код сторінки кошика завантажується саме тоді.

Як працює ліниве завантаження

В Angular ви налаштовуєте ліниве завантаження, створюючи окремі модулі для частин вашого додатку та зв'язуючи їх з маршрутами.

Ось приклад:

const routes: Routes = [  
 { path: '', component: HomeComponent }, // Головна сторінка завантажується одразу  
 {  
 path: 'cart',  
 loadChildren: () =>  
 import('./cart/cart.module').then((m) => m.CartModule), // Ліниве завантаження сторінки кошика  
 },  
];

Основний маршрутизатор

Основний маршрутизатор використовується для визначення та навігації між статичними маршрутами.

Як використовувати:

1. Імпортуйте RouterModule та Routes з @angular/router.
2. Визначте масив маршрутів, зв'язуючи шляхи з компонентами.
3. Використовуйте `` в шаблоні для завантаження маршрутизованого компонента.

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

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

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

Головна    Про нас       

Вкладені (дочірні) маршрути

Використовуються, коли маршрути мають ієрархію, наприклад, батьківський маршрут з дочірніми компонентами.

Як використовувати:

1. Визначте дочірні маршрути за допомогою властивості children.
2. Включіть `` у батьківський компонент.

Приклад:

 // app-routing.module.ts   
 const routes: Routes = [    
    {     
     path: 'dashboard',     
     component: DashboardComponent,    
    children: [    
    { path: 'profile', component: ProfileComponent },    
    { path: 'settings', component: SettingsComponent }    
    ]    
   }   
 ]; 

Параметризовані маршрути

Використовуються для передачі параметрів в маршрут, зазвичай для отримання деталей на основі ідентифікатора (ID).

Як використовувати:

1. Визначте маршрут з параметром (наприклад, :id).
   2.
   Використовуйте ActivatedRoute, щоб отримати параметр.

// app-routing.module.ts  
const routes: Routes = [  
 { path: 'product/:id', component: ProductComponent }  
];

// product.component.ts  
import { Component, OnInit } from '@angular/core';  
import { ActivatedRoute } from '@angular/router';  

@Component({  
 selector: 'app-product',  
 template: 'Product ID: {{ id }}'   
})   
export class ProductComponent implements OnInit {    
 id!: string;       
 constructor(private route: ActivatedRoute) {}       
 ngOnInit() {    
  this.id = this.route.snapshot.paramMap.get('id')!;    
 }   
} 

Параметри запиту

Використовуються для передачі додаткової інформації через URL без визначення її в шляху маршруту.

Як використовувати:

1. Використовуйте Router для навігації з параметрами запиту.
2. Отримуйте параметри запиту за допомогою ActivatedRoute.

// Навігація з параметрами запиту  
this.router.navigate(['/products'], { queryParams: { sort: 'price', order: 'asc' } });

// app.component.ts  
import { ActivatedRoute } from '@angular/router';      

ngOnInit() {    
 this.route.queryParams.subscribe(params => {    
  console.log(params); // { sort: 'price', order: 'asc' }    
 });   
} 

Перенаправлення маршрутів

Використовуються для перенаправлення з одного маршруту на інший.

Як використовувати:

1. Визначте маршрут з властивістю redirectTo.

const routes: Routes = [    
 { path: '', redirectTo: '/home', pathMatch: 'full' },    
 { path: 'home', component: HomeComponent }   
]; 

Маршрути з резолверами

Використовуються для отримання даних перед навігацією до маршруту.

Як використовувати:

1. Створіть сервіс-резолвер, який реалізує Resolve.
2. Використовуйте властивість resolve в визначенні маршруту.

// app-routing.module.ts   
const routes: Routes = [    
 { path: 'user/:id', component: UserComponent, resolve: { user: UserResolver } }   
]; 




Перекладено з: [Data binding, Route in angular 18](https://medium.com/@srishti.srajput/data-binding-route-in-angular-18-fbf28c81d7e3)