31. إعداد موجه Angular (Router)

يُعد التوجيه (Routing) ضرورياً لتطبيقات SPAs، حيث يسمح بالتنقل بين العروض المختلفة دون الحاجة إلى تحديث كامل للصفحة. يربط موجه Angular عناوين URL للمتصفح بحالات التطبيق ويعرض مشاهد المكونات.

إعداد الموجه (إذا لم يتم ذلك أثناء ng new)

عند استخدام ng new، يقوم CLI بإنشاء app-routing.module.ts ويستورد RouterModule.forRoot() في AppModule.

app-routing.module.ts:

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

// 1. تحديد مصفوفة Routes const routes: Routes = [ // Route configurations will go here ];

@NgModule({ imports: [RouterModule.forRoot(routes)], // تهيئة الموجه على مستوى الجذر exports: [RouterModule] }) export class AppRoutingModule { }

العنوان الأساسي ومنفذ الموجه (Router Outlet)

يحتاج Angular إلى مكان في ملف index.html الرئيسي لتحديد المسار الأساسي (إذا لم تستخدم المسار الافتراضي /). يتم تهيئة هذا عادة بواسطة نظام البناء، ولكنه يظهر على النحو التالي:

html

وسم <router-outlet>

هذا هو العنصر الأكثر أهمية. يخبر Angular بمكان عرض المكون المرتبط بمسار URL الحالي. يتم وضع هذا عادةً في app.component.html.

html