Когда мы запускаем приложение Angular и обслуживаем его по номеру порта, скажем (4200), мы запускаем наше приложение по адресу http: // localhost: 4200

Это единственный путь, который понимает наш браузер, и поэтому он не может обслуживать разные места назначения по разным путям, например http: // localhost: 4200 / items. Но что, если у нас есть несколько путей в одном приложении?

Как решить эту проблему?

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

Вот тут-то и вступает в действие Маршрутизатор Javascript. Это облегчает нашу жизнь, меняя пункт назначения всякий раз, когда меняется путь. С технической точки зрения, путем изменения состояния приложения при каждом изменении URL-адреса браузера и наоборот.

Эти маршрутизаторы написаны на определенных платформах Javascript Framework, а для Angular они упакованы как @angular/router

@angular/router содержит показанные термины:

  1. Служба: это глобальная служба, присутствующая в приложении Angular.
  2. Состояние: состояние маршрутизатора поддерживается состоянием маршрутизатора.
  3. Конфигурация: он хранит информацию обо всех состояниях маршрутизации, присутствующих в приложении.
  4. Guard: это код, который запускается всякий раз, когда маршрутизатор активируется, деактивируется или загружается.
  5. Снимок: он предоставит доступ к состоянию и данным для определенного узла маршрута.
  6. Resolver: скрипт, который будет получать данные перед запуском запрашиваемой страницы.
  7. Розетка: это место в модели DOM для розетки маршрутизатора, в которой размещаются его компоненты.

Не беспокойтесь об этих сложных терминах, мы рассмотрим их кодом :)

Время кодирования

Чтобы указать пути и места назначения вашему браузеру, вам необходимо импортировать RouterModule и Routes из @angular/router в ваш app.module.ts файл.

import {RouterModule, Routes} from '@angular/router';

После этого вы можете определить массив ваших путей и целевых страниц.

const routes: Routes = [
  {
    path: '',
    redirectTo: 'items',
    pathMatch: 'full'
  },
  {
    path: 'items',
    component: AppComponent
  }
];

Примечание. Здесь pathMatch указывает строгое соответствие пути для достижения целевой страницы.

Наконец, вам нужно передать массив маршрутов в RouterModule с помощью RouterModule.forRoot(routes) и добавить его в imports

RouterModule.forRoot(routes)

Полный файл app.module.ts будет выглядеть так:

Объяснение:

В массиве routes объектом path является '', что означает путь http://localhost:4200/, мы не указали место назначения для этого объекта, но мы перенаправляем этот путь на items путь с помощью ключа redirectTo.

Теперь каждый запрос на http://localhost:4200/ будет перенаправляться на http://localhost:4200/items. В следующем объекте мы указали место назначения для пути от items к AppComponent с помощью ключа component, что означает, что при каждом запросе http://localhost:4200/items AppComponent будет выполнять рендеринг.

Технологический процесс:

Request on http://localhost:4200/

Redirected to http://localhost:4200/items

AppComponent will get Render

Отлично…. :) Наша конфигурация маршрутизации настроена, но нам нужно указать приложению Angular, где разместить наш визуализированный компонент приложения.

Для этого мы будем использовать router-outlet.

Поскольку наше приложение загружает AppComponent при первой загрузке. Лучшим вариантом будет передача кода AppComponent дочернему компоненту и размещение только router-outlet внутри AppComponent.

Итак, давайте создадим дочерний компонент, названный здесь ListComponent, с помощью команды:

ng generate component list

А затем мы перенесем весь код в ListComponent из AppComponent

Наконец, мы напишем <router-outlet></router-outlet> в app.component.html. Это обеспечит размещение здесь DOM компонента.

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

Полный код можно найти в репозитории.



aayusharora / Angular-Routing
Участвуйте в разработке Angular-Routing, создав учетную запись на GitHub. github.com



Надеюсь, этот пост действительно поможет вам легко добавлять маршруты в ваше приложение Angular. В следующей части мы увидим концепцию Nested Routing.

А пока, до свидания: p

Если вам понравилась статья, пожалуйста, хлопните в ладоши. Совет. Вы можете хлопать 50 раз!

Пожалуйста, поделитесь также в Fb и Twitter. Если вы хотите получать обновления, подписывайтесь на меня в Twitter и Medium. Если что-то неясно или вы хотите что-то указать, прокомментируйте ниже.