Перейти к содержанию

Урок 10: Добавление маршрутов в приложение

Этот обучающий урок демонстрирует, как добавить маршруты в приложение.

Затраты времени: ожидайте, что на выполнение этого урока вы потратите около 25 минут.

Перед началом

Этот урок начинается с кода из предыдущего урока, поэтому вы можете:

  • Использовать код, созданный в Уроке 9, в своей интегрированной среде разработки (IDE).

  • Начните с примера кода из предыдущего урока. Выберите код из Урока 9, где вы можете:

    • Использовать живой пример в StackBlitz, где интерфейс StackBlitz является вашей IDE.

    • Использовать download пример и открыть его в вашей IDE.

Если вы не просмотрели введение, посетите Введение в Angular tutorial, чтобы убедиться, что у вас есть все необходимое для завершения этого урока.

Если у вас возникнут трудности во время этого урока, вы можете просмотреть готовый код для этого урока.

После завершения

По окончании этого урока ваше приложение будет поддерживать маршрутизацию.

Концептуальный обзор маршрутизации

В этом уроке рассказывается о маршрутизации в Angular. Маршрутизация — это возможность перехода от одного компонента приложения к другому. В одностраничных приложениях (SPA) обновляется только часть страницы, чтобы представить пользователю запрошенное представление.

Angular Router позволяет пользователям объявлять маршруты и указывать, какой компонент должен отображаться на экране, если этот маршрут запрашивается приложением.

В этом уроке вы включите маршрутизацию в своем приложении для перехода на страницу подробностей.

Шаги урока

Выполните эти шаги в коде приложения в вашей IDE.

Шаг 1 — Создание компонента подробностей по умолчанию

  1. В терминале введите следующую команду для создания DetailsComponent:

    1
    ng generate component details --standalone --inline-template --skip-tests

    Этот компонент будет представлять собой страницу подробностей, которая предоставляет более подробную информацию о данном жилье.

Шаг 2 — Добавление маршрутизации в приложение

  1. В директории src/app создайте файл routes.ts. В этом файле мы будем определять маршруты в приложении.

  2. В файле main.ts сделайте следующие обновления, чтобы включить маршрутизацию в приложении:

    1. Импортируйте файл routes и функцию provideRouter:

      1
2
      import { provideRouter } from '@angular/router';
import routeConfig from './app/routes';

    2. Обновите вызов bootstrapApplication, чтобы включить конфигурацию маршрутизации:

      1
2
3
4
5
6
      bootstrapApplication(AppComponent, {
    providers: [
        provideProtractorTestingSupport(),
        provideRouter(routeConfig),
    ],
}).catch((err) => console.error(err));

  3. В src/app/app.component.ts обновите компонент для использования маршрутизации:

    1. Добавьте импорт на уровне файла для RoutingModule:

      1
      import { RouterModule } from '@angular/router';

    2. Добавьте RouterModule в метаданные импорта @Component.

      1
2
3
4
      imports: [
    HomeComponent,
    RouterModule,
],

    3. В свойстве template замените тег <app-home></app-home> на директиву <router-outlet> и добавьте ссылку на главную страницу. Ваш код должен соответствовать этому коду:

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
      template: `
<main>
    <a [routerLink]="['/']">
    <header class="brand-name">
        <img class="brand-logo" src="/assets/logo.svg" alt="logo" aria-hidden="true">
    </header>
    </a>
    <section class="content">
    <router-outlet></router-outlet>
    </section>
</main>
`,

Шаг 3 — Добавление маршрута в новый компонент

В предыдущем шаге вы удалили ссылку на компонент <app-home> в шаблоне. В этом шаге вы добавите новый маршрут к этому компоненту.

  1. В файле routes.ts выполните следующие обновления для создания маршрута.

    1. Добавьте импорт на уровне файла для HomeComponent, DetailsComponent и типа Routes, которые вы будете использовать в определениях маршрутов.

      1
2
3
      import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { DetailsComponent } from './details/details.component';

    2. Определите переменную routeConfig типа Routes и определите два маршрута для приложения:

       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
      const routeConfig: Routes = [
    {
        path: '',
        component: HomeComponent,
        title: 'Home page',
    },
    {
        path: 'details/:id',
        component: DetailsComponent,
        title: 'Home details',
    },
];

export default routeConfig;

      Записи в массиве routeConfig представляют маршруты в приложении. Первая запись перемещает к HomeComponent, когда url совпадает с ''. Вторая запись использует некоторое специальное форматирование, которое будет рассмотрено в одном из следующих уроков.

  2. Сохраните все изменения и убедитесь, что приложение работает в браузере. Приложение должно по-прежнему отображать список мест расположения жилья.

Обзор урока

В этом уроке вы включили маршрутизацию в своем приложении, а также определили новые маршруты. Теперь ваше приложение может поддерживать навигацию между представлениями. В следующем уроке вы научитесь переходить на страницу "Подробности" для данного места расположения жилья.

Вы делаете большие успехи в работе над своим приложением, молодцы.

Если у вас возникли трудности с этим уроком, вы можете просмотреть готовый код для него.

Следующие шаги

Дополнительная информация

Для получения дополнительной информации о темах, рассмотренных в этом уроке, посетите сайт:

Ссылки

Комментарии