پرش به مطلب اصلی

Angular Routing

مقدمه​

در جاوااسکریپت خالص (Vanilla JavaScript)، روتینگ به صورت Single Page Application (SPA) به طور پیش‌فرض وجود ندارد. در وب‌سایت‌های سنتی، هر بار که کاربر به یک صفحه جدید هدایت می‌شود، درخواستی به سرور ارسال می‌شود و کل صفحه مجدداً بارگذاری می‌گردد. این رویکرد می‌تواند منجر به تجربه کاربری کندتر و ناکارآمدتر شود، زیرا هر بار که کاربر صفحه‌ای را تغییر می‌دهد، باید منتظر بماند تا تمام محتوا و منابع صفحه جدید از سرور دریافت و ایجاد شوند.

Angular routing این محدودیت را برطرف می‌کند و امکان ایجاد اپلیکیشن‌های تک‌صفحه‌ای واقعی را فراهم می‌آورد. با استفاده از Angular routing، توسعه‌دهندگان می‌توانند مکانیزمی ایجاد کنند که به جای بارگذاری مجدد کل صفحه، تنها بخش‌های مورد نیاز اپلیکیشن را به‌روزرسانی کند. این قابلیت باعث می‌شود که جابه‌جایی بین صفحات مختلف اپلیکیشن سریع‌تر و روان‌تر انجام شود، زیرا فقط محتوای جدید لود می‌شود و ساختار کلی صفحه ثابت می‌ماند.

  • مسیردهی (Routing) در انگولار چیست؟
  • تعریف مسیردهی (Routing) در انگولار
  • Route Guard چیست؟

یادگیری​

مسیردهی (Routing) در انگولار چیست؟​

هنگامیکه شما در حال تولید یک نرم‌افزار تک صفحه‌ای (Single Page App) هستید همواره نرم‌افزار خود را به سمتی سوق می‌دهید که کاربر با کلیک کردن روی لینک‌های مختلف بدون لود کردن و بارگذاری مجدد صفحه، بتواند به لینک موردنظر انتقال پیدا کند.

برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید:

تعریف مسیردهی (Routing) در انگولار​

برای تعریف مسیردهی در نرم‌افزار خود ابتدا وارد فایل app.module.ts شده و در ابتدای این صفحه یک ثابت به نام appRoutes ایجاد می‌کنیم تا تمام مسیردهی‌های نرم‌افزار خود را درون آن انجام دهیم. بنابراین داریم:

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'users', component: UsersComponent},
    {path: 'servers', component: ServersComponent},
];

همانطور که مشخص است در ثابت appRoutes که از نوع کلاس Route می‌باشد یک آرایه ایجاد (علت ایجاد آرایه برای دارا بودن چندین مسیر برای یک نرم‌افزار است) و سپس درون آن اشیاء جاوا اسکریپت را با علامت تولید کرده‌ایم. اگر توجه داشته باشید درون این دو کروشه یک کلمه تحت عنوان path و دیگری با نام component وجود دارد:

کلمه‌کلیدی path:​

این کلمه برای نشان دادن مسیر صفحه می‌باشد. به عنوان مثال users به مسیر http://localhost:4200/users اشاره می‌کند.

کلمه‌کلیدی component:​

از این کلمه برای تعریف کامپوننت مرتبط با مسیر استفاده می‌شود به عنوان مثال کامپوننت مرتبط با مسیر http://localhost:4200/users معادل UsersComponent است که لیست کاربران را نمایش می‌دهد.

بسیار عالی تا به اینجای کار مسیرها را تعریف کرده‌ایم ولی هنوز این مسیرها را به نرم‌افزار انگولاری معرفی نکرده‌ایم. برای معرفی کردن باید از کلاس RouterModule استفاده کرده و با متد forRoot مسیر موردنظر را مشابه ذیل به نرم‌افزار معرفی کنیم:

