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

Использование маршрутов Angular в одностраничном приложении

📅 28.02.2022

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

В одностраничном приложении (SPA), все функции вашего приложения существуют на одной HTML странице. Когда пользователи обращаются к функциям вашего приложения, браузеру нужно отобразить только те части, которые важны для пользователя, вместо того, чтобы загружать новую страницу.

Этот шаблон может значительно улучшить пользовательское восприятие вашего приложения.

Чтобы определить, как пользователи перемещаются по вашему приложению, вы используете маршруты. Добавьте маршруты, чтобы определить, как пользователи переходят от одной части вашего приложения к другой.

Вы также можете настроить маршруты для защиты от неожиданного или несанкционированного поведения.

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

Задачи

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

Предварительные условия

Чтобы завершить этот учебник, вы должны иметь базовое представление о следующих концепциях:

  • JavaScript
  • HTML
  • CSS
  • Angular CLI

Вам может быть полезен учебник Tour of Heroes, но он не обязателен.

Создайте пример приложения

Используя Angular CLI, создайте новое приложение, angular-router-sample. Это приложение будет состоять из двух компонентов: crisis-list и heroes-list.

  1. Создайте новый проект Angular, angular-router-sample.

    1
    ng new angular-router-sample

    Когда появится запрос Вы хотите добавить маршрутизацию Angular?, выберите N.

    На вопрос Какой формат таблицы стилей вы хотите использовать? выберите CSS.

    Через несколько мгновений новый проект angular-router-sample будет готов.

  2. В терминале перейдите в каталог angular-router-sample.

  3. Создайте компонент crisis-list.

    1
    ng generate component crisis-list

  4. В редакторе кода найдите файл crisis-list.component.html и замените содержимое placeholder на следующий HTML.

    1
2
    <h3>CRISIS CENTER</h3>
<p>Get your crisis here</p>

  5. Создайте второй компонент, heroes-list.

    1
    ng generate component heroes-list

  6. В редакторе кода найдите файл heroes-list.component.html и замените его содержимое на следующий HTML.

    1
2
    <h3>HEROES</h3>
<p>Get your heroes here</p>

  7. В редакторе кода откройте файл app.component.html и замените его содержимое на следующий HTML.

    1
2
3
    <h1>Angular Router Sample</h1>
<app-crisis-list></app-crisis-list>
<app-heroes-list></app-heroes-list>

  8. Убедитесь, что ваше новое приложение работает как ожидалось, выполнив команду ng serve.

    1
    ng serve

  9. Откройте браузер по адресу http://localhost:4200.

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

Импортируйте RouterModule из @angular/router.

Маршрутизация позволяет отображать определенные представления вашего приложения в зависимости от пути URL. Чтобы добавить эту функциональность в ваш пример приложения, вам необходимо обновить файл app.module.ts для использования модуля RouterModule. Вы импортируете этот модуль из @angular/router.

  1. В редакторе кода откройте файл app.module.ts.

  2. Добавьте следующий оператор import.

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

Определите ваши маршруты

В этом разделе вы определите два маршрута:

  • Маршрут /crisis-center открывает компонент crisis-center.
  • Маршрут /heroes-list открывает компонент heroes-list.

Определение маршрута — это объект JavaScript. Каждый маршрут обычно имеет два свойства.

Первое свойство, path, представляет собой строку, указывающую путь URL для маршрута.

Второе свойство, component, — это строка, указывающая, какой компонент должно отображать ваше приложение для этого пути.

  1. В редакторе кода откройте файл app.module.ts.

  2. Найдите раздел @NgModule().

  3. Замените массив imports в этой секции на следующий.

    1
2
3
4
5
6
7
    imports: [
    BrowserModule,
    RouterModule.forRoot([
        {path: 'crisis-list', component: CrisisListComponent},
        {path: 'heroes-list', component: HeroesListComponent},
    ]),
],

Этот код добавляет RouterModule в массив imports. Далее код использует метод forRoot() модуля RouterModule для определения двух маршрутов.

