Тестовое задание на Angular. Создание lazy страницы.

Когда базовые сервисы с работы с данными созданы, можно проверить их работоспособность.

Для этого создадим новый модуль и компонент:

ng g m booking/page

Также создадим компонент:

ng g c booking/page

Подключим в BookingPageModule сервисы по работе с RoomState:

imports: [CommonModule, RoomStateModule, RoomServiceModule],

Создадим модуль, который будет отвечать на навигацию BookingPageRoutingModule:

Подключим модуль в BookingPageModule:

Добавим ленивый модуль AppRoutingModule:

const routes: Routes = [
  {
    path: '',
    component: LayoutComponent,
    children: [
      {
        path: '',
        loadChildren: (): Promise<any> => import('@app/booking/page').then((modules) => modules.BookingPageModule),
      },
    ],
  },
];

Запустим проект:

Добавим вывод комнат в BookingPageComponent:

Обновим страницу:

Ссылки

Вернуться к оглавлению — Введение.

Следующая статья — Добавление google maps.

Предыдущая статья — Работа с данными из State.

Все исходники на github/fafnur/barinb.

Fafnur/barinb

Группа в Medium: https://medium.com/fafnur
Группа в Vkontakte: https://vk.com/fafnur
Группа в Facebook: https://www.facebook.com/groups/fafnur/
Telegram канал: https://t.me/f_a_f_n_u_r
Twitter: https://twitter.com/Fafnur1
LinkedIn: https://www.linkedin.com/in/fafnur