مسیریابی پیشرفته
مسیریابی پیشرفته در انگولار یک قابلیت حیاتی برای ایجاد برنامه‌های Single Page Application (SPA) مدرن و مقیاس‌پذیر است. در حالی که مسیریابی ساده تنها مسیرها را به کامپوننت‌ها متصل می‌کند، مسیریابی پیشرفته امکان استفاده از ویژگی‌های پیچیده‌ای مانند nested routes، پارامترهای داینامیک، lazy-loaded modules، route guards و همگام‌سازی state را فراهم می‌کند. این قابلیت به ویژه در برنامه‌هایی که نیاز به احراز هویت کاربران، دسترسی مبتنی بر نقش و کامپوننت‌های قابل استفاده مجدد دارند، اهمیت می‌یابد.
در انگولار، مسیریابی پیشرفته با مفاهیم کلیدی مانند کامپوننت‌ها، سرویس‌ها و Observables پیوند خورده است. کامپوننت‌ها بلوک‌های اصلی رابط کاربری هستند و سرویس‌ها همراه با Observables مدیریت state مشترک و جلوگیری از prop drilling و re-renderهای غیرضروری را بر عهده دارند. همچنین lifecycle hooks مانند ngOnInit و ngOnDestroy برای بارگذاری، بروزرسانی و پاکسازی داده‌ها هنگام تغییر مسیر بسیار کاربردی هستند.
در این آموزش، یاد خواهید گرفت چگونه با استفاده از پارامترهای داینامیک مسیر، ناوبری برنامه‌نویسی شده، route guards و nested routes، الگوهای مسیریابی پیشرفته را پیاده‌سازی کنید. همچنین مدیریت state کامپوننت‌ها، بهینه‌سازی عملکرد و امنیت مسیرها به عنوان best practice پوشش داده خواهند شد و نمونه‌های واقعی نشان خواهند داد که چگونه می‌توان کامپوننت‌های قابل استفاده مجدد و maintainable را با Angular Router ادغام کرد.
مثال پایه
typescriptimport { NgModule, Component } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
@Component({
selector: 'app-home',
template: `<h1>صفحه اصلی</h1>`
})
export class HomeComponent {}
@Component({
selector: 'app-profile',
template: `<h1>پروفایل</h1><p>شناسه کاربر: {{ userId }}</p>`
})
export class ProfileComponent {
userId: string | null = null;
}
const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'profile/:id', component: ProfileComponent }
];
@NgModule({
declarations: [HomeComponent, ProfileComponent],
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule {}در این مثال پایه، دو کامپوننت HomeComponent و ProfileComponent تعریف شده‌اند. ProfileComponent از پارامتر مسیر داینامیک (:id) استفاده می‌کند تا شناسه کاربر از URL دریافت شود. RouterModule.forRoot(routes) مسیرهای root را ثبت کرده و امکان ناوبری SPA را فراهم می‌کند.
این الگو از prop drilling جلوگیری می‌کند زیرا ProfileComponent مستقیماً از پارامتر مسیر استفاده می‌کند. lifecycle hooks مانند ngOnInit برای مقداردهی اولیه داده‌ها و مدیریت تغییرات مسیر مناسب هستند. این ساختار پایه برای افزودن lazy-loaded modules، nested routes و route guards مناسب است و الگوی مسیریابی پیشرفته را آماده می‌کند.
مثال کاربردی
typescriptimport { Injectable, Component, OnInit, OnDestroy } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { BehaviorSubject, Subscription } from 'rxjs';
@Injectable({ providedIn: 'root' })
export class UserService {
private userSubject = new BehaviorSubject<{ id: string; name: string }>({ id: '1', name: 'Alice' });
user$ = this.userSubject.asObservable();
updateUserName(name: string) {
const current = this.userSubject.value;
this.userSubject.next({ ...current, name });
}
}
@Component({
selector: 'app-user-detail',
template: ` <div *ngIf="user"> <h2>{{ user.name }}</h2> <p>شناسه کاربر: {{ user.id }}</p> <button (click)="changeName()">تغییر نام</button> </div>
`
})
export class UserDetailComponent implements OnInit, OnDestroy {
user!: { id: string; name: string };
private subscription!: Subscription;
constructor(private route: ActivatedRoute, private userService: UserService, private router: Router) {}
ngOnInit() {
const id = this.route.snapshot.paramMap.get('id');
this.subscription = this.userService.user$.subscribe(user => {
if (user.id === id) {
this.user = user;
} else {
this.router.navigate(['/']);
}
});
}
changeName() {
this.userService.updateUserName('Bob');
}
ngOnDestroy() {
this.subscription.unsubscribe();
}
}در این مثال پیشرفته، UserService با BehaviorSubject state مشترک بین کامپوننت‌ها را مدیریت می‌کند. UserDetailComponent پارامتر مسیر داینامیک را با ActivatedRoute دریافت کرده و با Observable همگام می‌ماند.
ناوبری برنامه‌نویسی شده با Router.navigate اطمینان می‌دهد که اگر پارامتر مسیر معتبر نباشد، کاربر به مسیر مناسب هدایت شود. Lifecycle hooks ngOnInit و ngOnDestroy مدیریت subscription و جلوگیری از memory leak را فراهم می‌کنند. بروزرسانی immutable با استفاده از spread operator باعث فعال شدن صحیح Change Detection می‌شود و re-render غیرضروری کاهش می‌یابد. این الگو برای برنامه‌های واقعی مانند پروفایل کاربر یا داشبوردهای داینامیک مناسب است.
بهترین شیوه‌ها برای مسیریابی پیشرفته شامل استفاده از سرویس‌های مرکزی برای مدیریت state، جلوگیری از prop drilling، بروزرسانی immutable state و پاکسازی subscriptions است. nested routes و lazy-loaded modules عملکرد برنامه را بهبود می‌دهند و route guards مسیرهای حساس را ایمن می‌کنند.
اشتباهات رایج شامل mutation مستقیم state، عدم پاکسازی subscriptionها و ایجاد سلسله مراتب پیچیده کامپوننت‌ها است. بهینه‌سازی عملکرد با OnPush change detection، تقسیم ماژول‌ها و کاهش محاسبات template توصیه می‌شود. برای امنیت، استفاده از CanActivate/CanDeactivate guards و اعتبارسنجی داده‌ها در سطح route و سرویس‌ها ضروری است. رعایت این best practices باعث ایجاد برنامه‌های maintainable، performant و secure می‌شود.
📊 جدول مرجع
| انگولار Element/Concept | Description | Usage Example |
|---|---|---|
| RouterModule | ثبت و مدیریت مسیرهای برنامه | imports: [RouterModule.forRoot(routes)] |
| ActivatedRoute | دسترسی به پارامترها و query params مسیر | constructor(private route: ActivatedRoute) |
| BehaviorSubject | مدیریت state مشترک بین کامپوننت‌ها | private userSubject = new BehaviorSubject<User>(initialUser) |
| ngOnInit/ngOnDestroy | مدیریت lifecycle و پاکسازی subscription | ngOnInit() { ... } ngOnDestroy() { ... } |
| Router.navigate | ناوبری برنامه‌نویسی شده و هدایت مجدد | this.router.navigate(['/profile', userId]) |
مسیریابی پیشرفته انگولار به توسعه‌دهندگان امکان کنترل الگوهای پیچیده ناوبری، همگام‌سازی state کامپوننت و بهینه‌سازی عملکرد SPA را می‌دهد. مفاهیم کلیدی شامل سرویس‌های مرکزی، پارامترهای داینامیک مسیر، ناوبری برنامه‌نویسی شده و پاکسازی subscriptionها هستند. این مفاهیم به طور یکپارچه با توسعه Angular ادغام می‌شوند و امکان ایجاد کامپوننت‌های modular، قابل استفاده مجدد و برنامه‌های مقیاس‌پذیر را فراهم می‌کنند.
گام‌های بعدی شامل یادگیری nested routes، lazy-loaded modules، route guards و resolvers است. پیاده‌سازی عملی این الگوها باعث افزایش تجربه کاربری و maintainability برنامه می‌شود. منابع پیشنهادی شامل مستندات رسمی Angular، آموزش‌های پیشرفته و نمونه‌های SPA است.
🧠 دانش خود را بیازمایید
دانش خود را بیازمایید
خود را با این آزمون تعاملی به چالش بکشید و ببینید موضوع را چقدر خوب درک کرده‌اید
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود