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

2
00:00:04,965 --> 00:00:10,050
في هذا التمرين سوف ننظر في كيفية الاستفادة من

3
00:00:10,050 --> 00:00:14,397
وحدة التوجيه Angular لتكون قادرة على دعم مكونات متعددة،

4
00:00:14,397 --> 00:00:19,830
وتكون قادرة على الانتقال إلى أي واحد من هذه المكونات في تطبيق Angular الخاص بنا.

5
00:00:21,690 --> 00:00:26,280
إلقاء نظرة سريعة على حالة طلبنا.

6
00:00:26,280 --> 00:00:29,647
في نهاية التمرين الأخير،

7
00:00:29,647 --> 00:00:36,135
لاحظنا بالفعل أنه في هذا التطبيق، في الرأس،

8
00:00:36,135 --> 00:00:42,520
لدينا روابط إلى أربعة اقتباس مختلفة، صفحات إلغاء الاقتباس هنا.

9
00:00:42,520 --> 00:00:47,334
الآن في المصطلحات الزاوي، سيتم دعم هذا باستخدام

10
00:00:47,334 --> 00:00:52,371
مكونات مختلفة، كما سنرى في هذا التمرين.

11
00:00:52,371 --> 00:00:55,706
لذلك نرى هنا أنه عندما نضغط على الصفحة الرئيسية،

12
00:00:55,706 --> 00:01:01,840
نريد أن نكون قادرين على رؤية تفاصيل ما يجب أن يكون موجودًا في الصفحة الرئيسية.

13
00:01:01,840 --> 00:01:07,182
وبالمثل، حول والقائمة بالطبع كنت ترى بالفعل هناك الحق،

14
00:01:07,182 --> 00:01:12,608
ومن ثم الاتصال، وربما يعرض بعض المعلومات حول محتوى

15
00:01:12,608 --> 00:01:15,040
هذا المطعم بالذات.

16
00:01:15,040 --> 00:01:18,450
إذن كيف يذهبون لدعم شيء كهذا؟

17
00:01:18,450 --> 00:01:23,490
أولا، من خلال إلقاء نظرة سريعة واحدة على ذلك نرى أن القائمة

18
00:01:23,490 --> 00:01:28,470
مدعومة بالفعل من خلال عرض المعلومات حول القائمة هنا،

19
00:01:28,470 --> 00:01:32,720
وهذا هو بالفعل تسهيل مع استخدام مكون القائمة.

20
00:01:32,720 --> 00:01:37,720
لذلك نرى أن مكون القائمة هو جنبا إلى جنب بين رأس

21
00:01:37,720 --> 00:01:42,270
وتذييل الصفحة وقادرة على عرض المعلومات هناك حق.

22
00:01:42,270 --> 00:01:48,270
الآن، كيف يمكننا الاستفادة من استخدام وحدة التوجيه Angular

23
00:01:48,270 --> 00:01:54,270
لتمكيننا من دعم هذه المكونات المتعددة والقدرة على التنقل فيما بينها.

24
00:01:54,270 --> 00:01:58,810
الآن، للبدء، أولا، بالطبع، نحن بحاجة إلى مكونات متعددة،

25
00:01:58,810 --> 00:02:04,370
كل واحد منهم يظهر وجهة نظرهم الخاصة حتى نتمكن من التنقل بين وجهات النظر.

26
00:02:04,370 --> 00:02:09,390
لذلك دعونا إضافة في ثلاثة مكونات أخرى إلى التطبيق الزاوي لدينا

27
00:02:09,390 --> 00:02:13,300
، المنزل، حول والاتصال.

28
00:02:13,300 --> 00:02:17,500
أنت تعرف بالفعل كيف تفعل ذلك، لذلك دعونا نذهب إلى تلك الخطوة التالية.

29
00:02:17,500 --> 00:02:22,959
في موجه، اكتب ng g g مكون

30
00:02:22,959 --> 00:02:28,616
المنزل لإنشاء المكون الرئيسي.

31
00:02:28,616 --> 00:02:33,094
وبالمثل توليد

32
00:02:33,094 --> 00:02:38,362
عنصر حول

33
00:02:38,362 --> 00:02:43,100
وأيضا بينما نحن في ذلك

34
00:02:43,100 --> 00:02:48,641
عنصر الاتصال.

