دليل كامل للتوجيه في Angular

إذا كنت لا تزال غير مألوف تمامًا لـ Angular 7 ، أود أن أقدم لك كل ما يقدمه إطار الواجهة الأمامية المثير للإعجاب. سأوجهك عبر تطبيق Angular التجريبي الذي يعرض مفاهيم مختلفة متعلقة بجهاز التوجيه ، مثل:

• منفذ جهاز التوجيه ،
• الطرق والمسارات ،
• التنقل.

سأوضح لك أيضًا كيفية استخدام Angular CLI v7 لإنشاء مشروع تجريبي حيث سنستخدم جهاز التوجيه Angular لتنفيذ التوجيه والملاحة. لكن أولاً ، اسمح لي بتقديم Angular إليك واستعرض بعض الميزات الجديدة المهمة في أحدث إصدار لها.

إدخال Angular 7

Angular هو أحد أكثر أطر العمل الأمامية شيوعًا لبناء تطبيقات الويب من جانب العميل لشبكة الويب على الأجهزة المحمولة وسطح المكتب. إنه يتبع بنية قائمة على المكونات حيث يكون كل مكون عبارة عن جزء من التعليمات البرمجية المعزولة والقابلة لإعادة الاستخدام والتي تتحكم في جزء من واجهة المستخدم للتطبيق.

المكون في Angular هو فئة @Component مزينة بمصممComponent decorator. يحتوي على نموذج مرفق وأوراق أنماط CSS التي تشكل عرض المكون.

Angular 7 ، أحدث إصدار من Angular تم إطلاقه مؤخرًا مع ميزات جديدة خاصة في أدوات CLI والأداء ، مثل:

• موجهات CLI: يمكن لأمر شائع مثل ng add و ng new أن يطالب المستخدم الآن باختيار الوظائف لإضافتها إلى مشروع مثل تنسيق التوجيه وأوراق الأنماط ، إلخ.
  
• جارٍ إضافة التمرير إلى Angular Material CDK (مكون DevKit).
• إضافة دعم السحب والإسقاط إلى Angular Material CDK.
• يتم أيضًا تعيين المشروعات افتراضيًا لاستخدام حزم الميزانية التي ستحذر المطورين عندما تتجاوز تطبيقاتهم حدود الحجم. بشكل افتراضي ، يتم طرح التحذيرات عندما يزيد الحجم عن 2 ميجا بايت والأخطاء عند 5 ميجا بايت. يمكنك أيضًا تغيير هذه الحدود في ملف angular.json الخاص بك. إلخ.
  

إدخال جهاز التوجيه الزاوي

Angular Router عبارة عن موجه JavaScript قوي تم إنشاؤه وصيانته بواسطة فريق Angular core ويمكن تثبيته من الحزمة @angular/router . يوفر مكتبة توجيه كاملة مع إمكانية الحصول على منافذ توجيه متعددة ، واستراتيجيات مختلفة لمطابقة المسار ، وسهولة الوصول إلى معلمات المسار وحراس المسار لحماية المكونات من الوصول غير المصرح به.

يعد جهاز التوجيه الزاوي جزءًا أساسيًا من النظام الأساسي الزاوي. تمكن المطورين من إنشاء تطبيقات صفحة واحدة ذات طرق عرض متعددة والسماح بالتنقل بين طرق العرض هذه.

دعنا الآن نرى مفاهيم جهاز التوجيه الأساسية بمزيد من التفاصيل.

جهاز التوجيه

Router-Outlet هو توجيه متاح من مكتبة جهاز التوجيه حيث يقوم جهاز التوجيه بإدراج المكون الذي يتم مطابقته بناءً على عنوان URL الخاص بالمستعرض الحالي. يمكنك إضافة منافذ متعددة في تطبيق Angular الخاص بك والذي يمكّنك من تنفيذ سيناريوهات توجيه متقدمة.

 <router-outlet></router-outlet>

أي مكون يطابقه جهاز التوجيه سوف يجعله شقيقًا لمنفذ جهاز التوجيه.

