یکی از مهم‌ترین قابلیت‌های Angular، سیستم مسیریابی یا Routing است. در برنامه‌های تک‌صفحه‌ای (SPA)، کاربران بدون رفرش شدن صفحه بین بخش‌های مختلف برنامه جابه‌جا می‌شوند. این قابلیت توسط Angular Router پیاده‌سازی می‌شود.

فرض کنید یک فروشگاه اینترنتی داریم و کاربر می‌خواهد بین صفحات زیر حرکت کند:

  • صفحه اصلی
  • محصولات
  • جزئیات محصول
  • سبد خرید
  • پروفایل کاربری

در چنین شرایطی Angular Router وظیفه مدیریت مسیرها و نمایش کامپوننت مناسب را بر عهده دارد.

در این آموزش یاد می‌گیریم:

  • Angular Router چیست
  • routerLink چه کاربردی دارد
  • routerOutlet چگونه کار می‌کند
  • چگونه Route تعریف کنیم
  • چگونه لینک فعال بسازیم
  • پیاده‌سازی یک مثال واقعی با چند صفحه

Angular Router چیست؟

Angular Router سیستم مسیریابی داخلی Angular است که امکان جابه‌جایی بین صفحات مختلف برنامه را بدون Reload شدن صفحه فراهم می‌کند.

مزایای Angular Router:

  • تجربه کاربری بهتر
  • سرعت بالاتر نسبت به سایت‌های سنتی
  • مدیریت ساده مسیرها
  • پشتیبانی از Route Parameters
  • پشتیبانی از Lazy Loading

ساخت پروژه نمونه

فرض کنید سه صفحه داریم:

  • HomeComponent
  • ProductsComponent
  • CartComponent

ساخت کامپوننت‌ها:

ng generate component pages/home

ng generate component pages/products

ng generate component pages/cart

تعریف Routeها در Angular 17

در Angular 17 معمولاً از Standalone Routing استفاده می‌شود.

فایل routes:

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

import { HomeComponent } from './pages/home/home.component';
import { ProductsComponent } from './pages/products/products.component';
import { CartComponent } from './pages/cart/cart.component';

export const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'cart',
    component: CartComponent
  }
];

توضیح مسیرها:

مسیرصفحه
/صفحه اصلی
/productsمحصولات
/cartسبد خرید

routerOutlet چیست؟

routerOutlet مهم‌ترین بخش Angular Routing است.

این دستور مشخص می‌کند که Angular کامپوننت مربوط به Route فعلی را در کدام قسمت صفحه نمایش دهد.

مثال

<router-outlet></router-outlet>

هر زمان مسیر تغییر کند، Angular محتوای جدید را داخل این بخش نمایش می‌دهد.

عملکرد routerOutlet

فرض کنید کاربر وارد آدرس زیر شود:

/products

Angular مراحل زیر را انجام می‌دهد:

  1. Route را پیدا می‌کند.
  2. ProductsComponent را پیدا می‌کند.
  3. آن را داخل routerOutlet نمایش می‌دهد.

routerLink چیست؟

برای جابه‌جایی بین صفحات باید از routerLink استفاده کنیم.

استفاده از href در Angular توصیه نمی‌شود زیرا باعث Reload شدن کامل صفحه می‌شود.

مثال

<a routerLink="/">خانه</a>

<a routerLink="/products">
  محصولات
</a>

<a routerLink="/cart">
  سبد خرید
</a>

با کلیک روی هر لینک:

  • URL تغییر می‌کند.
  • صفحه Reload نمی‌شود.
  • Angular مسیر جدید را نمایش می‌دهد.

استفاده همزمان از routerLink و routerOutlet

در اکثر پروژه‌ها ساختار اصلی برنامه به شکل زیر است:

<nav>
  <a routerLink="/">خانه</a>

  <a routerLink="/products">
    محصولات
  </a>

  <a routerLink="/cart">
    سبد خرید
  </a>
