1
00:00:00,000 --> 00:00:04,974
[MUSIC]

2
00:00:04,974 --> 00:00:08,004
دعونا نبدأ الآن الحديث عن التوجيه الزاوي.

3
00:00:08,004 --> 00:00:11,348
هل هو التوجيه أم أنه تأصيل؟

4
00:00:11,348 --> 00:00:13,806
أنا ذاهب إلى أن تأصيل للتوجيه.

5
00:00:13,806 --> 00:00:18,397
لذلك من الآن فصاعدا، سوف نطق كل هذه كما التوجيه،

6
00:00:18,397 --> 00:00:21,400
والطرق، وجهاز التوجيه وهلم جرا.

7
00:00:21,400 --> 00:00:25,630
إذا حدث أنك من منطقة تنطقها باللغة الإنجليزية كطريق أو

8
00:00:25,630 --> 00:00:27,060
جهاز توجيه، يرجى تحمل معي.

9
00:00:28,200 --> 00:00:33,610
لذا، ما هو بالضبط التوجيه الزاوي وكيف يساعدنا؟

10
00:00:33,610 --> 00:00:37,290
من حيث التطبيق الزاوي الذي رأيناه حتى

11
00:00:37,290 --> 00:00:41,310
الآن، لم نر أبدا استخدام للتوجيه.

12
00:00:41,310 --> 00:00:44,913
لقد رأينا أنه يمكننا تطوير تطبيق زاوي مع

13
00:00:44,913 --> 00:00:49,235
مكونات متعددة ومن ثم الاستفادة منها داخل الآخر،

14
00:00:49,235 --> 00:00:53,794
وتطوير تطبيق Angular كامل دون حتى الحديث عن التوجيه.

15
00:00:53,794 --> 00:00:58,116
الآن افترض أن لديك مكونات متعددة

16
00:00:58,116 --> 00:01:03,233
وتريد أن تكون قادرًا على التنقل بين المكونات

17
00:01:03,233 --> 00:01:08,350
بطريقة يمكن أن تتسبب في هذا التنقل من خلال، على سبيل

18
00:01:08,350 --> 00:01:13,352
المثال، النقر على الروابط أو الأزرار في واجهة المستخدم الخاصة بك

19
00:01:13,352 --> 00:01:19,720
وتكون قادرًا على عرض طرق عرض مختلفة في شاشة التطبيق الخاص بك،

20
00:01:19,720 --> 00:01:23,959
ثم التوجيه الزاوي يأتي لانقاذك.

21
00:01:23,959 --> 00:01:28,633
سنرى كيف يمكننا استخدام التوجيه لتطوير شيء يسمى

22
00:01:28,633 --> 00:01:30,120
تطبيقات صفحة واحدة.

23
00:01:30,120 --> 00:01:34,390
سنتحدث عن تطبيقات صفحة واحدة في الدرس التالي.

24
00:01:34,390 --> 00:01:38,540
ولكن في الوقت الحالي، دعونا نركز على التوجيه الزاوي

25
00:01:38,540 --> 00:01:42,350
وتحديدًا الطريق وحدة نمطية متوفرة في Angular.

26
00:01:43,610 --> 00:01:48,150
وحدة جهاز التوجيه نفسها منفصلة عن وحدة Angular الأساسية، لذلك

27
00:01:48,150 --> 00:01:53,220
فهي متوفرة كوحدة منفصلة وستحتاج إلى استيرادها بشكل صريح

28
00:01:53,220 --> 00:01:59,170
إلى تطبيق Angular الخاص بك من أجل الاستفادة من

29
00:01:59,170 --> 00:02:04,360
نموذج Angular Router المدعوم يوفر لك التنقل بين

30
00:02:04,360 --> 00:02:09,440
وجهات نظر نصف القطر خارج مكونات نصف القطر التي تشكل جزءًا من الافتراس الزاوي الخاص بك.

31
00:02:10,460 --> 00:02:14,820
لذلك كجزء من التمرين، سنضيف مكونات متعددة