الطرق والمسارات

المسارات هي تعريفات (كائنات) تتكون من سمات مسار ومكون (أو مسار إعادة توجيه) على الأقل. يشير المسار إلى جزء من عنوان URL الذي يحدد طريقة عرض فريدة يجب عرضها ، ويشير المكون إلى المكون الزاوي الذي يحتاج إلى ربطه بمسار. استنادًا إلى تعريف المسار الذي نقدمه (عبر طريقة ثابتة RouterModule.forRoot(routes) ) ، يستطيع جهاز التوجيه توجيه المستخدم إلى طريقة عرض محددة.

يقوم كل Route بتعيين path URL إلى أحد المكونات.

يمكن أن يكون المسار فارغًا مما يشير إلى المسار الافتراضي للتطبيق وعادة ما يكون بداية التطبيق.

يمكن أن يأخذ المسار سلسلة أحرف بدل ( ** ). سيحدد جهاز التوجيه هذا المسار إذا كان عنوان URL المطلوب لا يتطابق مع أي مسارات للمسارات المحددة. يمكن استخدام هذا لعرض طريقة عرض "لم يتم العثور عليه" أو إعادة التوجيه إلى عرض معين إذا لم يتم العثور على تطابق.

هذا مثال على مسار:

 { path: 'contacts', component: ContactListComponent}

إذا تم توفير تعريف المسار هذا لتكوين جهاز التوجيه ، فسيقوم جهاز التوجيه ContactListComponent عندما يصبح عنوان URL الخاص بالمستعرض لتطبيق الويب /contacts .

استراتيجيات مطابقة الطريق

يوفر Angular Router استراتيجيات مختلفة لمطابقة المسار. تتمثل الإستراتيجية الافتراضية ببساطة في التحقق مما إذا كان عنوان URL الخاص بالمستعرض الحالي مسبوقًا بالمسار .

على سبيل المثال طريقنا السابق:

 { path: 'contacts', component: ContactListComponent}

يمكن كتابتها أيضًا على النحو التالي:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

تحدد السمة patchMath استراتيجية المطابقة. في هذه الحالة ، تكون البادئة هي البادئة الافتراضية.

استراتيجية المطابقة الثانية ممتلئة . عندما يتم تحديده لمسار ، سيتحقق جهاز التوجيه مما إذا كان المسار مساويًا تمامًا لمسار عنوان URL الخاص بالمستعرض الحالي:

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

طريق بارامز

يعد إنشاء المسارات باستخدام المعلمات ميزة شائعة في تطبيقات الويب. يسمح لك Angular Router بالوصول إلى المعلمات بطرق مختلفة:

• باستخدام خدمة ActivatedRoute ،
• استخدام ParamMap يمكن ملاحظته المتاحة بدءًا من الإصدار 4.

يمكنك إنشاء معلمة مسار باستخدام صيغة القولون . هذا مثال على مسار بمعامل معرف :

 { path: 'contacts/:id', component: ContactDetailComponent}

حراس الطريق

حارس المسار هو ميزة في Angular Router تسمح للمطورين بتشغيل بعض المنطق عند طلب مسار ، وبناءً على هذا المنطق ، فإنه يسمح أو يرفض وصول المستخدم إلى المسار. يتم استخدامه بشكل شائع للتحقق مما إذا كان المستخدم قد قام بتسجيل الدخول ولديه الإذن قبل أن يتمكن من الوصول إلى الصفحة.

يمكنك إضافة حارس طريق من خلال تنفيذ واجهة CanActivate المتاحة من الحزمة @angular/router وتوسيع طريقة canActivate() التي تحمل المنطق للسماح بالوصول إلى المسار أو رفضه. على سبيل المثال ، سيسمح الحارس التالي دائمًا بالوصول إلى المسار:

 class MyGuard implements CanActivate { canActivate() { return true; } }

يمكنك بعد ذلك حماية المسار باستخدام الحارس باستخدام السمة canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

توجيه الملاحة