35
00:02:48,641 --> 00:02:53,031
حتى الآن لدينا ثلاثة مكونات تضاف جنبا إلى جنب مع المكون الجديد الذي

36
00:02:53,031 --> 00:02:53,903
لدينا بالفعل.

37
00:02:53,903 --> 00:02:58,445
يتم استخدام مكون تفاصيل القرص بالفعل في مكونات القائمة حتى

38
00:02:58,445 --> 00:03:00,833
لا نعتبره في الوقت الحالي.

39
00:03:00,833 --> 00:03:05,652
ولكن لدينا الآن المنزل، حول، الاتصال ومكونات القائمة،

40
00:03:05,652 --> 00:03:08,339
ونحن بحاجة إلى وسيلة للذهاب بينهما.

41
00:03:08,339 --> 00:03:09,882
إذاً كيف يمكننا فعل ذلك؟

42
00:03:09,882 --> 00:03:14,806
لذلك هذا هو المكان الذي يمكنني الاستفادة من وحدة التوجيه الزاوي.

43
00:03:14,806 --> 00:03:20,618
للبدء في استخدام وحدة جهاز التوجيه لتمكيننا من التنقل

44
00:03:20,618 --> 00:03:26,225
بين هذه المكونات، دعنا نضيف وحدة Angular جديدة.

45
00:03:26,225 --> 00:03:32,012
الآن هذا النمط من استخدام وحدة التوجيه هو شيء يقترح

46
00:03:32,012 --> 00:03:35,841
لتطبيقات الزاوي أكثر تعقيدا قليلا، ولكن

47
00:03:35,841 --> 00:03:41,735
إذا جعلنا ذلك كممارسة قياسية، فإنه يقطع شوطا طويلا لمساعدتنا في المستقبل.

48
00:03:41,735 --> 00:03:46,653
لذلك أنا بدأت حتى تطبيق بسيط مع

49
00:03:46,653 --> 00:03:52,032
وضع وحدة التوجيه في وحدة منفصلة خاصة بها.

50
00:03:52,032 --> 00:03:58,470
بحيث يشمل جميع احتياجات التوجيه لدينا في وحدة منفصلة.

51
00:03:58,470 --> 00:04:04,170
للبدء، نستخدم مرة أخرى CLI Angular

52
00:04:04,170 --> 00:04:10,450
لإنشاء وحدة نمطية أخرى، وسنسمي هذه الوحدة كتوجيه للتطبيق.

53
00:04:10,450 --> 00:04:15,237
لذلك فإن وحدة توجيه التطبيق هذه التي سنقوم بإنشائها سوف تستفيد من

54
00:04:15,237 --> 00:04:20,599
وحدة تعيين فترات زمنية محددة الزاوي لتوفير ميزات التوجيه لتطبيقنا.

55
00:04:20,599 --> 00:04:26,296
ثم نذهب للاستفادة من ذلك في وحدة التطبيق لدينا لتمكين التوجيه.

56
00:04:26,296 --> 00:04:30,927
لإنشاء وحدة نمطية جديدة تسمى توجيه التطبيق،

57
00:04:30,927 --> 00:04:35,814
في موجه نوع ng g g وحدة توجيه التطبيق،

58
00:04:35,814 --> 00:04:40,960
والتي يجب أن تنشئ وحدة توجيه التطبيق

59
00:04:40,960 --> 00:04:49,211
ووضع ملف app-routing.module.ts في هذا المجلد المحدد هناك.

60
00:04:49,211 --> 00:04:52,635
الآن يتم ترك وحدة توجيه التطبيق هذه هناك فقط.

61
00:04:52,635 --> 00:04:58,138
نحن بحاجة إلى تضمين ذلك صراحة في وحدة التطبيق لدينا،

62
00:04:58,138 --> 00:05:01,662
لذلك يجب أن تكون قادرة على الاستفادة منه.

63
00:05:01,662 --> 00:05:06,669
الذهاب إلى المحرر نرى الآن أن لدينا الآن مجلد آخر هنا

64
00:05:06,669 --> 00:05:12,328
يسمى التطبيق التوجيه وداخل أن لدينا أبروتينغمودول هنا،

65
00:05:12,328 --> 00:05:18,374
نختار وحدة الزاوي العامة التي ولدت كلي الزاوي بالنسبة لنا.

66
00:05:18,374 --> 00:05:22,034
هذا ليس له شيء محدد حول التوجيه على هذا النحو