32
00:02:14,820 --> 00:02:21,060
وسنرى كيف يمكننا التنقل فيما بينها باستخدام جهاز التوجيه الزاوي.

33
00:02:23,020 --> 00:02:26,800
لذلك كما ذكرت بالفعل جهاز التوجيه Angular

34
00:02:26,800 --> 00:02:30,280
يتيح التنقل بين وجهات النظر المختلفة.

35
00:02:30,280 --> 00:02:35,660
وبهذه الطريقة يمكنك تضمين هذا التنقل في

36
00:02:35,660 --> 00:02:40,870
الروابط أو الأزرار المستندة إلى شريط الأدوات

37
00:02:40,870 --> 00:02:45,610
وهكذا يمكنك تضمينها في واجهة المستخدم الخاصة بتطبيق Angular الخاص بك ومن

38
00:02:45,610 --> 00:02:49,810
ثم يمكنك تشغيل التنقل من عرض واحد إلى عرض آخر

39
00:02:49,810 --> 00:02:54,320
عن طريق النقر على إما الرابط أو الزر في واجهة المستخدم.

40
00:02:55,360 --> 00:03:00,611
هذا هو المكان الذي يستفيد فيه جهاز التوجيه Angular من عنوان URL للمتصفح

41
00:03:00,611 --> 00:03:04,018
ويستخدم عنوان URL للمتصفح كتعليمات

42
00:03:04,018 --> 00:03:08,179
للتنقل بين طرق العرض التي تم إنشاؤها بواسطة عميل دائرة نصف قطرها.

43
00:03:08,179 --> 00:03:12,857
يتم دعم جميع طرق العرض هذه عادةً من خلال المكونات المتعددة

44
00:03:12,857 --> 00:03:15,982
التي تشكل صعبًا من تطبيق Angular الخاص بك.

45
00:03:15,982 --> 00:03:19,289
الآن عند التنقل من طريقة عرض إلى طريقة عرض أخرى،

46
00:03:19,289 --> 00:03:22,906
يمكنك أيضًا تمرير معلمات اختيارية إلى طرق العرض هذه.

47
00:03:22,906 --> 00:03:26,307
كما تعلمنا في تلك الشريحة السابقة،

48
00:03:26,307 --> 00:03:31,305
يستفيد جهاز التوجيه الزاوي من عنوان URL

49
00:03:31,305 --> 00:03:36,856
لتمكينه من التعرف على الحاجة إلى التنقل بين الوسط.

50
00:03:36,856 --> 00:03:40,775
لذا، هذا هو المكان الذي يستفيد فيه جهاز التوجيه Angular من ما

51
00:03:40,775 --> 00:03:44,704
هو مدعوم بالفعل في HTML5 من خلال واجهة برمجة تطبيقات التاريخ؟

52
00:03:44,704 --> 00:03:47,990
إذن، ماذا تمكننا واجهة برمجة تطبيقات التاريخ من القيام به؟

53
00:03:47,990 --> 00:03:52,156
يعطي المطورين القدرة على تعديل

54
00:03:52,156 --> 00:03:56,766
عنوان URL لموقع الويب دون التسبب في تحديث الصفحة.

55
00:03:56,766 --> 00:04:03,806
الآن إذا كنت معتادًا على زيارة مواقع ويب مختلفة في متصفحك،

56
00:04:03,806 --> 00:04:10,078
فستنقر عادةً على شريط الإشارات المرجعية أو

57
00:04:10,078 --> 00:04:15,198
على رابط في صفحة أو ستكتب

58
00:04:15,198 --> 00:04:20,063
عنوان URL بشكل صريح في شريط العناوين في متصفحك.

59
00:04:20,063 --> 00:04:25,310
الآن عندما تفعل ذلك، فأنت تحدد بوضوح عنوان URL هناك.

60
00:04:25,310 --> 00:04:27,152
الآن عند تحديد عنوان URL،

61
00:04:27,152 --> 00:04:31,470
فإنك تقوم بتشغيل متصفحك للانتقال تلقائيًا إلى الخادم

