С легкостью создавайте сложные приложения Angular

Научитесь использовать все лучшие инструменты Angular для создания потрясающих и эффективных веб-приложений.

Angular: проектирование и архитектура веб-приложений

Что такое Angular Router?

Angular Router — это импортируемый пакет, встроенный в Angular 2+ по умолчанию. Он используется для создания одностраничных приложений с несколькими представлениями, по которым можно перемещаться по URL-адресу, известному как «маршрутизация».

URL-адреса состоят из имени домена и определения маршрута, известного как путь. Путь — это объект JavaScript, который сервер использует для доступа к определенному ресурсу в базе данных. Когда сервер обслуживает наше приложение, Angular берет путь из URL и сопоставляет его с любыми действительными путями, которые мы настроили. По сути, мы устанавливаем отношение «ключ-значение» с таким путем, как /blog в качестве ключа, а желаемая страница — в качестве значения .

Это позволяет пользователям легко перемещаться по вашему приложению и посещать нужную страницу без необходимости начинать с домашнего компонента. Маршрутизация обеспечивает поддержку общего поведения браузера, такого как стрелки вперед/назад и закладки страниц.

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

Модуль маршрутизации и RouterOutlet

Модули маршрутизации — это специальные модули Angular, которые определяют новые маршруты и помогают настроить маршрутизатор . Все модули маршрутизации имеют суффикс -routing после их имени, который автоматически добавляется Angular CLI.

Каждый модуль маршрутизации устанавливает поведение маршрутизации для парного модуля с такое же базовое имя. Например, поведение маршрутизации для нашего модуля home будет в модуле маршрутизации home-routing .

Вот пример модуля маршрутизации для нашего модуля home , называемого home-routing.module.ts :

   импортировать {NgModule} из '@ angular/core'; импортировать {Routes, RouterModule} из '@ angular/router'; импортировать {HomeMainComponent} из './home-main/home-main.component';  константные маршруты: Routes = [{путь: '', компонент: HomeMainComponent}];  @NgModule ({import: [RouterModule.forChild (routes)], exports: [RouterModule]}) класс экспорта HomeRoutingModule {}  

Вы можете найти наши маршруты в routes переменная массива. Каждый элемент массива routes представляет маршрут к представлению одного компонента.

Элементы состоят из двух частей: path свойство, которое предоставляет путь URL, и свойство component , которое определяет, какой компонент будет загружен по указанному пути.

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

Мы также можем использовать redirectto , чтобы направлять пустые URL-адреса пути на другую страницу, если мы предпочитаем, чтобы пользователи попадали в другое место.

Затем нам нужно удалить HomeMainComponent из экспорта HomeModule . Такое использование маршрутизации означает, что мы больше не экспортируем компонент и вместо этого позволяем Router позаботиться о загрузке компонента, если пользователь посещает маршрут.

Наконец, мы заменим содержимое app.component.html файл со строкой:

Здесь действует как заполнитель для компонента. Вместо определения компонента наш шаблон просто извлечет любой компонент, отображаемый с переданным URL-путем. Используя этот заполнитель, нам не нужно экспортировать компонент. Вместо этого мы можем экспортировать модуль.

Вы можете теперь просмотрите это приложение, введя http://localhost: 4200 в адресную строку браузера.

Чтобы проверить, HomeRoutingModule — это модуль маршрутизации, в котором мы определять маршруты. У нас есть один маршрут, состоящий из пустого пути. Мы проверим, соответствует ли ввод URL-адреса клиента этому пути. Если это так, мы загрузим главную страницу через HomeMainComponent .

Компонент домашней страницы доступен благодаря серии операций импорта. Сначала мы импортируем модуль home-routing в его парный стандартный модуль home . Затем мы импортируем модуль home в модуль приложения. Наконец, мы используем директиву в файле app.component.html для загрузки HomeMainComponent зарегистрированы в исходном массиве routes .

Что такое маршруты с подстановочными знаками?

Что происходит, когда пользователь вводит неверный путь? Мы можем избежать ошибки, включив Wildcard Route , который перехватывает все незарегистрированные пути и направляет их на определенную страницу. Вы можете думать о подстановочных знаках как о «другой» категории, которая читается как соответствие любым незарегистрированным путям.

Большинство сайтов имеют подстановочный знак, который указывает на страницу «404 страница не найдена». Чтобы создать компонент ошибки для нашего приложения, введите в командную строку следующее:

  ng generate component PageNotFound  