67
00:05:22,034 --> 00:05:24,737
في الوقت الحالي، لكننا سنضيف تلك الميزات هناك.

68
00:05:24,737 --> 00:05:30,633
ولكن، قبل أن نفعل ذلك، دعونا نستخدم هذا ApproutingModule في app.module لدينا،

69
00:05:30,633 --> 00:05:34,028
وحدة الجذر لتطبيق الزاوي لدينا.

70
00:05:34,028 --> 00:05:38,271
للقيام بذلك، افتح app.module،

71
00:05:38,271 --> 00:05:44,452
وبينما نحن هنا، دعني أفعل القليل من التنظيف هنا.

72
00:05:44,452 --> 00:05:48,489
أنا أميل إلى عدم مثل التعليمات البرمجية غير المنظمة، لذلك

73
00:05:48,489 --> 00:05:52,407
أنا فقط ذاهب لنقل كل هذا الرمز

74
00:05:52,407 --> 00:05:57,040
للمكونات معا في مكان واحد هناك ومن

75
00:05:57,040 --> 00:06:02,650
ثم لدي الخدمات المطلوبة أسفل هنا.

76
00:06:02,650 --> 00:06:09,180
الآن لدينا وحدة جديدة التي نحصل

77
00:06:09,180 --> 00:06:13,846
عليها من أبروتينغمودول،

78
00:06:13,846 --> 00:06:17,764
والتي أنشأناها للتو

79
00:06:17,764 --> 00:06:22,614
وبعد ذلك أنا ذاهب إلى تتطلب أن

80
00:06:22,614 --> 00:06:27,108
أبروتينغمودول في بلدي،

81
00:06:34,609 --> 00:06:37,040
وحدة الطريق أو أبمودول هنا.

82
00:06:37,040 --> 00:06:43,080
لذلك، أقوم بتضمين ApproutingModule عن طريق استيراده أولاً هناك.

83
00:06:43,080 --> 00:06:47,625
ثم بعد ذلك، في الواردات، أذهب في

84
00:06:47,625 --> 00:06:50,880
ثم أضيف في أبروتينغمودول.

85
00:06:53,440 --> 00:06:56,970
هناك حق، أبروتينغمودول.

86
00:06:56,970 --> 00:07:01,380
لذلك مع هذا،

87
00:07:01,380 --> 00:07:05,640
يتم إصلاح وحدة التطبيق الخاصة بي، وحدة الجذر، الآن حتى للاستفادة من أبروتينغمودول.

88
00:07:05,640 --> 00:07:11,420
الآن هذا يعطيني حرية تطوير جزء التوجيه الخاص بي في

89
00:07:11,420 --> 00:07:18,540
بلدي ApproutingModule بثقة كاملة أنه سيتم استخدامه من قبل وحدة التطبيق الخاصة بي.

90
00:07:18,540 --> 00:07:21,370
لذلك دعونا حفظ التغييرات على وحدة التطبيق،

91
00:07:21,370 --> 00:07:25,357
وبعد ذلك سوف نعود وفتح أبروتينمودول هنا.

92
00:07:26,400 --> 00:07:30,470
وهنا نحن ذاهبون للاستفادة من

93
00:07:30,470 --> 00:07:34,050
وحدة جهاز التوجيه التي Angular يوفر لنا.

94
00:07:34,050 --> 00:07:37,749
لذلك اسمحوا لي هنا استيراد،

95
00:07:41,156 --> 00:07:46,174
RouterModule هنا، وأيضا

96
00:07:46,174 --> 00:07:51,608
وحدة المسارات المصاحبة المتوفرة من Angular.

97
00:07:51,608 --> 00:07:56,428
ثم سأقوم باستيراد ذلك من Angular،

98
00:07:56,428 --> 00:08:00,320
ومن ثم، RouterModule هنا.

99
00:08:00,320 --> 00:08:04,540
لذلك من مكتبة جهاز التوجيه الزاوي، أقوم باستيراد كل من

100
00:08:04,540 --> 00:08:06,120
RouterModule ووحدة المسارات.

101
00:08:06,120 --> 00:08:14,590
لذلك بمجرد أن أفعل ذلك، من الواضح أنني بحاجة إلى أن تكون قادرة على تضمين RouterModule هنا.