62
00:04:31,470 --> 00:04:37,070
وجلب تلك الصفحة الجديدة وعرض الصفحة في نافذة المتصفح.

63
00:04:37,070 --> 00:04:43,180
الآن إذا كان بإمكانه منع هذه الحاجة للذهاب إلى الخادم وجلب المعلومات، ولكن

64
00:04:43,180 --> 00:04:49,280
بدلاً من ذلك تغيير عنوان URL دون التسبب في تحديث هذه الصفحة،

65
00:04:49,280 --> 00:04:54,450
فيمكننا الاستفادة من ذلك لتمكيننا من التنقل

66
00:04:54,450 --> 00:04:59,620
بين المشاهدات التي تشكل جزءًا من تطبيق واحد

67
00:04:59,620 --> 00:05:03,890
وهذا هو المكان الذي نأخذ فيه الاستفادة من HTML5.

68
00:05:03,890 --> 00:05:09,034
واجهة برمجة تطبيقات التاريخ التي تدعم أساليب مثل PushState و replacestate.

69
00:05:09,034 --> 00:05:13,662
لذلك، يسمح لك PushState بإضافة إدخال سجل في

70
00:05:13,662 --> 00:05:18,494
سجل المتصفح الخاص بك دون التسبب في تحديث الصفحة بالفعل.

71
00:05:18,494 --> 00:05:21,938
وبالمثل، سيقوم ReplaceState بتعديل

72
00:05:21,938 --> 00:05:26,810
إدخال السجل الحالي في سجل متصفحك.

73
00:05:26,810 --> 00:05:30,551
لذلك، يمكنك حتى استخدام

74
00:05:30,551 --> 00:05:35,724
الزر الخلفي والأمام من المتصفح الخاص بك لتكون قادرة على التحرك

75
00:05:35,724 --> 00:05:41,030
ذهابا وإيابا بين عناوين URL دون التسبب في تحديث الصفحة.

76
00:05:41,030 --> 00:05:45,905
الآن، هذا هو المكان الذي تحتاج فيه إلى تحديد شيء داخل

77
00:05:45,905 --> 00:05:47,458
صفحة HTML الخاصة بالفهرس تسمى القاعدة.

78
00:05:47,458 --> 00:05:52,489
لذلك عندما تستخدم واجهة برمجة تطبيقات محفوظات HTML هذه الطرق،

79
00:05:52,489 --> 00:05:57,307
ثم للتعديل، تحتاج إلى تحديد

80
00:05:57,307 --> 00:06:02,875
موقع أساسي من حيث تحدد الأجزاء الإضافية

81
00:06:02,875 --> 00:06:07,930
من مسار عنوان URL الخاص بك والتي لن تؤدي إلى تحديث الصفحة.

82
00:06:07,930 --> 00:06:10,580
حتى في هذه الحالة، لتطبيق الزاوي لدينا،

83
00:06:10,580 --> 00:06:12,378
وهذا يبدأ دائما في الجذر.

84
00:06:12,378 --> 00:06:17,829
لذلك، لهذا السبب نحدد القاعدة كـ href =»/».

85
00:06:17,829 --> 00:06:22,581
سيتم

86
00:06:22,581 --> 00:06:27,750
التعامل مع كل شيء آخر يأتي بعد ذلك في عنوان URL داخل تطبيق Angular الخاص بك كشيء

87
00:06:27,750 --> 00:06:33,228
يؤدي إلى التنقل الذي يتم التعامل مع جهاز التوجيه Angular نفسه

88
00:06:33,228 --> 00:06:39,080
دون التسبب في حاجة متصفحك إلى تحديث من خادم.

89
00:06:39,080 --> 00:06:44,240
لذا، هذه هي الطريقة التي يستفيد بها جهاز التوجيه الزاوي من واجهة برمجة تطبيقات التاريخ HTML5.

90
00:06:45,300 --> 00:06:47,766
الآن إذا لم يكن لديك واجهة برمجة تطبيقات التاريخ،