</nav>

<hr>

<router-outlet></router-outlet>

در این مثال:

  • routerLink مسئول تغییر مسیر است.
  • routerOutlet مسئول نمایش صفحه است.

ساخت لینک فعال با routerLinkActive

کاربران باید بدانند در کدام صفحه قرار دارند.

برای این کار از routerLinkActive استفاده می‌کنیم.

<a
  routerLink="/products"
  routerLinkActive="active"
>
  محصولات
</a>

CSS:

.active {
  color: #4f46e5;
  font-weight: bold;
}

تشخیص دقیق صفحه اصلی

برای صفحه Home بهتر است از گزینه exact استفاده کنیم.

<a
  routerLink="/"
  routerLinkActive="active"
  [routerLinkActiveOptions]="{
    exact: true
  }"
>
  خانه
</a>

این کار باعث می‌شود لینک خانه فقط زمانی فعال شود که دقیقاً در صفحه اصلی باشیم.

مثال کامل Angular Router

app.routes.ts

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

import { HomeComponent } from './pages/home/home.component';
import { ProductsComponent } from './pages/products/products.component';
import { CartComponent } from './pages/cart/cart.component';

export const appRoutes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
  {
    path: 'products',
    component: ProductsComponent
  },
  {
    path: 'cart',
    component: CartComponent
  }
];

app.component.html

<nav class="menu">

  <a
    routerLink="/"
    routerLinkActive="active"
    [routerLinkActiveOptions]="{ exact: true }"
  >
    خانه
  </a>

  <a
    routerLink="/products"
    routerLinkActive="active"
  >
    محصولات
  </a>

  <a
    routerLink="/cart"
    routerLinkActive="active"
  >
    سبد خرید
  </a>

</nav>

<router-outlet></router-outlet>

app.component.css

.menu {
  display: flex;
  gap: 20px;
  padding: 20px;
  background: #f5f5f5;
}

.menu a {
  text-decoration: none;
  color: #444;
}

.menu a.active {
  color: #4f46e5;
  font-weight: bold;
}

خروجی پروژه

اگر کاربر روی لینک محصولات کلیک کند:

/products

نمایش داده می‌شود:

ProductsComponent

اگر روی سبد خرید کلیک کند:

/cart

نمایش داده می‌شود:

CartComponent

تمام این عملیات بدون Refresh شدن صفحه انجام می‌شود.

مزایای استفاده از Angular Router

استفاده از Angular Router مزایای زیادی دارد:

  • ناوبری سریع بین صفحات
  • تجربه کاربری بهتر
  • مناسب برای SPA
  • مدیریت حرفه‌ای مسیرها
  • پشتیبانی از Lazy Loading
  • پشتیبانی از Guardها
  • توسعه‌پذیری بالا

اشتباهات رایج

استفاده از href به جای routerLink

اشتباه:

<a href="/products">
  محصولات
</a>

صحیح:

<a routerLink="/products">
  محصولات
</a>

فراموش کردن routerOutlet

اگر routerOutlet وجود نداشته باشد، هیچ صفحه‌ای نمایش داده نمی‌شود.

<router-outlet></router-outlet>

جمع‌بندی

در این جلسه با Angular Router آشنا شدیم و یاد گرفتیم چگونه از routerLink و routerOutlet برای پیاده‌سازی مسیریابی در Angular استفاده کنیم. همچنین نحوه تعریف Routeها، ساخت لینک فعال با routerLinkActive و ایجاد یک سیستم ناوبری کامل را بررسی کردیم.

دسترسی به ویدیوهای کامل دوره

برای مشاهده ویدیوهای کامل هر جلسه، دریافت تمرین‌ها، فایل‌ها و پشتیبانی، می‌توانید دوره کامل را تهیه کنید.

آموزش جامع Angular 17 تا 21 | از مبتدی تا پیشرفته + پروژه‌محور