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

دو مفهوم اصلی در Angular Routing عبارت‌اند از:

  • routerLink
  • routerOutlet

در این آموزش یاد می‌گیریم routerLink و routerOutlet در Angular 17 چگونه کار می‌کنند و چگونه می‌توان با استفاده از آن‌ها سیستم مسیریابی حرفه‌ای ایجاد کرد.

routerOutlet چیست؟

routerOutlet یک جایگاه (Placeholder) در صفحه است که Angular کامپوننت مربوط به مسیر فعلی را داخل آن نمایش می‌دهد.

به زبان ساده، هر زمان کاربر وارد یک Route جدید شود، Angular کامپوننت مربوط به آن مسیر را در routerOutlet بارگذاری می‌کند.

مثال routerOutlet

<router-outlet></router-outlet>

هر صفحه‌ای که کاربر به آن مراجعه کند، در این بخش نمایش داده می‌شود.

routerLink چیست؟

routerLink دستور مخصوص Angular برای ایجاد لینک‌های داخلی برنامه است.

در Angular به جای استفاده از href بهتر است از routerLink استفاده کنیم زیرا:

  • صفحه رفرش نمی‌شود.
  • وضعیت برنامه حفظ می‌شود.
  • تجربه کاربری سریع‌تر خواهد بود.
  • Angular مدیریت ناوبری را بر عهده می‌گیرد.

مثال routerLink

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

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

  1. آدرس URL تغییر می‌کند.
  2. Angular مسیر را پیدا می‌کند.
  3. کامپوننت مقصد در routerOutlet نمایش داده می‌شود.

تعریف Route در Angular 17

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

import { Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { ProductsComponent } from './products/products.component';
import { ProductDetailsComponent } from './product-details/product-details.component';

export const appRoutes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'products', component: ProductsComponent },
  { path: 'products/:id', component: ProductDetailsComponent }
];

توضیح مسیرها

  • صفحه اصلی: /
  • لیست محصولات: /products
  • جزئیات محصول: /products/:id

استفاده از routerLink و routerOutlet در Layout اصلی

در فایل app.component.html معمولاً ساختاری مشابه زیر داریم:

<nav>
  <a routerLink="/">خانه</a>
  <a routerLink="/products">محصولات</a>
</nav>

<hr>

<router-outlet></router-outlet>

در این ساختار، لینک‌ها توسط routerLink ایجاد شده‌اند و محتوای هر صفحه داخل routerOutlet نمایش داده می‌شود.

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

برای مشخص کردن صفحه فعلی می‌توان از routerLinkActive استفاده کرد.

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

CSS:

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

این قابلیت باعث بهبود تجربه کاربری و ناوبری در Angular می‌شود.

مسیرهای داینامیک در Angular

یکی از کاربردهای مهم Angular Router استفاده از پارامترهای مسیر است.

ایجاد لینک داینامیک

<a [routerLink]="['/products', item.id]">
  مشاهده محصول
</a>

خروجی:

/products/5
/products/20

دریافت پارامتر مسیر در کامپوننت

در صفحه جزئیات محصول می‌توان مقدار ID را دریافت کرد.

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

export class ProductDetailsComponent {

  route = inject(ActivatedRoute);

  ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    console.log(id);
  }
}

به این روش می‌توان اطلاعات محصول موردنظر را از سرور دریافت کرد.

مثال کامل Navigation در Angular

<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>

CSS:

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

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

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

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

استفاده از routerLink و routerOutlet در Angular مزایای زیادی دارد:

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

جمع‌بندی

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

اگر قصد یادگیری Angular Routing را دارید، تسلط بر routerLink و routerOutlet اولین قدم برای ساخت یک سیستم مسیریابی حرفه‌ای در Angular است.

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

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

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