Маршрутизація та навігація в Ionic

Лекція: Маршрутизація та навігація в Ionic

Вступ

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

Основні поняття маршрутизації в Ionic

1. Angular Router

Angular Router – це механізм, який забезпечує навігацію між різними компонентами або сторінками додатка. У Ionic він інтегрується з фреймворком для забезпечення плавних переходів.

Основні поняття маршрутизації:

• Routes (маршрути): визначають відповідність URL і компонентів.

• RouterOutlet: директива для відображення активного компонента в межах маршруту.

• RouterLink: директива для створення посилань на інші маршрути.

2. Налаштування маршрутизації

У проєкті Ionic маршрутизація налаштовується у файлі app-routing.module.ts.

Приклад базового маршруту:

const routes: Routes = [

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

{ path: 'home', loadChildren: () => import('./home/home.module').then(m => m.HomePageModule) },

{ path: 'details', loadChildren: () => import('./details/details.module').then(m => m.DetailsPageModule) }

];

Компоненти маршрутизації:

• path: шлях для доступу до сторінки.

• redirectTo: перенаправлення на інший маршрут.

• loadChildren: відкладене завантаження сторінок для оптимізації продуктивності.

3. RouterOutlet

<ion-router-outlet> використовується для відображення сторінок залежно від активного маршруту.

Приклад використання:

<ion-router-outlet></ion-router-outlet>

4. Навігація між сторінками

У Ionic доступні два способи навігації:

• Декларативний (RouterLink): використовується у шаблонах.

  <ion-button [routerLink]="'/details'">Перейти до деталей</ion-button>

• Програмний (Router.navigate): використовується у компонентах.

  import { Router } from '@angular/router';

  constructor(private router: Router) {}

  navigateToDetails() {

  this.router.navigate(['/details']);

  }

5. Відкладене завантаження (Lazy Loading)

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

Приклад lazy loading:

const routes: Routes = [

{ path: 'profile', loadChildren: () => import('./profile/profile.module').then(m => m.ProfilePageModule) }

];

6. Передача даних між сторінками

Іноді необхідно передати дані між сторінками. У Ionic це можна зробити через параметри маршруту або службові класи.

• Передача через URL:

  this.router.navigate(['/details', { id: 1 }]);

• Отримання даних:

  import { ActivatedRoute } from '@angular/router';

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {

  const id = this.route.snapshot.paramMap.get('id');

  console.log(id);

  }

• Використання сервісів: Сервіси дозволяють передавати дані між сторінками, не залежачи від URL.

7. Обробка помилок маршрутизації

Для роботи з некоректними URL можна налаштувати маршрут-перехоплювач:

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

Переваги маршрутизації в Ionic

1. Гнучкість та масштабованість
   Просте додавання нових сторінок та модулів без ускладнень.

2. Lazy Loading
   Зменшує розмір основного пакета додатка, покращуючи продуктивність.

3. Можливість передачі даних
   Легко передавати дані між компонентами та сторінками через URL або сервіси.

4. Підтримка мобільного інтерфейсу
   Ionic забезпечує плавні анімації переходів між сторінками.

Питання вихідного контролю

1. Що таке маршрутизація в Ionic і для чого вона використовується?

2. Яку роль відіграє RouterOutlet у маршрутизації?

3. Як налаштувати перенаправлення з одного маршруту на інший?

4. Що таке lazy loading, і як його реалізувати в Ionic?

5. Чим відрізняється декларативна та програмна навігація?

6. Як передати дані між сторінками через URL?

7. Які основні переваги маршрутизації в Ionic?

8. Що відбувається, якщо користувач переходить за некоректним URL? Як це обробити?

9. Наведіть приклад створення маршруту для сторінки profile.

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