Этот метод принимает массив объектов JavaScript, каждый из которых определяет свойства маршрута.

Метод forRoot() гарантирует, что ваше приложение создаст только один RouterModule.

Для получения дополнительной информации смотрите Singleton Services.

Обновите ваш компонент с помощью router-outlet.

На данном этапе вы определили два маршрута для своего приложения. Однако ваше приложение по-прежнему имеет компоненты crisis-list и heroes-list, жестко закодированные в шаблоне app.component.html. Чтобы ваши маршруты работали, вам нужно обновить шаблон, чтобы динамически загружать компонент на основе пути URL.

Чтобы реализовать эту функциональность, вы добавляете директиву router-outlet в файл шаблона.

  1. В редакторе кода откройте файл app.component.html.

  2. Удалите следующие строки.

    1
2
    <app-crisis-list></app-crisis-list>
<app-heroes-list></app-heroes-list>

  3. Добавьте директиву router-outlet.

    1
    <router-outlet></router-outlet>

Просмотрите обновленное приложение в браузере. Вы должны увидеть только заголовок приложения.

Чтобы просмотреть компонент crisis-list, добавьте crisis-list в конец пути в адресной строке браузера.

Например:

1
http://localhost:4200/crisis-list

Обратите внимание, что компонент crisis-list отображается. Angular использует определенный вами маршрут для динамической загрузки компонента. Вы можете загрузить компонент heroes-list таким же образом:

1
http://localhost:4200/heroes-list

Управление навигацией с помощью элементов пользовательского интерфейса

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

В этом разделе вы добавите две ссылки, по которым пользователи смогут переходить между компонентами heroes-list и crisis-list.

Вы также добавите несколько стилей CSS.

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

Вы добавите эту функциональность в следующем разделе.

  1. Откройте файл app.component.html и добавьте следующий HTML под заголовком.

    1
2
3
4
5
6
7
8
9
    <nav>
    <a class="button" routerLink="/crisis-list"
        >Crisis Center</a
    >
    |
    <a class="button" routerLink="/heroes-list"
        >Heroes</a
    >
</nav>

    Этот HTML использует директиву Angular, routerLink.

    Эта директива соединяет определенные вами маршруты с файлами вашего шаблона.

  2. Откройте файл app.component.css и добавьте следующие стили.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    .button {
    box-shadow: inset 0 1px 0 0 #ffffff;
    background: #ffffff linear-gradient(to bottom, #ffffff
                5%, #f6f6f6 100%);
    border-radius: 6px;
    border: 1px solid #dcdcdc;
    display: inline-block;
    cursor: pointer;
    color: #666666;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: bold;
    padding: 6px 24px;
    text-decoration: none;
    text-shadow: 0 1px 0 #ffffff;
    outline: 0;
}
.activebutton {
    box-shadow: inset 0 1px 0 0 #dcecfb;
    background: #bddbfa linear-gradient(to bottom, #bddbfa
                5%, #80b5ea 100%);
    border: 1px solid #84bbf3;
    color: #ffffff;
    text-shadow: 0 1px 0 #528ecc;
}

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

Определение активного маршрута

Хотя пользователи могут перемещаться по вашему приложению с помощью ссылок, добавленных в предыдущем разделе, у них нет простого способа определить активный маршрут. Добавьте эту возможность с помощью директивы Angular routerLinkActive.

  1. В редакторе кода откройте файл app.component.html.

  2. Обновите теги якорей, чтобы включить директиву routerLinkActive.

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
    <nav>
    <a
        class="button"
        routerLink="/crisis-list"
        routerLinkActive="activebutton"
        ariaCurrentWhenActive="page"
    >
        Crisis Center
    </a>
    |
    <a
        class="button"
        routerLink="/heroes-list"
        routerLinkActive="activebutton"
        ariaCurrentWhenActive="page"
    >
        Heroes
    </a>
</nav>