91
00:06:47,766 --> 00:06:51,295
فإن الطريقة الأخرى للقيام بالتنقل هي باستخدام علامات التصنيف.

92
00:06:51,295 --> 00:06:56,558
أنت تعرف بالفعل أنه في HTML، إذا قمت بتحديد أي

93
00:06:56,558 --> 00:07:01,543
رابط يبدأ بوسم، فهذا يشير إلى رابط داخل نفس الصفحة.

94
00:07:01,543 --> 00:07:05,782
لذلك عند النقر على مثل هذه الروابط، فإنه لن يسبب تحديث الصفحة.

95
00:07:05,782 --> 00:07:09,944
بدلاً من ذلك، سيعيد توجيهك إلى موقع آخر داخل نفس الصفحة.

96
00:07:09,944 --> 00:07:12,256
لذلك، هذه طريقة أخرى للقيام بالأشياء.

97
00:07:12,256 --> 00:07:17,030
ولكن بالنسبة للعرض النظيف، تدعم واجهة برمجة تطبيقات HTML5

98
00:07:17,030 --> 00:07:22,012
واجهة برمجة تطبيقات التاريخ هذه التي تمكنك من التعامل مع سجل

99
00:07:22,012 --> 00:07:26,087
المتصفح الخاص بك دون التسبب في تحديث الصفحة.

100
00:07:26,087 --> 00:07:28,616
بعد هذا التفسير الطويل،

101
00:07:28,616 --> 00:07:33,049
دعونا نأخذ مثالا لمساعدتنا على فهم هذا أبعد من ذلك.

102
00:07:33,049 --> 00:07:39,752
لنفترض أنك تحدد عنوان URL الخاص بك مثل هذا القول، على سبيل المثال، example.abc.com/home.

103
00:07:39,752 --> 00:07:43,325
الآن مع واجهة برمجة تطبيقات تاريخ HTML5،

104
00:07:43,325 --> 00:07:48,301
يمكنك ببساطة أخذ الجزء الأخير من عنوان URL

105
00:07:48,301 --> 00:07:56,988
وتعديله إلى عنوان URL آخر كما كنت قد أظهرت هنا مع example.abc.com/menu.

106
00:07:56,988 --> 00:08:03,054
لذلك ترى أنه تم تغيير عنوان URL الآن من شرطة مائلة إلى قائمة شرطة مائلة،

107
00:08:03,054 --> 00:08:08,624
يمكن تشغيل هذا التغيير باستخدام طريقة حالة دفع

108
00:08:08,624 --> 00:08:14,216
لواجهة برمجة تطبيقات محفوظات HTML5 بدون كما ذكرت، دون إعادة تحميل الصفحة.

109
00:08:14,216 --> 00:08:18,533
بدلاً من ذلك، سيكون هذا بمثابة مشغل داخلي

110
00:08:18,533 --> 00:08:24,842
للملاحة يستفيد منه جهاز التوجيه Angular بشكل صريح

111
00:08:24,842 --> 00:08:32,161
لدعم التنقل بين طرق العرض المختلفة لتطبيق Angular الخاص بك.

112
00:08:32,161 --> 00:08:36,828
الآن من الواضح أنك يجب أن تكون مهتمًا بكيفية استفادة جهاز التوجيه الزاوي

113
00:08:36,828 --> 00:08:37,376
من هذا.

114
00:08:37,376 --> 00:08:42,868
لذلك هذا هو المكان الذي يقوم فيه جهاز التوجيه Angular بالاستفادة

115
00:08:42,868 --> 00:08:47,917
من معالجة السجل لتعديل عنوان URL الخاص بالمتصفح دون تشغيل تحديث الصفحة.

116
00:08:47,917 --> 00:08:49,485
دعونا نأخذ مثالا على ذلك.

117
00:08:49,485 --> 00:08:56,933
لنفترض أن لديك تطبيق Angular الخاص بك مقيم في عنوان URL الخاص هذا.