يوفر جهاز التوجيه الزاوي التوجيه routerLink لإنشاء روابط تنقل. يأخذ هذا التوجيه المسار المرتبط بالمكون للانتقال إليه. علي سبيل المثال:

 <a [routerLink]="'/contacts'">Contacts</a>

منافذ متعددة ومسارات مساعدة

يدعم Angular Router منافذ متعددة في نفس التطبيق.

يحتوي المكون على مسار أساسي واحد مرتبط ويمكن أن يكون له مسارات مساعدة. تتيح المسارات الإضافية للمطورين التنقل في مسارات متعددة في نفس الوقت.

لإنشاء مسار إضافي ، ستحتاج إلى منفذ جهاز توجيه مسمى حيث سيتم عرض المكون المرتبط بالمسار الإضافي.

 <router-outlet></router-outlet> <router-outlet name="outlet1"></router-outlet>

• المنفذ بدون اسم هو المنفذ الأساسي.
• يجب أن يكون لجميع المنافذ اسم باستثناء المنفذ الأساسي.

يمكنك بعد ذلك تحديد المخرج حيث تريد عرض المكون الخاص بك باستخدام سمة outlet:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

إنشاء مشروع Angular 7 التجريبي

في هذا القسم ، سنرى مثالًا عمليًا لكيفية إعداد Angular Router والعمل معه. يمكنك مشاهدة العرض التوضيحي المباشر الذي سننشئه ومستودع GitHub للمشروع.

تثبيت Angular CLI v7

يتطلب Angular CLI العقدة 8.9+ ، مع NPM 5.5.1+ . تحتاج إلى التأكد من تثبيت هذه المتطلبات على نظامك ، ثم قم بتشغيل الأمر التالي لتثبيت أحدث إصدار من Angular CLI:

 $ npm install -g @angular/cli

سيؤدي ذلك إلى تثبيت Angular CLI عالميًا.

ملاحظة : قد ترغب في استخدام sudo لتثبيت الحزم بشكل عام ، اعتمادًا على تكوين npm الخاص بك.

إنشاء مشروع Angular 7

يعد إنشاء مشروع جديد أمرًا واحدًا ، ما عليك سوى تشغيل الأمر التالي:

 $ ng new angular7-router-demo

سيسألك CLI عما إذا كنت ترغب في إضافة التوجيه (اكتب N لـ No لأننا سنرى كيف يمكننا إضافة التوجيه يدويًا) وأي تنسيق ورقة الأنماط الذي ترغب في استخدامه ، اختر CSS ، الخيار الأول ثم اضغط على Enter . سيقوم CLI بإنشاء بنية مجلد بالملفات الضرورية وتثبيت التبعيات المطلوبة للمشروع.

إنشاء خدمة خلفية وهمية

نظرًا لأننا لا نملك واجهة خلفية حقيقية للتفاعل معها ، فسننشئ خلفية وهمية باستخدام مكتبة angular-in-memory-web-api وهي واجهة برمجة تطبيقات ويب في الذاكرة للعروض التوضيحية والاختبارات الزاويّة يحاكي عمليات CRUD عبر واجهة برمجة تطبيقات REST.

إنه يعمل عن طريق اعتراض طلبات HttpClient المرسلة إلى الخادم البعيد وإعادة توجيهها إلى مخزن بيانات محلي في الذاكرة نحتاج إلى إنشائه.

لإنشاء خلفية مزيفة ، نحتاج إلى اتباع الخطوات التالية:

1. أولاً ، نقوم بتثبيت وحدة angular-in-memory-web-api ،
2. بعد ذلك ، نقوم بإنشاء خدمة تعيد البيانات المزيفة ،
3. أخيرًا ، قم بتهيئة التطبيق لاستخدام الواجهة الخلفية المزيفة.

في الجهاز الطرفي ، قم بتشغيل الأمر التالي لتثبيت وحدة angular-in-memory-web-api من npm:

 $ npm install --save angular-in-memory-web-api