Нам не нужен модуль, потому что этот экран ошибки будет просто текстом.

Вы можете установить подстановочный знак, введя ** вместо стандартного пути в массиве routes .

  import {NgModule} from '@ angular/core'; import {Routes,  RouterModule} из '@ angular/router'; импортировать {PageNotFoundComponent} из './page-not-found/page-not-found.component';  константные маршруты: Routes = [{путь: '**', компонент: PageNotFoundComponent}];  @NgModule ({import: [RouterModule.forRoot (routes)], exports: [RouterModule]}) класс экспорта AppRoutingModule {}  

Теперь любой недопустимый URL-адрес будет перенаправлять на наш 404 страница ошибки.

Нам нужно убедиться, что этот компонент импортирован последним в файле app.module.ts , чтобы другие наши компоненты загружались правильно. Это связано с тем, что Angular загружает компонент из первого подходящего пути. Если сначала импортируется AppRoutingModule , Angular всегда будет загружать PageNotFoundComponent , потому что подстановочный знак всегда будет считаться совпадением, и поэтому Angular вернет этот компонент.

  импортирует: [BrowserModule, HomeModule, AboutModule, ContactModule, AppRoutingModule,],  

Подстановочный знак внизу Массив imports гарантирует, что будут возвращены все допустимые совпадения, а 404 будет возвращен только в том случае, если других совпадений нет..

Дочерние маршруты

Иногда имеет смысл классифицировать маршруты как подгруппу внутри маршрута. Например, наша страница «О нас» может содержать отдельные подстраницы для информации о сотрудниках, /about/team и информации о прошлых клиентах, /about/clients . Дочерние компоненты отображаются только в том случае, если пользователь находится на родительском пути /about .

Сначала мы сгенерируем компоненты, введя следующее в нашу командную строку :

  ng generate component about/teamng generate component about/clients:  

Затем мы устанавливаем их как дочерние элементы «About» Нас », добавив свойство массива children в маршрут about в about-routing.module.ts .

  импортировать {NgModule} из '@ angular/core'; импортировать {Routes, RouterModule} из '@ angular/router'; импортировать {AboutMainComponent} из './about-main /about-main.component'import {BioComponent} из './bio/bio.component';import {TeamComponent} из' ./team/team.component';import {ClientsComponent} из './clients/clients.component  ';  const routes: Routes = [{path: '', component: AboutMainComponent, children: [{path: '', component: BioComponent}, {path: 'team', component: TeamComponent}, {path: 'clients', component  : ClientsComponent},]}];  @NgModule ({import: [RouterModule.forChild (routes)], exports: [RouterModule]}) класс экспорта AboutRoutingModule {}  

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

Например, полный путь для достижения TeamComponent будет /about/team , а не просто '/team' .

Наконец, мы обновите файл шаблона about-main.component.html с помощью , чтобы он отображал любые дочерние компоненты о .

  
 О странице 
  

Директива RouterLink

Большинство приложений позволяют пользователям перемещаться по определенному URL-адресу и нажимать на элементы ссылок. Для добавления ссылок нам понадобится Bootstrap. Вы можете создавать ссылки, используя стандартные атрибуты href . Однако это требует обновления сайта и перезагрузки ресурсов при каждом изменении страницы.

Мы можем ускорить загрузку с помощью директивы Angular Router routerLink , которая использует API истории, чтобы позволить Угловой доступ к истории вашего браузера. Это означает, что браузерам нужно загружать каждую страницу только один раз, поскольку при последующих посещениях могут отображаться ранее загруженные элементы.

Чтобы реализовать routerLink , замените содержимое app.component.html с:

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

Добавление стилей ActiveLink

Основываясь на нашей новой навигации ссылки, нам также нужен способ сообщить пользователю, на какой странице он сейчас находится. Лучший способ сделать это в Angular — использовать класс active , который изменит стиль ссылки, если они в данный момент включены, чтобы указать, что она активна.

В Bootstrap класс active можно применить к элементу

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

Мы применяем директиву к

элементы с классом nav-item . Эта директива проверяет, соответствует ли URL в адресной строке пути в директиве routerLink .

Если путь совпадает, мы добавим его в active , чтобы изменить текст ссылки, чтобы показать, что она активна, с более темным цветом текста.

Модули отложенной загрузки

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

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