118
00:08:56,933 --> 00:09:01,809
الآن، يحدث ذلك أن يتم تقديم تطبيق Angular الذي تعمل عليه

119
00:09:01,809 --> 00:09:06,784
إلى المتصفح عن طريق الوصول إليه على عنوان URL المحدد هذا.

120
00:09:06,784 --> 00:09:13,430
لذلك، فإنه سوف يساعدنا على فهم بسرعة ما يتيح لنا راوتر الزاوي القيام به.

121
00:09:13,430 --> 00:09:19,790
لذلك في هذه الحالة، عند كتابة هذا في عنوان URL للمتصفح الخاص بك،

122
00:09:19,790 --> 00:09:24,160
يمكنك بسهولة تكوين Angular Router لإعادة توجيهك

123
00:09:24,160 --> 00:09:29,210
إلى موقع افتراضي داخل التطبيق الزاوي الخاص بك.

124
00:09:29,210 --> 00:09:33,433
عادة، ذكرني أن شيئا مثل المنزل.

125
00:09:33,433 --> 00:09:38,606
بحيث يأخذك ذلك إلى نقطة الدخول الافتراضية

126
00:09:38,606 --> 00:09:42,303
للتطبيق الزاوي الخاص بك والتي

127
00:09:42,303 --> 00:09:48,109
من أجل فهم سهل، وسوف أسميها ك/home.

128
00:09:48,109 --> 00:09:53,175
لذلك إذا كان عنوان URL الخاص بك يحتوي على المضيف المحلي: 4200/home،

129
00:09:53,175 --> 00:09:58,249
فهذا يعني أنك في موقع منزلك الافتراضي.

130
00:09:58,249 --> 00:10:01,519
الآن عندما يتم تشغيل هذا التنقل،

131
00:10:01,519 --> 00:10:07,384
يمكنك بعد ذلك السماح لجهاز التوجيه الزاوي الخاص بك يأخذك تلقائيًا إلى العرض،

132
00:10:07,384 --> 00:10:12,017
على سبيل المثال، الذي يدعمه هذا المكون الرئيسي.

133
00:10:12,017 --> 00:10:16,963
لذلك عندما يصبح عنوان URL مضيف محلي: 4200/home،

134
00:10:16,963 --> 00:10:24,605
ستقوم تلقائيًا بعرض عرض المكون الرئيسي في شاشة المتصفح.

135
00:10:24,605 --> 00:10:30,601
بالضبط جدا عند وضع وجهة النظر التي سننظر في الشريحة التالية

136
00:10:30,601 --> 00:10:33,086
وفي التمرين الذي يلي ذلك.

137
00:10:33,086 --> 00:10:37,903
وبالمثل، يمكنك الحصول على طرق عرض أخرى داخل

138
00:10:37,903 --> 00:10:42,821
تطبيق Angular الخاص بك والتي يمكن أيضًا دعمها من خلال عناوين URL الأخرى

139
00:10:42,821 --> 00:10:47,153
التي هي ملحقات للمضيف المحلي: 4200.

140
00:10:47,153 --> 00:10:53,354
على سبيل المثال، إذا كان عنوان URL هو localhost:4200/aboutus،

141
00:10:53,354 --> 00:11:00,410
فقد يؤدي ذلك إلى عرض العرض الذي يتم تقديمه بواسطة AboutComponent.

142
00:11:00,410 --> 00:11:05,070
وبالمثل، فإن القائمة تظهر لك مينوكومبوننت وهلم جرا.

143
00:11:06,320 --> 00:11:09,088
لذلك ما يمكننا من القيام به هو،

144
00:11:09,088 --> 00:11:14,624
اعتمادا على ما عنوان URL المستخدم في المتصفح الخاص

145
00:11:14,624 --> 00:11:19,956
بك، سوف تستخدم ذلك للتنقل تلقائيا بين

146
00:11:19,956 --> 00:11:25,515
وجهات النظر المختلفة من المكونات المختلفة لتطبيق Angular الخاص بك.