بعد ذلك ، أنشئ خدمة خلفية باستخدام:

 $ ng gs backend

افتح ملف src/app/backend.service.ts InMemoryDbService من وحدة واجهة برمجة تطبيقات الويب angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

تحتاج فئة الخدمة إلى تنفيذ InMemoryDbService ثم تجاوز طريقة createDb() :

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

نقوم ببساطة بإنشاء مجموعة من جهات الاتصال وإعادتها. يجب أن يكون لكل جهة اتصال معرف.

أخيرًا ، نحتاج ببساطة إلى استيراد InMemoryWebApiModule إلى ملف app.module.ts ، وتقديم خدمة النهاية الخلفية المزيفة.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

بعد ذلك ، أنشئ خدمة ContactService التي تغلف الرمز للعمل مع جهات الاتصال:

 $ ng gs contact

افتح ملف src/app/contact.service.ts وقم بتحديثه ليبدو مشابهًا للرمز التالي:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

أضفنا طريقتين:

• getContacts()
  للحصول على جميع الاتصالات.
• getContact()
  للحصول على جهة اتصال عن طريق معرف.

يمكنك تعيين API_URL لأي عنوان URL لأننا لن نستخدم خلفية حقيقية. سيتم اعتراض جميع الطلبات وإرسالها إلى النهاية الخلفية للذاكرة.

إنشاء مكوناتنا الزاويّة

قبل أن نتمكن من معرفة كيفية استخدام ميزات جهاز التوجيه المختلفة ، فلنقم أولاً بإنشاء مجموعة من المكونات في مشروعنا.

توجه إلى جهازك وقم بتشغيل الأوامر التالية:

 $ ng gc contact-list $ ng gc contact-detail

سيؤدي هذا إلى إنشاء مكونين ContactListComponent و ContactDetailComponent وإضافتهما إلى وحدة التطبيق الرئيسية.

إعداد التوجيه

في معظم الحالات ، ستستخدم Angular CLI لإنشاء مشاريع مع إعداد التوجيه ولكن في هذه الحالة ، سنضيفها يدويًا حتى نتمكن من الحصول على فكرة أفضل عن كيفية عمل التوجيه في Angular.

إضافة وحدة التوجيه

نحتاج إلى إضافة AppRoutingModule الذي سيحتوي على مسارات التطبيق الخاصة بنا ومنفذ جهاز التوجيه حيث سيقوم Angular بإدراج المكون المطابق حاليًا اعتمادًا على عنوان URL الحالي للمتصفح.

سوف نرى:

• كيفية إنشاء Angular Module لتوجيهه واستيراده ؛
• كيفية إضافة مسارات إلى مكونات مختلفة ؛
• كيفية إضافة منفذ جهاز التوجيه.

أولاً ، لنبدأ بإنشاء وحدة توجيه في ملف app-routing.module.ts . داخل src/app ، قم بإنشاء الملف باستخدام:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

افتح الملف وأضف الكود التالي:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

نبدأ باستيراد NgModule من الحزمة @angular/core وهي أداة تزيين TypeScript تُستخدم لإنشاء وحدة Angular.

نقوم أيضًا باستيراد فئات RouterModule و Routes من الحزمة @angular/router . يوفر RouterModule طرقًا ثابتة مثل RouterModule.forRoot() لتمرير كائن التكوين إلى جهاز التوجيه.

بعد ذلك ، نحدد مجموعة routes ثابتة من نوع Routes التي سيتم استخدامها للاحتفاظ بالمعلومات لكل مسار.

أخيرًا ، نقوم بإنشاء وتصدير وحدة تسمى AppRoutingModule (يمكنك تسميتها ما تريد) وهي ببساطة فئة TypeScript مزينة @NgModule الذي يأخذ بعض كائن المعلومات الوصفية. في سمة imports لهذا الكائن ، نسمي الطريقة الثابتة RouterModule.forRoot(routes) مع مصفوفة المسارات كمعامل. في مجموعة exports نضيف RouterModule .

استيراد وحدة التوجيه