102
00:08:14,590 --> 00:08:21,015
لذلك بالإضافة إلى CommonModule التي قمت باستيرادها هناك،

103
00:08:21,015 --> 00:08:25,330
أحتاج أيضًا إلى استخدام RouterModule هنا.

104
00:08:25,330 --> 00:08:28,803
الآن، سأتركه عند هذه النقطة

105
00:08:28,803 --> 00:08:33,835
سنقوم بتطوير الطرق لتطبيق Angular الخاص بنا

106
00:08:33,835 --> 00:08:38,054
ثم نعود وإصلاح هذا الأمر بعد ذلك بقليل.

107
00:08:38,054 --> 00:08:44,225
لذلك مع هذا، اسمحوا لي حفظ التغييرات على وحدة توجيه التطبيق.

108
00:08:44,225 --> 00:08:49,925
وما سأقوم به هو، فقط من أجل الحفاظ على شفرتي نظيفة

109
00:08:49,925 --> 00:08:56,574
ومنظمة، سأقوم بتحديد جميع الطرق لتطبيقي في ملف آخر.

110
00:08:56,574 --> 00:09:00,673
ولكن سأقوم بإنشاء في مجلد توجيه التطبيق

111
00:09:00,673 --> 00:09:03,863
ثم سأقوم بتسميته على أنه routes.ts5.

112
00:09:03,863 --> 00:09:08,601
الآن، داخل هذا الملف، سأقوم بإنشاء جميع الطرق التي أحتاجها.

113
00:09:08,601 --> 00:09:12,994
حتى هنا، أنا ذاهب لاستيراد،

114
00:09:15,508 --> 00:09:23,255
مسارات من، @angular /router،

115
00:09:23,255 --> 00:09:29,570
ومن ثم استخدام ذلك لبناء مسارات لتطبيقي.

116
00:09:29,570 --> 00:09:33,453
الآن بالإضافة إلى ذلك، أحتاج إلى أن أتمكن من استيراد جميع

117
00:09:33,453 --> 00:09:37,745
المكونات التي لدي داخل طلبي.

118
00:09:37,745 --> 00:09:41,303
لأنني أريد أن أكون قادرًا على التنقل إلى جميع المكونات.

119
00:09:41,303 --> 00:09:44,158
إذن أين لدي قائمة بجميع المكونات؟

120
00:09:44,158 --> 00:09:46,780
لدي لهم في app_module.

121
00:09:46,780 --> 00:09:48,475
لذلك اسمحوا لي أن أذهب إلى app_module.

122
00:09:50,917 --> 00:09:58,300
أحاول عدم كتابة الأشياء إلى أقصى حد ممكن لإبقاء الأمور تحت السيطرة.

123
00:09:58,300 --> 00:10:03,720
لذلك سأذهب إلى app_module، ثم أقوم بنسخ جميع المكونات التي لدي.

124
00:10:03,720 --> 00:10:08,681
لا أحتاج إلى AppComponent لأنني لن أتنقل مباشرة إلى ذلك في

125
00:10:08,681 --> 00:10:11,925
طلبي، ولكن ما تبقى منها سأحتاج إليها.

126
00:10:11,925 --> 00:10:18,441
لذلك سأقوم ببساطة بنسخ كل تلك

127
00:10:18,441 --> 00:10:25,510
ثم تضمينها في ملف المسارات الخاص بي، هنا.

128
00:10:25,510 --> 00:10:30,080
حتى الآن لدي مينوكومبوننت، ديشديتيل، رأس، القدم.

129
00:10:30,080 --> 00:10:33,190
في الواقع، أنا لست بحاجة إلى رأس و فوتركومبوننت إما.

130
00:10:33,190 --> 00:10:34,516
لن أحتاج إلى رأس و

131
00:10:34,516 --> 00:10:39,040
فوتركومبوننت لأنني لن انتقل إليها باستخدام الطرق.

132
00:10:39,040 --> 00:10:43,322
لذلك اسمحوا لي حذف رأس ومكونات تذييل الصفحة.

133
00:10:43,322 --> 00:10:46,842
أنا فقط بحاجة إلى القائمة، الصفحة الرئيسية، حول، جهات الاتصال.

134
00:10:46,842 --> 00:10:53,532
أنا شملت Dishdetail، وسوف نأتي إلى ذلك في واحدة من التدريبات في وقت لاحق.

