دستیابی به Clean Routing در Angular 17: نکات و تکنیک‌های Refactoring

Summarize this content to 400 words in Persian Lang

آشنایی با Angular 17 Router Refactoring: راهنمای گام به گام

Angular 17 تغییرات هیجان انگیزی را در روتر ایجاد کرده است که به توسعه دهندگان انعطاف پذیری و کنترل بیشتری بر روی ناوبری برنامه خود ارائه می دهد. در این مقاله، ما عمیقاً به آخرین بازسازی روتر در Angular 17 می پردازیم و نمونه های گام به گام را بررسی می کنیم تا به شما در پیاده سازی این ویژگی های جدید در پروژه های خود کمک کنید.

مقدمه

روتر Angular جزء حیاتی هر برنامه Angular است که وظیفه مدیریت ناوبری و مدیریت وضعیت برنامه را بر عهده دارد. با انتشار Angular 17، روتر تحت یک فرآیند بازسازی قابل توجهی قرار گرفت و چندین ویژگی و بهبود جدید را معرفی کرد.

در این راهنمای جامع، موضوعات زیر را پوشش خواهیم داد:

درک هدف بازسازی روتر در Angular 17
کاوش در API و پیکربندی روتر جدید
پیاده سازی Lazy Loading با روتر جدید
مدیریت مسیرهای تودرتو و اجزای کودک
بهینه سازی عملکرد با استراتژی های پیش بارگذاری
یکپارچه سازی روتر با سیستم تزریق وابستگی Angular
عیب یابی مشکلات رایج مرتبط با روتر
بهترین روش‌ها و توصیه‌ها برای بازسازی روتر

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

درک هدف بازسازی روتر در Angular 17

بازسازی روتر در Angular 17 به دلیل نیاز به رفع چندین نقطه درد و محدودیت در نسخه های قبلی روتر انجام شد. اهداف اولیه این بازسازی عبارتند از:

انعطاف پذیری و پیکربندی بهبود یافته: API روتر جدید کنترل بیشتری بر پیکربندی مسیریابی به توسعه دهندگان می دهد و آنها را قادر می سازد تا رفتار و عملکرد را مطابق با نیازهای برنامه خود سفارشی کنند.
عملکرد و مقیاس پذیری پیشرفته: روتر بازسازی‌شده چندین بهینه‌سازی عملکرد، مانند استراتژی‌های بارگذاری تنبل و بارگذاری پیش‌بارگذاری بهبودیافته را شامل می‌شود تا از سرعت و کارآمدی ناوبری برنامه‌تان مطمئن شود.
ادغام بهتر با سیستم تزریق وابستگی Angular: روتر جدید برای کار یکپارچه با سیستم DI Angular طراحی شده است و مدیریت وابستگی ها و بهبود تست پذیری برنامه شما را آسان تر می کند.
پیکربندی و نگهداری ساده شده: سینتکس پیکربندی روتر و API به روز شده تجربه بصری و سازگارتر را برای توسعه دهندگان فراهم می کند و پیچیدگی راه اندازی و حفظ ناوبری برنامه را کاهش می دهد.

کاوش در API و پیکربندی روتر جدید

در Angular 17، API روتر به طور قابل توجهی به روز شده است تا یک سیستم مسیریابی انعطاف پذیرتر و قدرتمندتر را ارائه دهد. بیایید با بررسی تغییرات کلیدی در پیکربندی روتر شروع کنیم:

import { RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{
path: ‘home’,
component: HomeComponent,
children: [
{
path: ‘dashboard’,
component: DashboardComponent,
},
],
},
{
path: ‘about’,
component: AboutComponent,
data: {
title: ‘About Page’,
},
},
{
path: ‘contact’,
loadChildren: () => import(‘./contact/contact.module’).then((m) => m.ContactModule),
},
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule],
})
export class AppRoutingModule {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، چندین مسیر از جمله مسیر تودرتو، مسیر با داده های اضافی و مسیر با بار تنبل تعریف کرده ایم. بیایید هر یک از این تنظیمات را تجزیه کنیم:

مسیرهای تو در تو: home مسیر یک مسیر فرزند دارد dashboard، که به معنی DashboardComponent در داخل ارائه خواهد شد HomeComponent.

داده های مسیر: about مسیر دارای یک data ویژگی، که به شما امکان می دهد ابرداده های اضافی مانند عنوان صفحه را به مسیر پیوست کنید.

بارگذاری تنبل: contact مسیر برای استفاده از بارگذاری تنبل پیکربندی شده است، که به این معنی است ContactModule تنها زمانی بارگذاری می شود که کاربر به آن مسیر حرکت کند و زمان بارگذاری اولیه برنامه شما را بهبود بخشد.

API روتر جدید چندین ویژگی دیگر مانند پشتیبانی بهتر از مسیرهای پویا، بهبود مدیریت خطا و گزینه های ناوبری پیشرفته تر را نیز معرفی می کند. ما این موارد را با جزئیات بیشتر در طول مقاله بررسی خواهیم کرد.

پیاده سازی Lazy Loading با روتر جدید

یکی از مهم‌ترین پیشرفت‌ها در روتر Angular 17، پشتیبانی بیشتر از بارگذاری تنبل است. بارگذاری تنبل تکنیکی است که به شما امکان می دهد بخش هایی از برنامه خود را بر اساس درخواست بارگیری کنید، نه اینکه همه چیز را با هم در یک فایل بزرگ و واحد جمع کنید. این می تواند زمان بارگذاری اولیه برنامه شما را تا حد زیادی بهبود بخشد و تجربه کاربری بهتری را ارائه دهد.

در اینجا مثالی از نحوه اجرای بارگذاری تنبل با روتر جدید آورده شده است:

const routes: Routes = [
{
path: ‘dashboard’,
loadChildren: () => import(‘./dashboard/dashboard.module’).then((m) => m.DashboardModule),
},
{
path: ‘settings’,
loadChildren: () => import(‘./settings/settings.module’).then((m) => m.SettingsModule),
},
];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما دو مسیر را تعریف کرده ایم، dashboard و settings، که برای استفاده از بارگذاری تنبل پیکربندی شده اند. هنگامی که کاربر به هر یک از این مسیرها حرکت می کند، ماژول مربوطه (DashboardModule یا SettingsModule) به صورت پویا بارگذاری می شود و بار اولیه برنامه شما را کاهش می دهد.

روتر جدید همچنین پشتیبانی بهتری از استراتژی های پیش بارگذاری ارائه می دهد، که به شما امکان می دهد ماژول های خاصی را در پس زمینه بارگذاری کنید، در حالی که کاربر در حال تعامل با برنامه شما است. این می تواند تجربه کاربر را بیشتر بهینه کند و زمان بارگذاری درک شده را کاهش دهد.

مدیریت مسیرهای تودرتو و اجزای کودک

مسیرهای تودرتو یک نیاز رایج در بسیاری از برنامه های Angular هستند، زیرا به شما امکان می دهند یک ساختار ناوبری سلسله مراتبی ایجاد کنید. روتر جدید در Angular 17 مدیریت مسیرهای تودرتو و اجزای فرزند را آسان تر می کند.

در اینجا مثالی از نحوه پیکربندی مسیرهای تودرتو آورده شده است:

const routes: Routes = [
{
path: ‘account’,
component: AccountComponent,
children: [
{
path: ‘profile’,
component: ProfileComponent,
},
{
path: ‘settings’,
component: SettingsComponent,
},
],
},
];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، account مسیر دارای دو مسیر فرزند است: profile و settings. هنگامی که کاربر به سمت account/profile یا account/settings مسیرها، اجزای فرزند مربوطه (ProfileComponent یا SettingsComponent) در داخل ارائه خواهد شد AccountComponent.

روتر جدید همچنین پشتیبانی بهتری را برای مدیریت انتقال بین مسیرهای والد و فرزند ارائه می‌کند و تجربه کاربری روان و ثابتی را تضمین می‌کند.

بهینه سازی عملکرد با استراتژی های پیش بارگذاری

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

روتر جدید در Angular 17 چندین استراتژی پیش بارگذاری را ارائه می دهد:

بدون پیش بارگیری: این استراتژی پیش فرض است، به این معنی که هیچ پیش بارگیری انجام نمی شود.

PreloadAllModules: این استراتژی همه ماژول های بارگذاری شده تنبل را به محض راه اندازی برنامه از قبل بارگیری می کند.

CustomPreloading Strategy: این به شما امکان می دهد یک استراتژی پیش بارگذاری سفارشی بر اساس نیازهای خاص برنامه خود ایجاد کنید.

در اینجا مثالی از نحوه پیکربندی استراتژی پیش بارگذاری سفارشی آورده شده است:

import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

const routes: Routes = [
{
path: ‘dashboard’,
loadChildren: () => import(‘./dashboard/dashboard.module’).then((m) => m.DashboardModule),
data: {
preload: true,
},
},
{
path: ‘settings’,
loadChildren: () => import(‘./settings/settings.module’).then((m) => m.SettingsModule),
data: {
preload: false,
},
},
];

@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: CustomPreloadingStrategy,
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما یک استراتژی پیش‌بارگیری سفارشی تعریف کرده‌ایم که پیش‌بارگیری را انجام می‌دهد DashboardModule اما نه SettingsModule. با پیوست کردن preload ویژگی داده به مسیرها، ما می توانیم کنترل کنیم که کدام ماژول ها باید از قبل بارگذاری شوند.

یکپارچه سازی روتر با سیستم تزریق وابستگی Angular

روتر جدید در Angular 17 برای کار یکپارچه با سیستم تزریق وابستگی Angular (DI) طراحی شده است. این ادغام به شما امکان می دهد وابستگی ها را بهتر مدیریت کنید و آزمایش پذیری برنامه خود را بهبود بخشید.

در اینجا مثالی از نحوه استفاده از سیستم DI برای ارائه خدمات سفارشی به اجزای روتر خود آورده شده است:

import { Injectable } from ‘@angular/core’;
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from ‘@angular/router’;
import { Observable } from ‘rxjs’;
import { AuthService } from ‘./auth.service’;

@Injectable({
providedIn: ‘root’,
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

canActivate(
route: ActivatedRouteSnapshot,
state: RouterStateSnapshot
): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
if (this.authService.isLoggedIn()) {
return true;
} else {
return this.router.createUrlTree([‘/login’]);
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در این مثال، ما یک را ایجاد کرده ایم AuthGuard که از AuthService برای بررسی اینکه آیا کاربر وارد شده است یا خیر. اگر کاربر وارد نشده باشد، نگهبان آنها را به صفحه ورود هدایت می کند. با استفاده از سیستم DI Angular به راحتی می توانیم تزریق کنیم AuthService به AuthGuard، تست و نگهداری کد را آسان تر می کند.

روتر جدید همچنین پشتیبانی بهتری را برای رسیدگی به موارد لبه و خطاها، مانند رسیدگی به خطاهای 404 یا هدایت کاربر به مسیری دیگر در صورت برآورده شدن یک شرایط خاص، ارائه می‌کند.

عیب یابی مشکلات رایج مرتبط با روتر

در حالی که روتر جدید در Angular 17 نسبت به نسخه های قبلی پیشرفت قابل توجهی داشته است، هنوز ممکن است در طول توسعه با برخی مشکلات رایج روبرو شوید. در اینجا چند نکته عیب یابی وجود دارد:

مسائل ناوبری: اگر برنامه شما به درستی پیمایش نمی کند، پیکربندی مسیر خود را بررسی کنید، مطمئن شوید که component یا loadChildren ویژگی ها به درستی مشخص شده اند و بررسی کنید که پارامترهای مسیر شما به درستی مدیریت می شوند.
مشکلات عملکرد: اگر برنامه شما ضعیف عمل می کند، استراتژی های پیش بارگذاری خود را بررسی کنید، اطمینان حاصل کنید که از بارگذاری تنبل به طور موثر استفاده می کنید، و برای شناسایی هر گونه تنگنا، برنامه خود را نمایه کنید.
خطاهای تزریق وابستگی: اگر با سیستم DI با مشکل مواجه شدید، مطمئن شوید که خدمات شما به درستی ثبت شده است و از نحو صحیح تزریق استفاده می کنید.
رسیدگی به خطا: اگر با خطاهای غیرمنتظره یا موارد لبه مواجه می‌شوید، مکانیسم‌های رسیدگی به خطای روتر را بررسی کنید و مطمئن شوید که رفتارهای بازگشتی مناسبی دارید.

با درک ویژگی‌های جدید روتر و بهترین شیوه‌ها، و پرداختن به مسائل رایج به طور فعال، می‌توانید از یکپارچگی روان و موفق روتر Angular 17 در برنامه خود اطمینان حاصل کنید.

بهترین روش‌ها و توصیه‌ها برای بازسازی روتر

همانطور که روی بازسازی روتر برنامه خود کار می کنید تا از ویژگی های جدید Angular 17 بهره مند شوید، در اینجا برخی از بهترین روش ها و توصیه هایی وجود دارد که باید به خاطر داشته باشید:

با یک طرح شروع کنید: قبل از وارد شدن به فرآیند بازسازی، زمانی را برای درک نیازهای ناوبری برنامه خود اختصاص دهید و تغییرات لازم را برنامه ریزی کنید. این به شما کمک می کند تا تصمیمات آگاهانه بگیرید و از مشکلات احتمالی جلوگیری کنید.
از بارگذاری تنبل استفاده کنید: برای بهبود زمان بارگذاری اولیه برنامه خود و ارائه تجربه کاربری بهتر، بارگذاری تنبل را تا جایی که ممکن است اجرا کنید.
بهینه سازی استراتژی های پیش بارگذاری: نیازهای پیش بارگذاری برنامه خود را به دقت در نظر بگیرید و استراتژی پیش بارگیری مناسب را برای ایجاد تعادل مناسب بین عملکرد و زمان بارگذاری اولیه پیکربندی کنید.
سیستم DI را در آغوش بگیرید: روتر را با سیستم DI Angular یکپارچه کنید تا وابستگی ها را مدیریت کنید، تست پذیری را بهبود ببخشید و معماری برنامه خود را ساده کنید.
سند و تست: پیکربندی و پیاده سازی روتر خود را به طور کامل مستند کنید و تست های جامع بنویسید تا از پایداری و قابلیت اطمینان ناوبری برنامه خود اطمینان حاصل کنید.
به روز باشید: برای آگاهی از آخرین به‌روزرسانی‌های روتر و بهترین شیوه‌ها، به اسناد Angular و منابع جامعه توجه داشته باشید.

با پیروی از این بهترین شیوه‌ها و توصیه‌ها، می‌توانید به طور موثر روتر برنامه Angular 17 خود را بازسازی کنید و به کاربران خود یک تجربه ناوبری یکپارچه و کارآمد را تقویت کنید.

نتیجه گیری

روتر refactoring در Angular 17 طیف وسیعی از ویژگی ها و پیشرفت های قدرتمند را معرفی کرده است که می تواند به شما در ساخت برنامه های کاربردی انعطاف پذیرتر، مقیاس پذیرتر و کارآمدتر کمک کند. با درک API روتر جدید، استفاده از استراتژی های بارگذاری تنبل و بارگذاری اولیه، و ادغام روتر با سیستم DI Angular، می توانید ناوبری برنامه خود را به ارتفاعات جدیدی ببرید.

به یاد داشته باشید، کلید بازسازی موفقیت آمیز روتر، برنامه ریزی، مستندسازی و آزمایش کامل است. با پیروی از دستورالعمل ها و مثال های ارائه شده در این مقاله، به خوبی در مسیریاب Angular 17 تسلط خواهید داشت و تجربه کاربری استثنایی را ارائه می دهید.

سوالات متداول

س: مزایای اصلی بازسازی روتر در Angular 17 چیست؟

پاسخ: مزایای اصلی بازسازی روتر در Angular 17 عبارتند از:

انعطاف پذیری و پیکربندی روتر بهبود یافته است
بهبود عملکرد و مقیاس پذیری از طریق بارگذاری و بارگذاری اولیه تنبل بهتر
ادغام یکپارچه با سیستم تزریق وابستگی Angular
پیکربندی ساده و نگهداری ناوبری برنامه

س: چگونه می توانم بارگذاری تنبل را با روتر جدید در Angular 17 پیاده سازی کنم؟

پاسخ: برای اجرای بارگذاری تنبل با روتر جدید در Angular 17، می توانید از آن استفاده کنید loadChildren ویژگی در پیکربندی مسیر شما به عنوان مثال:

const routes: Routes = [
{
path: ‘dashboard’,
loadChildren: () => import(‘./dashboard/dashboard.module’).then((m) => m.DashboardModule),
},
];

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

این فقط بارگذاری می شود DashboardModule هنگامی که کاربر به dashboard مسیر

س: آیا می توانم استراتژی پیش بارگذاری را در Angular 17 سفارشی کنم؟

پاسخ: بله، می‌توانید استراتژی پیش‌بارگذاری را در Angular 17 با ایجاد یک استراتژی پیش‌بارگیری سفارشی سفارشی کنید. شما می توانید این کار را با پیاده سازی انجام دهید PreloadingStrategy رابط و سپس آن را در ماژول روتر خود پیکربندی کنید. به عنوان مثال:

import { PreloadAllModules, RouterModule, Routes } from ‘@angular/router’;

@NgModule({
imports: [
RouterModule.forRoot(routes, {
preloadingStrategy: CustomPreloadingStrategy,
}),
],
exports: [RouterModule],
})
export class AppRoutingModule {}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

س: چگونه می توانم روتر را با سیستم تزریق وابستگی Angular یکپارچه کنم؟

پاسخ: با استفاده از سرویس ها و محافظ ها می توانید روتر را با سیستم تزریق وابستگی Angular یکپارچه کنید. به عنوان مثال، می توانید یک محافظ سفارشی ایجاد کنید که از یک سرویس برای بررسی اینکه آیا یک کاربر قبل از اجازه دسترسی به یک مسیر، احراز هویت شده است استفاده می کند. در اینجا یک مثال است:

import { Injectable } from ‘@angular/core’;
import { CanActivate, Router } from ‘@angular/router’;
import { AuthService } from ‘./auth.service’;

@Injectable({
providedIn: ‘root’,
})
export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, private router: Router) {}

canActivate() {
if (this.authService.isLoggedIn()) {
return true;
} else {
this.router.navigate([‘/login’]);
return false;
}
}
}

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

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

const routes: Routes = [
  {
    path: 'home',
    component: HomeComponent,
    children: [
      {
        path: 'dashboard',
        component: DashboardComponent,
      },
    ],
  },
  {
    path: 'about',
    component: AboutComponent,
    data: {
      title: 'About Page',
    },
  },
  {
    path: 'contact',
    loadChildren: () => import('./contact/contact.module').then((m) => m.ContactModule),
  },
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule],
})
export class AppRoutingModule {}

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then((m) => m.SettingsModule),
  },
];