const appRoutes: Routes = [
    {path: '', component: HomeComponent},
    {path: 'users', component: UsersComponent},
    {path: 'servers', component: ServersComponent},
];

@NgModule({
    declarations: [
        AppComponent,
        HomeComponent,
        UsersComponent,
        ServersComponent,
        UserComponent,
        EditServerComponent,
        ServerComponent,
    ],
    imports: [BrowserModule, FormsModule, HttpModule, RouterModule.forRoot(appRoutes)],
    providers: [ServersService],
    bootstrap: [AppComponent],
})
export class AppModule {}

برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید:

Route Guard​

Route guard در Angular یک مکانیزم قدرتمند برای کنترل و مدیریت دسترسی به مسیرها (routes) در اپلیکیشن است. این قابلیت به توسعه‌دهندگان اجازه می‌دهد تا قبل از اینکه کاربر به یک مسیر خاص دسترسی پیدا کند یا از آن خارج شود، شرایط و منطق خاصی را اعمال کنند.

دلایل اصلی نیاز به Route guard عبارتند از:

امنیت و کنترل دسترسی:​

Route guard امکان محدود کردن دسترسی به صفحات خاص را بر اساس شرایط مختلف مانند وضعیت احراز هویت کاربر یا سطح دسترسی او فراهم می‌کند. به عنوان مثال، می‌توان از آن برای جلوگیری از دسترسی کاربران غیرمجاز به پنل مدیریت استفاده کرد.

حفاظت از داده‌های کاربر:​

با استفاده از CanDeactivate guard، می‌توان از خروج ناخواسته کاربر از یک فرم با تغییرات ذخیره نشده جلوگیری کرد. این قابلیت به بهبود تجربه کاربری و جلوگیری از از دست رفتن اطلاعات کمک می‌کند.

بهینه‌سازی عملکرد:​

CanLoad guard امکان کنترل بارگذاری ماژول‌های lazy-loaded را فراهم می‌کند. این قابلیت می‌تواند به بهبود عملکرد اپلیکیشن کمک کند، زیرا از بارگذاری غیرضروری ماژول‌ها جلوگیری می‌کند.

مدیریت جریان کار:​

Route guard می‌تواند برای اجرای منطق پیچیده قبل از ورود به یک مسیر خاص استفاده شود. به عنوان مثال، می‌توان از آن برای بررسی اعتبار داده‌ها یا انجام عملیات‌های خاص قبل از نمایش یک صفحه استفاده کرد.

انعطاف‌پذیری در طراحی:​

Route guard این امکان را فراهم می‌کند که منطق کنترل دسترسی را از کامپوننت‌ها جدا کنیم، که منجر به کد تمیزتر و قابل نگهداری‌تر می‌شود. در مجموع، Route guard در Angular ابزاری ضروری برای ایجاد اپلیکیشن‌های امن، کاربرپسند و با عملکرد بالا است که به توسعه‌دهندگان اجازه می‌دهد کنترل دقیقی بر روی جریان ناوبری و دسترسی به مسیرها داشته باشند.

برای آشنایی بیشتر با این مفهوم می‌توانید از لینک‌های زیر استفاده کنید:

تمرین​

  • تمرین اول: دو کامپوننت جدید به نام‌های AboutComponent و ContactComponent ایجاد کنید. مسیرهای /about و /contact را به آرایه appRoutes اضافه کنید و این مسیرها را به AboutComponent و ContactComponent متصل کنید. مسیرهای /about و /contact را در مرورگر تست کنید تا مطمئن شوید که کامپوننت‌های مربوطه به درستی نمایش داده می‌شوند.
  • تمرین دوم: استفاده از routerLink و routerLinkActive بروزرسانی منو: لینک‌های منوی نوبار را در فایل app.component.html به روز کنید تا از routerLink برای مسیردهی استفاده کنند. فعال‌سازی لینک‌ها: از دستور routerLinkActive استفاده کنید تا لینک‌های فعال با کلاس CSS مشخص شوند.