Снова просмотрите свое приложение. Когда вы нажимаете на одну из кнопок, стиль этой кнопки автоматически обновляется, идентифицируя активный компонент для пользователя. Добавляя директиву routerLinkActive, вы сообщаете своему приложению о необходимости применения определенного CSS-класса к активному маршруту.

В данном руководстве этот CSS-класс — activebutton, но вы можете использовать любой класс, который вам нужен.

Обратите внимание, что мы также указываем значение для routerLinkActive в ariaCurrentWhenActive. Это гарантирует, что пользователи с ослабленным зрением (которые могут не воспринимать различные применяемые стилизации) также смогут определить активную кнопку. Для получения дополнительной информации см. раздел Accessibility Best Practices Active links identification section.

Добавление перенаправления

На этом этапе руководства вы добавляете маршрут, который перенаправляет пользователя на отображение компонента /heroes-list.

  1. В редакторе кода откройте файл app.module.ts.

  2. В массиве imports обновите секцию RouterModule следующим образом.

    1
2
3
4
5
6
7
8
    imports: [
    BrowserModule,
    RouterModule.forRoot([
        {path: 'crisis-list', component: CrisisListComponent},
        {path: 'heroes-list', component: HeroesListComponent},
        {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
    ]),
],

    Обратите внимание, что этот новый маршрут использует пустую строку в качестве пути.

    Кроме того, он заменяет свойство component на два новых:

    Свойства Подробности
    redirectTo Это свойство указывает Angular перенаправлять с пустого пути на путь heroes-list.
    pathMatch Это свойство указывает Angular на то, какую часть URL следует проверять. В данном руководстве вы должны установить это свойство в full. Эта стратегия рекомендуется, когда у вас есть пустая строка для пути. Более подробную информацию об этом свойстве можно найти в документации Route API.

Теперь, когда вы открываете свое приложение, оно по умолчанию отображает компонент heroes-list.

Добавление страницы 404

Пользователь может попытаться получить доступ к маршруту, который вы не определили. Чтобы учесть такое поведение, лучшей практикой является отображение страницы 404.

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

  1. В терминале создайте новый компонент PageNotFound.

    1
    ng generate component page-not-found

  2. В редакторе кода откройте файл page-not-found.component.html и замените его содержимое на следующий HTML.

    1
2
3
4
5
    <h2>Page Not Found</h2>
<p>
    We couldn't find that page! Not even with x-ray
    vision.
</p>

  3. Откройте файл app.module.ts.

    В массиве imports обновите секцию RouterModule следующим образом.

    1
2
3
4
5
6
7
8
9
    imports: [
    BrowserModule,
    RouterModule.forRoot([
        {path: 'crisis-list', component: CrisisListComponent},
        {path: 'heroes-list', component: HeroesListComponent},
        {path: '', redirectTo: '/heroes-list', pathMatch: 'full'},
        {path: '**', component: PageNotFoundComponent}
    ]),
],

    Новый маршрут использует путь, **.

    Этот путь — то, как Angular идентифицирует маршрут с подстановочным знаком.

    Любой маршрут, который не совпадает с существующим в вашей конфигурации, будет использовать этот путь.

    Обратите внимание, что маршрут с подстановочным знаком помещен в конец массива.

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

Попробуйте перейти к несуществующему маршруту в вашем приложении, например http://localhost:4200/powers. Этот маршрут не соответствует ни одному из определенных в вашем файле app.module.ts.

Однако, поскольку вы определили маршрут с подстановочным знаком, приложение автоматически отображает ваш компонент PageNotFound.

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

На данном этапе у вас есть базовое приложение, которое использует функцию маршрутизации Angular для изменения компонентов, которые пользователь может увидеть в зависимости от адреса URL. Вы расширили эти возможности, добавив перенаправление, а также маршрут с подстановочным знаком для отображения пользовательской страницы 404.

Для получения дополнительной информации о маршрутизации см. следующие темы:

Комментарии