const routes: Routes = [
  {
    path: 'account',
    component: AccountComponent,
    children: [
      {
        path: 'profile',
        component: ProfileComponent,
      },
      {
        path: 'settings',
        component: SettingsComponent,
      },
    ],
  },
];

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'dashboard',
    loadChildren: () => import('./dashboard/dashboard.module').then((m) => m.DashboardModule),
    data: {
      preload: true,
    },
  },
  {
    path: 'settings',
    loadChildren: () => import('./settings/settings.module').then((m) => m.SettingsModule),
    data: {
      preload: false,
    },
  },
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: CustomPreloadingStrategy,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot
  ): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      return this.router.createUrlTree(['/login']);
    }
  }
}

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

import { PreloadAllModules, RouterModule, Routes } from '@angular/router';

@NgModule({
  imports: [
    RouterModule.forRoot(routes, {
      preloadingStrategy: CustomPreloadingStrategy,
    }),
  ],
  exports: [RouterModule],
})
export class AppRoutingModule {}

import { Injectable } from '@angular/core';
import { CanActivate, Router } from '@angular/router';
import { AuthService } from './auth.service';

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {
  constructor(private authService: AuthService, private router: Router) {}

  canActivate() {
    if (this.authService.isLoggedIn()) {
      return true;
    } else {
      this.router.navigate(['/login']);
      return false;
    }
  }
}