آموزش انگولار جلسه 17: Query Parameters، Child Routes و Lazy Loading در Angular

در این جلسه از آموزش Angular وارد مفاهیم پیشرفته‌تر Routing می‌شویم.
بعد از یادگیری routerLink و router-outlet، حالا نوبت این سه مفهوم مهم است:

• Query Parameters
• Child Routes (Nested Routes)
• Lazy Loading Modules

این سه قابلیت در پروژه‌های واقعی Angular نقش بسیار مهمی در ساخت SPAهای حرفه‌ای دارند.

Query Parameters در Angular

Query Parameters داده‌هایی هستند که بعد از علامت ? در URL قرار می‌گیرند و برای فیلتر کردن یا انتقال اطلاعات استفاده می‌شوند.

مثال:

/products?category=mobile&page=2

نحوه گرفتن Query Params

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

constructor(private route: ActivatedRoute) {}

ngOnInit() {
  this.route.queryParams.subscribe(params => {
    console.log(params['category']);
    console.log(params['page']);
  });
}

ارسال Query Params

<a [routerLink]="['/products']" [queryParams]="{ category: 'mobile', page: 2 }">
  Mobiles
</a>

Child Routes (Nested Routing)

Child Routes به ما اجازه می‌دهند مسیرهای تو در تو (Nested) بسازیم.
این قابلیت برای داشبوردها و پنل‌های مدیریتی بسیار کاربردی است.

مثال ساختار Route

const routes = [
  {
    path: 'dashboard',
    component: DashboardComponent,
    children: [
      { path: 'users', component: UsersComponent },
      { path: 'settings', component: SettingsComponent }
    ]
  }
];

نمایش Child Route

در کامپوننت والد باید از router-outlet استفاده کنیم:

<h2>Dashboard</h2>

<nav>
  <a routerLink="users">Users</a>
  <a routerLink="settings">Settings</a>
</nav>

<router-outlet></router-outlet>

کاربرد واقعی

• پنل مدیریت
• پروفایل کاربری
• داشبوردهای چند بخشی

Lazy Loading در Angular

Lazy Loading یعنی لود کردن ماژول‌ها فقط زمانی که کاربر به آن صفحه وارد می‌شود.

این کار باعث افزایش شدید Performance می‌شود.

ساخت Lazy Module

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

ساخت ماژول جداگانه

ng generate module admin --route admin --module app.module

مزایای Lazy Loading

• کاهش حجم اولیه اپلیکیشن
• افزایش سرعت لود اولیه
• بهینه‌سازی SEO و UX
• مناسب برای پروژه‌های بزرگ

جمع‌بندی

در این جلسه یاد گرفتیم:

• ارسال و دریافت Query Parameters
• ساخت ساختارهای حرفه‌ای با Child Routes
• افزایش Performance با Lazy Loading

این سه مفهوم پایه طراحی SPAهای حرفه‌ای در Angular هستند و در پروژه‌های واقعی مثل پنل‌های مدیریتی و SaaS بسیار استفاده می‌شوند.

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

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