Что такое загрузочный маршрутизатор?
Пакет bootstrap в Angular реализует возможности маршрутизатора, которые позволяют переходить между представлениями приложения при изменении URL-адреса. Пользователи AngularJS найдут маршрутизацию в Angular очень похожей на маршрутизатор AngularJS.
Однако одно важное отличие заключается в том, что Angular использует именованные URL-маршруты, а не хэш-маршруты. Это означает, что вместо использования «#» в URL-адресе Angular использует «/» для обозначения начала маршрута. Например, ниже приведен пример URL-адреса маршрутизатора Angular с использованием именованных маршрутов:
`https://www.example.com/home`
Этот URL-адрес будет вести к компоненту под названием «домой», который существует в приложении Angular.
Начало работы с Angular Router
Чтобы начать работу с маршрутизатором Angular, вам необходимо импортировать RouterModule из модуля @angular/router. Затем вам нужно будет использовать метод RouterModule.forRoot() для настройки маршрутов для вашего приложения. Метод RouterModule.forRoot() принимает массив объектов Route. Объект Route имеет следующие свойства:
- путь :шаблон URL-адреса, которому соответствует этот маршрут.
- компонент :компонент, который должен загрузить этот маршрут, когда URL-адрес соответствует пути.
- дети :Массив дочерних маршрутов, которые может иметь этот маршрут.
- можно активировать :Массив сторожей, которые необходимо пройти, прежде чем маршрут сможет быть загружен.
Ниже приведен пример простой конфигурации маршрутизатора Angular:
``` машинописный текст
импортировать { RouterModule, Routes } из '@angular/router';
константные маршруты:Маршруты =[
{ путь:«домой», компонент:HomeComponent },
{путь:'about', компонент:AboutComponent },
];
@NgModule({
импорт:[RouterModule.forRoot(маршруты)],
экспорт:[RouterModule]
})
класс экспорта AppRoutingModule { }
```
Эта конфигурация определяет два маршрута:один для домашнего компонента и один для компонента About. Когда URL-адрес соответствует пути маршрута, маршрутизатор загрузит связанный компонент.
Дополнительные возможности Angular Router
Маршрутизатор Angular предоставляет несколько дополнительных функций, в том числе:
- Отложенная загрузка :Маршрутизатор Angular можно использовать для отложенной загрузки компонентов, что означает, что они загружаются только тогда, когда они необходимы. Это может повысить производительность вашего приложения за счет сокращения времени начальной загрузки.
- Охранники :Защитники — это функции, которые можно использовать для предотвращения загрузки маршрута. Это может быть полезно, например, для целей аутентификации.
- Резолверы :Резолверы — это функции, которые можно использовать для получения данных перед загрузкой маршрута. Это может быть полезно для предварительной выборки данных, необходимых компоненту.
- Дочерние маршруты :Дочерние маршруты — это маршруты, которые могут быть вложены в другие маршруты. Это может быть полезно для организации вашего приложения по различным разделам.
- Параметры маршрута :Параметры маршрута можно использовать для передачи данных между компонентами. Это может быть полезно для передачи данных компоненту, загружаемому по маршруту.
– Параметры запроса :Параметры запроса можно использовать для передачи данных в маршрут. Это может быть полезно для фильтрации данных или для передачи данных компоненту, загружаемому по маршруту.
Дополнительную информацию о маршрутизаторе Angular можно найти в официальной документации.