147
00:11:25,515 --> 00:11:27,968
الآن، ليس عليك أن تقلق بشكل صريح حول هذا الموضوع.

148
00:11:27,968 --> 00:11:33,200
إذا قمت بتكوين جهاز التوجيه الزاوي لرعاية كل هذا، فإن جهاز التوجيه

149
00:11:33,200 --> 00:11:38,273
سوف يعتني تلقائيا بتوفير التنقل بين هذه

150
00:11:38,273 --> 00:11:43,957
المكونات كما سنرى في التمرين الذي يتبع هذه المحاضرة بالذات.

151
00:11:43,957 --> 00:11:48,407
الآن قبل أن ننتقل إلى التمرين حيث سنتعرف على المزيد عن

152
00:11:48,407 --> 00:11:53,017
جهاز التوجيه الزاوي، اسمحوا لي

153
00:11:53,017 --> 00:11:57,945
أن ألفت انتباهكم بسرعة إلى بعض المصطلحات داخل جهاز التوجيه الزاوي الذي ستواجهه أثناء التمرين،

154
00:11:57,945 --> 00:12:01,759
وأود أن تولي اهتماما خاصا لهذه الشروط،

155
00:12:01,759 --> 00:12:07,357
لأنها حاسمة لفهم كيفية عمل جهاز التوجيه الزاوي بالفعل.

156
00:12:07,357 --> 00:12:13,205
لذلك سترى أولاً أنه عندما نقوم بتصميم جهاز التوجيه الزاوي،

157
00:12:13,205 --> 00:12:18,042
سنأخذ هذه المساعدة من وحدة جهاز التوجيه التي

158
00:12:18,042 --> 00:12:22,669
تشكل جزءًا من مكتبة جهاز التوجيه المائل الزاوية.

159
00:12:22,669 --> 00:12:28,094
لذلك، ونحن في طريقنا لاستيراد وحدة جهاز التوجيه إلى أو تطبيق الزاوي

160
00:12:28,094 --> 00:12:32,690
في وحدة التطبيق وبعد ذلك أيضا سنقوم باستيراد الطرق.

161
00:12:32,690 --> 00:12:37,716
لذلك، تسمح لنا الطرق بتحديد المسارات المختلفة التي يستخدمها

162
00:12:37,716 --> 00:12:43,335
تطبيقنا Angular أو يستخدم جهاز التوجيه الزاوي.

163
00:12:43,335 --> 00:12:49,047
لذلك في هذه الحالة، سنقوم بتحديد الطرق في شكل مسار

164
00:12:49,047 --> 00:12:51,585
والمكون المقابل.

165
00:12:51,585 --> 00:12:56,299
لذلك كما رأيت في الشريحة السابقة، رأيت أنه

166
00:12:56,299 --> 00:13:00,951
تم تعيين كل واحد من ملحقات عنوان URL هذه إلى عرض مكون معين.

167
00:13:00,951 --> 00:13:05,729
لذلك، يتم توفير هذا النوع من المعلومات لهذا الموجه الزاوي

168
00:13:05,729 --> 00:13:09,885
من خلال المسارات ويتم تحديد جميع هذه المسارات باستخدام

169
00:13:09,885 --> 00:13:14,139
كائن جافا سكريبت مثل هذا المسار مع اثنين من الخصائص.

170
00:13:14,139 --> 00:13:18,470
المسار والمكون وبعض الخصائص الإضافية التي لن

171
00:13:18,470 --> 00:13:22,970
نواجهها الآن، ولكننا سنرى في بعض التدريبات اللاحقة.

172
00:13:24,610 --> 00:13:28,531
أيضا، السؤال الثاني الذي تتساءل هو أين سيتم عرض هذا

173
00:13:28,531 --> 00:13:30,657
الرأي في تطبيق Angular الخاص بك؟

174
00:13:30,657 --> 00:13:35,863
هذا هو المكان الذي في قالب لدينا من مكون التطبيق لدينا،

175
00:13:35,863 --> 00:13:43,286
وسوف نقوم بتضمين توجيه يسمى RouterOutlet الذي تم تحديده

