التنقل في صفحات Angular
التنقل في صفحات Angular باستخدام ملف app-routing.module.ts
ما هو ملف app-routing.module.ts؟
هو ملف مسؤول عن تكوين التوجيه (Routing) في تطبيق Angular، ويُستخدم لتعريف المسارات (Routes) التي تنقل المستخدم بين الصفحات أو المكونات داخل التطبيق بدون إعادة تحميل الصفحة (Single Page Application - SPA).
الهيكل الأساسي لملف app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { NotFoundComponent } from
'./not-found/not-found.component';
const routes: Routes = [
{ path: '',
component: HomeComponent },
{ path: 'about',
component: AboutComponent },
{ path: '**',
component: NotFoundComponent }, // صفحة الخطأ 404
];
@NgModule({
imports:
[RouterModule.forRoot(routes)],
exports:
[RouterModule]
})
export class AppRoutingModule { }
مكونات التوجيه الأساسية
- Routes Array: مصفوفة من الكائنات، يمثل كل كائن مسارًا معينًا يحتوي على:
- path: المسار في رابط الصفحة.
- component: المكون الذي يُعرض عند الوصول إلى هذا المسار.
- redirectTo: لإعادة التوجيه.
- pathMatch: لتحديد نوع المطابقة.
- RouterModule.forRoot(): لتسجيل التوجيه الرئيسي في التطبيق الجذري.
التنقل بين الصفحات
1. باستخدام روابط HTML:
<a routerLink="/about">من نحن</a>
2. برمجيًا باستخدام Router:
import { Router } from '@angular/router';
constructor(private router: Router) {}
goToAbout() {
this.router.navigate(['/about']);
}
تنظيم التوجيه في تطبيقات كبيرة
const routes: Routes = [
{ path: '',
loadChildren: () => import('./home/home.module').then(m => m.HomeModule)
},
{ path: 'admin',
loadChildren: () => import('./admin/admin.module').then(m =>
m.AdminModule) }
];
الحماية والتحكم في الوصول
(Route Guards)
import { AuthGuard } from './guards/auth.guard';
const routes: Routes = [
{ path: 'dashboard',
component: DashboardComponent, canActivate: [AuthGuard] }
];
ملخص
- ملف app-routing.module.ts
هو نقطة الدخول المركزية لتحديد التنقل بين صفحات Angular.
- يُستخدم لتحديد المسارات، إدارة الحماية، تفعيل lazy loading، ومعالجة الصفحات غير الموجودة.
- التوجيه يُدمج في القالب باستخدام
<router-outlet></router-outlet>.
تعليقات
إرسال تعليق