135
00:10:53,532 --> 00:10:57,949
حتى الآن بعد أن قمنا بتضمين كل هذه، الخطوة التالية هي بالنسبة

136
00:10:57,949 --> 00:11:02,289
لي لتحديد مختلف الطرق المتاحة هنا.

137
00:11:02,289 --> 00:11:06,884
سأحدد ثابتًا هنا

138
00:11:06,884 --> 00:11:12,247
مسارات مسماة من نوع المسارات.

139
00:11:12,247 --> 00:11:17,908
حتى الآن ترى لماذا لدي طرق مهمة من جهاز التوجيه Angular هناك.

140
00:11:17,908 --> 00:11:23,148
لذلك سيسمح لي هذا بتعريف مصفوفة تحدد

141
00:11:23,148 --> 00:11:28,651
المسارات المختلفة التي هي جزء من طلبي.

142
00:11:28,651 --> 00:11:32,940
هنا، اسمحوا لي أن حدد جميع الطرق هنا.

143
00:11:32,940 --> 00:11:37,854
الآن عند تحديد المسارات في

144
00:11:37,854 --> 00:11:42,776
تطبيق Angular الخاص بك، ستقوم بتحديد المسار.

145
00:11:42,776 --> 00:11:48,303
والتي سأبدأ بها مع HomeComponent،

146
00:11:48,303 --> 00:11:53,139
وبعد ذلك عندما انتقل إلى مسار المنزل،

147
00:11:53,139 --> 00:11:59,368
المكون المقابل هو HomeComponent.

148
00:12:00,630 --> 00:12:05,940
لذلك عندما يتضمن عنوان URL الخاص بي المنزل،

149
00:12:05,940 --> 00:12:08,930
فسوف أتنقل إلى HomeComponent.

150
00:12:09,930 --> 00:12:14,905
في المحاضرة السابقة، رأينا بالفعل كيف نستخدم HTML

151
00:12:14,905 --> 00:12:21,513
PushState () للتعرف على

152
00:12:21,513 --> 00:12:27,010
الملاحة الداخلية، وذلك باستخدام دعم HTML لـ PushState ().

153
00:12:27,010 --> 00:12:33,481
لذلك هذا هو ما أستفيد منه هنا من أجل تحديد هذه الطرق المختلفة هنا.

154
00:12:33,481 --> 00:12:38,003
لذلك عندما أقول لوكالهوست: 4200/المنزل،

155
00:12:38,003 --> 00:12:43,387
ثم هذا يشير إلى هوميكومبوننت، هنا.

156
00:12:43,387 --> 00:12:48,850
إذن هذه هي الطريقة التي سأنتقل بها إلى حفل العودة للوطن

157
00:12:48,850 --> 00:12:55,909
وبالمثل، يمكننا تحديد المكونات الأخرى في تطبيقنا.

158
00:12:55,909 --> 00:13:03,213
المسار التالي الذي سأقوم بتحديده هو MenuComponent.

159
00:13:03,213 --> 00:13:09,006
لهذا التمرين، أنا ذاهب فقط لتحديد هذين فقط.

160
00:13:09,006 --> 00:13:14,119
وسيتم ملء بقية منها كجزء

161
00:13:14,119 --> 00:13:21,371
من بعض التدريبات والمهام اللاحقة التي تلي ذلك.

162
00:13:21,371 --> 00:13:25,791
لذلك لدينا اثنين منهم إعداد, الصفحة الرئيسية والقائمة.

163
00:13:25,791 --> 00:13:29,400
الآن، يجب أن أقدم أيضًا المسار الافتراضي هنا.

164
00:13:29,400 --> 00:13:35,379
لذلك عندما ينتقل المستخدم إلى المضيف المحلي: 4200،

165
00:13:35,379 --> 00:13:40,670
ثم سوف ينتهي بك الأمر في الموقع الافتراضي.

166
00:13:40,670 --> 00:13:46,054
لذلك في هذه الحالة، سأقوم ببساطة بإعادة توجيه المستخدم إلى HomeComponent،

167
00:13:46,054 --> 00:13:50,828
وهو ما سيتم عرضه في تطبيق Angular.

168
00:13:50,828 --> 00:13:58,748
لذلك للقيام بذلك، سأكتب في خاصية RedirectTo.

169
00:13:58,748 --> 00:14:03,838
ثم حدد ذلك ليكون /المنزل.