176
00:13:43,286 --> 00:13:48,628
كما ترى <router-outlet> و </router-outlet>.

177
00:13:48,628 --> 00:13:54,890
سيتم تضمين هذا في ملف قالب مكون التطبيق،

178
00:13:54,890 --> 00:13:59,188
والآن ينتقل جهاز التوجيه الزاوي إلى

179
00:13:59,188 --> 00:14:04,484
وجهات النظر المختلفة للمكونات المختلفة.

180
00:14:04,484 --> 00:14:08,899
سيتم تضمين العرض المقابل للمكون في

181
00:14:08,899 --> 00:14:13,633
طريقة عرض التطبيقات الخاصة بك أينما قمت بتحديد منفذ جهاز التوجيه هذا.

182
00:14:13,633 --> 00:14:17,773
لذلك، احترس من ذلك في التمرين الذي يلي.

183
00:14:17,773 --> 00:14:22,752
بالإضافة إلى ذلك، لتشغيل التنقل، سترى أنه

184
00:14:22,752 --> 00:14:27,743
مع العديد من العلامات التي يتم استخدامها داخل التطبيق.

185
00:14:27,743 --> 00:14:32,429
على سبيل المثال، أود أن تشمل إعداد علامات مع

186
00:14:32,429 --> 00:14:36,820
زر MD مكون المادة الزاوي في شريط الأدوات،

187
00:14:36,820 --> 00:14:41,327
في مكون رأس تطبيق Angular الخاص بنا.

188
00:14:41,327 --> 00:14:44,635
أود إقران العلامات بتوجيه آخر،

189
00:14:44,635 --> 00:14:47,437
وهو توجيه سمة يسمى RouterLink.

190
00:14:47,437 --> 00:14:53,260
يعد RouterLink توجيهًا فعليًا توفره لنا وحدة جهاز التوجيه.

191
00:14:53,260 --> 00:14:57,966
هذا الرابط جهاز التوجيه تمكننا من تحديد المسار مثل، على سبيل المثال،

192
00:14:57,966 --> 00:15:00,783
رموز مكتوبة، أستطيع أن أرى «/القائمة».

193
00:15:00,783 --> 00:15:05,677
يمكنك الحصول على تفاصيل أكثر من هذا لجهاز التوجيه (routerLink).

194
00:15:05,677 --> 00:15:11,646
ولكن بالنسبة لهذه العملية، سنبدأ مع مثال بسيط حيث سيكون لدينا، على

195
00:15:11,646 --> 00:15:15,806
سبيل المثال، /القائمة المائلة الرئيسية شرطة مائلة الاتصال بنا وهلم

196
00:15:15,806 --> 00:15:19,976
جرا المحدد باستخدام السمة RouterLink مباشرة.

197
00:15:19,976 --> 00:15:25,212
لذلك عند النقر على رابط مثل هذا في شريط الأدوات الخاص بك،

198
00:15:25,212 --> 00:15:31,281
فإن ذلك سيؤدي إلى تشغيل جهاز التوجيه Angular لتسبب تغيير أو

199
00:15:31,281 --> 00:15:39,502
تنقل إلى طريقة عرض معينة تدعمها وحدة Angular Router.

200
00:15:39,502 --> 00:15:45,391
لذلك، يتم تحديد التعيين بين هذا الرابط والمكونات المقابلة

201
00:15:45,391 --> 00:15:51,800
بالفعل في المسار الذي نعطيه لتطبيق Angular الخاص بنا.

202
00:15:51,800 --> 00:15:56,715
لذلك، احترس من كل هذه الأشياء كما تفعل التمرين.

203
00:15:56,715 --> 00:16:00,895
سأشرح بعض هذه الأشياء وسبب

204
00:16:00,895 --> 00:16:07,366
القيام بها أثناء قيامنا بخطوات التمرين التي تتبع هذا الدرس.

205
00:16:07,366 --> 00:16:11,099
[ موسيقى]