بعد ذلك ، نحتاج إلى استيراد توجيه هذه الوحدة إلى وحدة التطبيق الرئيسية الموجودة في ملف src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

نقوم باستيراد AppRoutingModule من ./app-routing.module في مصفوفة imports للوحدة الرئيسية.

إضافة منفذ جهاز التوجيه

أخيرًا ، نحتاج إلى إضافة منفذ جهاز التوجيه. افتح ملف src/app/app.component.html الذي يحتوي على قالب التطبيق الرئيسي وأضف مكون <router-outlet> :

 <router-outlet></router-outlet>

هذا هو المكان الذي سيعرض فيه Angular Router المكون الذي يتوافق مع مسار المستعرض الحالي.

هذه هي كل الخطوات التي نحتاج إلى اتباعها لإعداد التوجيه يدويًا داخل مشروع Angular.

خلق الطرق

الآن ، دعنا نضيف المسارات إلى المكونين. افتح ملف src/app/app-routing.module.ts وأضف المسارات التالية إلى مصفوفة routes :

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

تأكد من استيراد المكونين في وحدة التوجيه:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

يمكننا الآن الوصول إلى المكونين من مسارات /contacts الاتصال و contact/:id .

إضافة روابط التنقل

بعد ذلك ، دعنا نضيف روابط تنقل إلى قالب التطبيق الخاص بنا باستخدام التوجيه routerLink . افتح src/app/app.component.html وأضف الكود التالي أعلى منفذ جهاز التوجيه:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

بعد ذلك ، نحتاج إلى عرض قائمة جهات الاتصال في ContactListComponent . افتح src/app/contact-list.component.ts ثم أضف الكود التالي:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

نقوم بإنشاء مجموعة contacts لعقد جهات الاتصال. بعد ذلك ، نقوم بحقن ContactService واستدعينا طريقة getContacts() للمثيل (في حدث دورة حياة ngOnInit ) للحصول على جهات الاتصال وتعيينها إلى مجموعة contacts .

افتح بعد ذلك ملف src/app/contact-list/contact-list.component.html وأضف:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

نحن نمر عبر جهات الاتصال ونعرض اسم كل جهة اتصال والبريد الإلكتروني. نقوم أيضًا بإنشاء ارتباط لمكون تفاصيل كل جهة اتصال باستخدام التوجيه routerLink .

هذه لقطة شاشة للمكون:

عندما نضغط على رابط Go to details ، سوف يأخذنا إلى ContactDetailsComponent . المسار يحتوي على id ، دعنا نرى كيف يمكننا الوصول إليه من المكون الخاص بنا.

افتح ملف src/app/contact-detail/contact-detail.component.ts وقم بتغيير الرمز ليبدو مشابهًا للرمز التالي:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

نقوم بحقن ContactService و ActivatedRoute في المكون. في حدث دورة حياة ngOnInit() ، نسترجع معلمة المعرف التي سيتم تمريرها من المسار ونستخدمها للحصول على تفاصيل جهة الاتصال التي نقوم بتعيينها لكائن contact .

افتح ملف src/app/contact-detail/contact-detail.component.html وأضف:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

عندما نزور تطبيقنا لأول مرة من 127.0.0.1:4200/ ، لا يعرض المنفذ أي مكون ، لذا دعنا نعيد توجيه المسار الفارغ إلى مسار contacts عن طريق إضافة المسار التالي إلى مصفوفة المسارات:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

نريد مطابقة المسار الفارغ تمامًا ، ولهذا السبب نحدد استراتيجية المطابقة الكاملة .

خاتمة

في هذا البرنامج التعليمي ، رأينا كيفية استخدام Angular Router لإضافة التوجيه والتنقل في تطبيقنا. لقد رأينا مفاهيم مختلفة مثل منفذ جهاز التوجيه والطرق والمسارات وقمنا بإنشاء عرض توضيحي لإظهار المفاهيم المختلفة عمليًا. يمكنك الوصول إلى الرمز من هذا المستودع.