170
00:14:03,838 --> 00:14:10,507
وهذا يعني أنه عند التنقل دون توفير مسار عنوان URL هناك،

171
00:14:10,507 --> 00:14:16,708
فإنك ستنتقل تلقائيًا إلى HomeComponent،

172
00:14:16,708 --> 00:14:20,490
ويجب أن يتطابق هذا بالكامل هنا.

173
00:14:20,490 --> 00:14:25,023
لذلك هؤلاء الثلاثة، سوف أقوم بتوريد الطرق هنا، في الوقت الحالي.

174
00:14:25,023 --> 00:14:26,610
أما الباقية،

175
00:14:26,610 --> 00:14:31,580
كما قلت، فستضاف كجزء من بقية التدريبات.

176
00:14:31,580 --> 00:14:36,658
الآن، من الواضح أنك ترى هذه

177
00:14:36,658 --> 00:14:40,889
الخطوط الحمراء المتعرجة هناك لأن هذه كلها في

178
00:14:40,889 --> 00:14:46,011
../لذا دعني أصلحها.

179
00:14:46,011 --> 00:14:50,232
حتى الآن، من ملف routes.ts،

180
00:14:50,232 --> 00:14:55,721
ونحن نستعد هذه المسارات ثابتة هنا ومن

181
00:14:55,721 --> 00:14:58,971
ثم جعلها متاحة.

182
00:14:58,971 --> 00:15:04,111
حتى الآن أن هذا جاهز بالنسبة لنا، وسوف نعود إلى التطبيق routing.module.

183
00:15:04,111 --> 00:15:09,282
وفي التطبيق routing.module،

184
00:15:09,282 --> 00:15:15,141
سأقوم باستيراد المسارات الثابتة،

185
00:15:15,141 --> 00:15:17,908
المسارات الثابتة.

186
00:15:17,908 --> 00:15:24,542
إذا كنت تريد أن تقول أنه كمسارات، والثوابت المسارات، واستخدامها هنا.

187
00:15:24,542 --> 00:15:26,516
الآن، كيف يمكنني الاستفادة منه هنا؟

188
00:15:26,516 --> 00:15:31,451
الآن، يأخذ RouterModule

189
00:15:31,451 --> 00:15:36,029
كمعلمة لـ ForRoot،

190
00:15:38,737 --> 00:15:42,261
المعلمة هي تكوين المسارات.

191
00:15:42,261 --> 00:15:50,154
لذلك أنا ذاهب لتزويد الطرق كمعلمة لذلك، RouterModule.

192
00:15:50,154 --> 00:15:56,520
حسنا، حتى أن إصلاح تكوين التوجيه لدينا لتطبيقنا.

193
00:15:56,520 --> 00:16:01,480
أحد التغييرات النهائية التي نحتاج إلى إصلاحها هو أنه من التطبيق routing.module،

194
00:16:01,480 --> 00:16:05,360
نريد أن نكون قادرين على تصدير RouterModule إلى وحدة التطبيق الخاصة بنا

195
00:16:05,360 --> 00:16:07,120
بحيث يمكن أيضًا الاستفادة منه.

196
00:16:07,120 --> 00:16:11,796
لذلك هذا هو المكان الذي نستخدم فيه

197
00:16:11,796 --> 00:16:16,346
خاصية التصدير في ديكور ngModule الخاص بنا.

198
00:16:16,346 --> 00:16:22,907
وجعل لدينا راوترمودول متاحة لأبمودول.

199
00:16:22,907 --> 00:16:27,990
لذلك دعونا حفظ التغييرات أيضا حتى الآن.

200
00:16:27,990 --> 00:16:30,845
الآن، عند التوجيه إلى أحد هذه الأجزاء،

201
00:16:30,845 --> 00:16:36,040
أيا كان عرض العرض لمكون معين.

202
00:16:36,040 --> 00:16:40,260
ليس لدينا أي شيء في الوقت الحالي في طلبنا.

203
00:16:40,260 --> 00:16:45,124
عندما تنظر إلى الملف AppComponent.html.

204
00:16:45,124 --> 00:16:49,961
هنا، افتراضيا لدينا فقط رأس التطبيق، القائمة التطبيق،

205
00:16:49,961 --> 00:16:52,107
وتذييل التطبيق هنا.

206
00:16:52,107 --> 00:16:54,780
الآن لحسن الحظ،

