Конфигурация маршрутов

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

Основы маршрутизации в Angular

Для того чтобы начать использовать маршрутизацию в Angular, необходимо настроить RouterModule в основном модуле приложения. Это делается с помощью метода RouterModule.forRoot() в массиве imports в декораторе @NgModule.

Пример базовой конфигурации маршрутов:

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

В данном примере создаются два маршрута:

  1. Путь '' (пустой) направляет пользователя на компонент HomeComponent.
  2. Путь 'about' направляет на AboutComponent.

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

Роутинг в шаблоне

Для отображения компонентов в зависимости от текущего маршрута используется директива router-outlet. Это своего рода “маркёр” в шаблоне, который Angular заменяет на соответствующий компонент, когда маршрут совпадает с путём.

<router-outlet></router-outlet>

Когда пользователь переходит по маршруту, Angular автоматически находит нужный компонент и рендерит его в месте, где находится директива router-outlet.

Параметры маршрута

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

Пример маршрута с параметром:

const routes: Routes = [
  { path: 'user/:id', component: UserDetailComponent }
];

В этом примере маршрут 'user/:id' будет соответствовать любому пути, содержащему идентификатор пользователя (например, /user/1 или /user/42).

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

Пример получения параметра в компоненте:

import { ActivatedRoute } from '@angular/router';

@Component({
  selector: 'app-user-detail',
  templateUrl: './user-detail.component.html',
  styleUrls: ['./user-detail.component.css']
})
export class UserDetailComponent implements OnInit {
  userId: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit(): void {
    this.userId = this.route.snapshot.paramMap.get('id');
  }
}

В данном примере this.route.snapshot.paramMap.get('id') возвращает значение параметра id из URL.

Защита маршрутов (Route Guards)

В Angular можно защитить маршруты, чтобы, например, предотвратить доступ к определённым страницам без авторизации. Для этого используются Route Guards — сервисы, которые реализуют интерфейсы для охраны маршрутов.

Основные типы защитников маршрутов:

  1. CanActivate — проверяет, может ли пользователь перейти по маршруту.
  2. CanActivateChild — проверяет, может ли пользователь перейти к дочернему маршруту.
  3. CanDeactivate — проверяет, можно ли покинуть текущий маршрут (например, если имеются несохранённые данные).
  4. Resolve — выполняет асинхронную операцию перед загрузкой маршрута (например, загрузка данных).
  5. CanLoad — проверяет, можно ли загрузить модуль маршрута (используется для ленивой загрузки).

Пример использования CanActivate:

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean> | Promise<boolean> | boolean {
    if (this.authService.isAuthenticated()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}

В данном примере AuthGuard проверяет, авторизован ли пользователь, перед тем как разрешить доступ к защищённому маршруту. Если пользователь не авторизован, его перенаправляют на страницу входа.

Ленивая загрузка модулей

Ленивая загрузка (lazy loading) позволяет загружать модули только при необходимости, что помогает улучшить производительность приложения. Для этого необходимо использовать метод loadChildren в конфигурации маршрутов.

Пример ленивая загрузки:

const routes: Routes = [
  { path: 'dashboard', loadChildren: () => import('./dashboard/dashboard.module').then(m => m.DashboardModule) }
];

В этом примере модуль DashboardModule будет загружен только тогда, когда пользователь перейдёт по маршруту '/dashboard'. Для этого Angular использует Webpack или другой бандлер для разделения кода и подгрузки модулей по требованию.

Обработка ошибок маршрутизации

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

Пример маршрута для обработки несуществующих маршрутов:

const routes: Routes = [
  { path: 'home', component: HomeComponent },
  { path: '**', component: PageNotFoundComponent }
];

Маршрут с путём ** является универсальным и будет использоваться, если ни один из других маршрутов не совпадает с текущим. Это удобно для отображения страницы “Не найдено”, когда пользователь вводит неверный URL.

Перенаправления маршрутов

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

Пример перенаправления маршрута:

const routes: Routes = [
  { path: 'old-home', redirectTo: '/home', pathMatch: 'full' }
];

В данном примере при переходе на маршрут '/old-home' пользователь будет автоматически перенаправлен на '/home'.

Заключение

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

Оглавление