إعداد نظام المسارات وتكوينه في التطبيقات الحديثة باستخدام provideRouter

provide RouterStandalone Routingapp.config.tsApplication Routes

جدول مرجعي سريع

جانب المقارنة	طريقة التكوين التقليدية (`NgModule`)	طريقة التكوين الحديثة (`Standalone`)
مكان التسجيل والإعداد	داخل ملف `app.module.ts` باستخدام `RouterModule.forRoot(routes)`	داخل ملف `app.config.ts` باستخدام دالة `provideRouter(routes)`
مرونة الأداء ودعم الميزات	تتطلب إعدادات معقدة لتفعيل ميزات مثل التمرير السلس (`WithInMemoryScrolling`)	تتيح تمرير الميزات بسهولة فائقة عبر الدوال المساعدة مثل `withComponentInputBinding`

الشرح

في معمارية Angular 22.1 القائمة بالكامل على المكونات المستقلة (Standalone Components)، تم الاستغناء كلياً عن وحدات الـ NgModule ونظام RouterModule.forRoot التقليدي. يتم الآن تفعيل وتكوين نظام المسارات مباشرة داخل ملف التكوين المركزي (app.config.ts) باستخدام دالة المزود الحديثة provideRouter مع تمرير مصفوفة المسارات بمرونة تامة.

تفصيل فلسفة وعمل تكوين المسارات

الاستغناء عن الوحدات التقليدية:

يسمح النظام الحديث بتعريف المسارات بمعزل عن أي موديولات مركزية، مما يقلل من حجم الكود البنيوي ويسرع وقت الإقلاع الأولي للتطبيق.

دعم الميزات الإضافية المتقدمة:

تتيح دالة provideRouter دمج ميزات إضافية مثل استراتيجيات تتبع التمرير وميزات تحسين الأداء بسلاسة تامة عبر المعلمات التمريرية.

إعداد المسارات المركزية

تعريف مصفوفة المسارات في ملف app.routes.ts (app.routes.ts)

typescript

1	import { Routes } from '@angular/router';
2	import { HomeComponent } from './pages/home/home.component';
3	import { AboutComponent } from './pages/about/about.component';
4
5	export const routes: Routes = [
6	{ path: '', component: HomeComponent },
7	{ path: 'about', component: AboutComponent },
8	{ path: '**', redirectTo: '' } // التوجيه التلقائي عند عدم مطابقة المسار
9	];

تفعيل المسارات في ملف التكوين app.config.ts (app.config.ts)

typescript

1	import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2	import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
3	import { routes } from './app.routes';
4
5	export const appConfig: ApplicationConfig = {
6	providers: [
7	provideZoneChangeDetection({ eventCoalescing: true }),
8	// تفعيل نظام المسارات الحديث مع ربط المدخلات وتفعيل انتقالات العرض البصرية
9	provideRouter(
10	routes,
11	withComponentInputBinding(),
12	withViewTransitions()
13	)
14	]
15	};

نصائح احترافية

—استخدم دائماً ميزة withComponentInputBinding() عند تكوين المزود provideRouter!
—هذه الميزة تتيح لك استقبال معاملات المسار (Route Parameters) مباشرة كمتغيرات مدخلة (@Input) داخل المكونات دون الحاجة لحقن خدمة ActivatedRoute يدوياً.

الدرس السابق

التخزين المؤقت للطلبات وتحسين أداء جلب البيانات

الدرس التالي

إنشاء المسارات وربطها بالمكونات وعرضها باستخدام router-outlet

جانب المقارنة

طريقة التكوين التقليدية (`NgModule`)

طريقة التكوين الحديثة (`Standalone`)

مكان التسجيل والإعداد

داخل ملف `app.module.ts` باستخدام `RouterModule.forRoot(routes)`

داخل ملف `app.config.ts` باستخدام دالة `provideRouter(routes)`

مرونة الأداء ودعم الميزات

تتطلب إعدادات معقدة لتفعيل ميزات مثل التمرير السلس (`WithInMemoryScrolling`)

تتيح تمرير الميزات بسهولة فائقة عبر الدوال المساعدة مثل `withComponentInputBinding`

تفصيل فلسفة وعمل تكوين المسارات

الاستغناء عن الوحدات التقليدية:

دعم الميزات الإضافية المتقدمة:

إعداد المسارات المركزية

تعريف مصفوفة المسارات في ملف app.routes.ts (app.routes.ts)

typescript

1	import { Routes } from '@angular/router';
2	import { HomeComponent } from './pages/home/home.component';
3	import { AboutComponent } from './pages/about/about.component';
4
5	export const routes: Routes = [
6	{ path: '', component: HomeComponent },
7	{ path: 'about', component: AboutComponent },
8	{ path: '**', redirectTo: '' } // التوجيه التلقائي عند عدم مطابقة المسار
9	];

تفعيل المسارات في ملف التكوين app.config.ts (app.config.ts)

typescript

1	import { ApplicationConfig, provideZoneChangeDetection } from '@angular/core';
2	import { provideRouter, withComponentInputBinding, withViewTransitions } from '@angular/router';
3	import { routes } from './app.routes';
4
5	export const appConfig: ApplicationConfig = {
6	providers: [
7	provideZoneChangeDetection({ eventCoalescing: true }),
8	// تفعيل نظام المسارات الحديث مع ربط المدخلات وتفعيل انتقالات العرض البصرية
9	provideRouter(
10	routes,
11	withComponentInputBinding(),
12	withViewTransitions()
13	)
14	]
15	};