207
00:16:54,780 --> 00:17:00,127
يوفر لنا RouterModule الزاوي

208
00:17:00,127 --> 00:17:06,483
توجيهًا يسمى مخرج جهاز التوجيه.

209
00:17:06,483 --> 00:17:11,635
لذلك كلما قمت بتحديد هذا التوجيه كما,

210
00:17:14,802 --> 00:17:18,192
العلامة في ملف القالب الخاص بك.

211
00:17:18,192 --> 00:17:23,355
ثم سيستخدم تطبيق Angular الخاص بك تلقائيًا

212
00:17:23,355 --> 00:17:30,545
ذلك كمكان يجب فيه إدخال العرض المقابل.

213
00:17:30,545 --> 00:17:36,725
لذلك، من خلال تحديد منفذ التوجيه في ملف قالب AppComponent الخاص بي.

214
00:17:36,725 --> 00:17:44,537
الآن سوف أكون قادرا على عرض أي من هذه المعلومات في ذلك الموقع المحدد.

215
00:17:44,537 --> 00:17:48,747
لذلك قمنا بإجراء تغييرات على وحدة توجيه التطبيق،

216
00:17:48,747 --> 00:17:54,573
ملف AppComponent.html، حيث أضفنا منفذ التوجيه.

217
00:17:54,573 --> 00:17:59,416
قمنا بتعريف المسارات في ملف Routes.ts

218
00:17:59,416 --> 00:18:06,074
ثم لدينا AppModule حيث أضفنا في ApproutingModule

219
00:18:06,074 --> 00:18:12,350
كواحدة من الواردات هناك، بعد استيراده هنا.

220
00:18:12,350 --> 00:18:15,110
لذا بعد كل هذه التغييرات، دعنا نذهب

221
00:18:15,110 --> 00:18:21,890
ونلقي نظرة على ما تظهر تطبيقاتنا Angular في المتصفح.

222
00:18:21,890 --> 00:18:26,710
الذهاب إلى متصفحنا، يمكننا الآن أن نرى أنه في

223
00:18:26,710 --> 00:18:31,830
متصفحنا الشيء الافتراضي الذي تم عرضه هنا هو الأعمال المنزلية.

224
00:18:31,830 --> 00:18:40,060
من معرفتك بكيفية عمل المكون الذي يتم إنشاؤه بواسطة Angular CLI.

225
00:18:40,060 --> 00:18:46,840
يمكنك بالفعل التعرف على أن هذا يجب أن يكون في قالب المكون الرئيسي.

226
00:18:46,840 --> 00:18:53,040
أيضا، نلقي نظرة على عنوان URL في جزء العنوان من المتصفح.

227
00:18:53,040 --> 00:18:56,860
ترى أنه يقول المضيف المحلي: 4200/المنزل.

228
00:18:56,860 --> 00:18:59,682
إذا قمت ببساطة بكتابة المضيف المحلي: 4200،

229
00:18:59,682 --> 00:19:04,996
سيؤدي ذلك تلقائيًا إلى إعادة توجيه نفسه إلى المضيف المحلي: 4200/home.

230
00:19:04,996 --> 00:19:12,923
لأننا إعداد هذا المسار معين في تكوين المسارات لدينا هنا.

231
00:19:12,923 --> 00:19:16,889
الآن ليس لدينا طريقة للذهاب إلى الوحدات المتبقية،

232
00:19:16,889 --> 00:19:22,167
فكيف يمكننا توفير الربط حتى نتمكن من الانتقال إلى الوحدة المتبقية.

233
00:19:22,167 --> 00:19:26,901
لذلك لملء ذلك، نحن بحاجة للذهاب وتكون قادرة على إضافة

234
00:19:26,901 --> 00:19:31,358
معلومات إضافية في ملفات قالب مكونات رأس

235
00:19:31,358 --> 00:19:36,640
بحيث يمكن التنقل بين هذه المكونات المختلفة.

236
00:19:36,640 --> 00:19:43,350
العودة إلى المحرر لدينا، اسمحوا لي أن فتح ملف HeaderComponent.html.

237
00:19:43,350 --> 00:19:49,010
داخل هذا الملف HeaderComponent، نرى أن لدينا هذه الأزرار

238
00:19:49,010 --> 00:19:56,110
هنا التي يجب أن تمكننا من الانتقال إلى تلك المكونات المعينة هناك.

239
00:19:56,110 --> 00:20:02,050
حتى هنا، ونحن نأخذ مساعدة من توجيه سمة أخرى أن

240
00:20:02,050 --> 00:20:08,370
وحدة التوجيه توفر لنا تسمى RouterLink.

241
00:20:08,370 --> 00:20:13,289
لذلك سوف نقوم بتوريد

242
00:20:13,289 --> 00:20:17,984
RouterLink ك/home.

243
00:20:17,984 --> 00:20:22,968
مما يعني أنه بالنسبة لهذا الزر الخاص،

244
00:20:22,968 --> 00:20:26,171
وصلة المنزل في شريط الأدوات لدينا.

245
00:20:26,171 --> 00:20:30,334
عندما نضغط على ذلك، يجب أن يوجهني تلقائيًا إلى المنزل.

246
00:20:30,334 --> 00:20:36,640
بهذه الطريقة، يعرف تطبيق Angular الخاص بي أين يرسلني في هذه المرحلة.

247
00:20:36,640 --> 00:20:40,090
لذلك هذا هو المنزل هناك.

248
00:20:40,090 --> 00:20:44,420
الآن وبالمثل، اسمحوا لي أيضا إضافة واحدة للقائمة هنا.

249
00:20:45,590 --> 00:20:48,550
بالنسبة للقائمة، عند النقر على رابط القائمة هناك،

250
00:20:48,550 --> 00:20:54,020
يجب أن يأخذني إلى مكون القائمة.

251
00:20:54,020 --> 00:21:01,140
لذا فإن توجيه السمة RouterLink يمكّنني من تحديد، كما ترى

252
00:21:01,140 --> 00:21:08,010
هنا سلسلة حيث يمكنني تحديد المسار الذي يحتاج إلى إضافته.

253
00:21:09,010 --> 00:21:14,900
دعونا حفظ هذه التغييرات أيضا، ومن ثم الآن نلقي نظرة نهائية على طلبنا.

254
00:21:14,900 --> 00:21:21,021
الذهاب إلى تطبيقنا، والآن نرى أن يتم عرض مكون الصفحة الرئيسية هنا.

255
00:21:21,021 --> 00:21:25,426
عندما نضغط على مكون القائمة، نحن في القائمة.

256
00:21:25,426 --> 00:21:30,570
لذا لاحظ كيف انتقل طلبي تلقائيًا

257
00:21:30,570 --> 00:21:35,509
إلى مكون القائمة لإظهار العرض مع القائمة هنا.

258
00:21:35,509 --> 00:21:39,590
وأيضا إلقاء نظرة على شريط العناوين،

259
00:21:39,590 --> 00:21:46,670
لاحظ كيف يظهر شريط العناوين الآن المضيف المحلي: 4200/القائمة.

260
00:21:46,670 --> 00:21:51,670
مرة أخرى، يمكننا الانتقال مرة أخرى إلى المكون الرئيسي وإلى مكون القائمة،

261
00:21:51,670 --> 00:21:52,410
ذهابا وإيابا.

262
00:21:53,580 --> 00:21:59,230
لذلك هذا يدل على كيفية إضافة هذا التوجيه إلى التطبيق لدينا،

263
00:21:59,230 --> 00:22:04,940
ونحن قادرون على التنقل وإظهار وجهات نظر مختلفة داخل التطبيق لدينا.

264
00:22:04,940 --> 00:22:09,640
الآن، حول والاتصال، ونحن في طريقنا للقيام بذلك كجزء من

265
00:22:09,640 --> 00:22:14,090
تمرين آخر والمهمة التي تليها في وقت لاحق.

266
00:22:15,150 --> 00:22:20,485
هذا يكمل هذا التمرين حيث استخدمنا وحدة التوجيه Angular

267
00:22:20,485 --> 00:22:25,047
ثم قمنا بتكوين تطبيق Angular الخاص بنا لاستخدام مسارات مختلفة

268
00:22:25,047 --> 00:22:27,212
لإظهار طرق العرض المختلفة.

269
00:22:27,212 --> 00:22:29,240
هذا هو الوقت المناسب بالنسبة

270
00:22:29,240 --> 00:22:35,117
لك للقيام جيت الالتزام مع الرسالة أساسيات جهاز التوجيه الزاوي.

271
00:22:35,117 --> 00:22:36,115
[ موسيقى]