1
00:00:00,000 --> 00:00:08,745
الآن بعد أن حصلنا على فهم لتطبيقات صفحة واحدة،

2
00:00:08,745 --> 00:00:10,660
سنواصل العمل على

3
00:00:10,660 --> 00:00:14,490
تطبيقنا الزاوي الذي كنا نعمل في التدريبات حتى

4
00:00:14,490 --> 00:00:16,980
الآن ونطويره إلى

5
00:00:16,980 --> 00:00:21,535
تطبيق صفحة واحدة باستخدام دعم وحدة التوجيه الزاوي.

6
00:00:21,535 --> 00:00:25,110
لقد قمنا بالفعل بتضمين مكونات متعددة كجزء من

7
00:00:25,110 --> 00:00:28,770
تطبيقنا الزاوي في التمرين السابق، وقد قمنا بالفعل

8
00:00:28,770 --> 00:00:32,625
بتكوين تطبيقنا الزاوي لتكون قادرة على التوجيه

9
00:00:32,625 --> 00:00:37,410
بين مكونين مختلفين.

10
00:00:37,410 --> 00:00:40,970
الآن، سوف ندمج أكثر في تطبيقنا الزاوي

11
00:00:40,970 --> 00:00:44,960
ونطوره في التطبيق الزاوي الكامل جنبا إلى جنب مع

12
00:00:44,960 --> 00:00:49,040
الملاحة بين مختلف وجهات النظر

13
00:00:49,040 --> 00:00:53,790
التي تقدمها مختلف مكونات تطبيقنا.

14
00:00:53,800 --> 00:00:58,275
استمرارًا في تطبيقنا كما هو الآن،

15
00:00:58,275 --> 00:01:05,990
لدينا المنزل الذي يتم تقديمه عند الانتقال إلى تطبيقنا

16
00:01:05,990 --> 00:01:09,740
الآن ثم

17
00:01:09,740 --> 00:01:13,740
تم عرض قالب الصفحة الرئيسية بين الرأس والتذييل ثم عند الانتقال إلى القائمة،

18
00:01:13,740 --> 00:01:19,920
يتم عرض القائمة بين الرأس و تذييل الصفحة في طريقة العرض هنا.

19
00:01:19,920 --> 00:01:25,490
الآن، من الواضح أننا بحاجة إلى دمج المكونات الأخرى التي قمنا

20
00:01:25,490 --> 00:01:28,700
بتضمينها في تطبيقنا الزاوي

21
00:01:28,700 --> 00:01:32,715
لتطوير هذا كتطبيق زاوي كامل.

22
00:01:32,715 --> 00:01:36,135
في هذا التمرين، سنقوم بدمج ContactComponent،

23
00:01:36,135 --> 00:01:38,914
سنقوم بتحديث القالب الخاص بـ ContactComponent،

24
00:01:38,914 --> 00:01:43,190
سنقوم أيضًا بتحديث القالب الخاص بـ HomeComponent واتخاذ هذا

25
00:01:43,190 --> 00:01:48,600
خطوة إلى الأمام نحو تطبيقنا الزاوي الخاص بالصفحة الواحدة.

26
00:01:48,600 --> 00:01:52,585
دعونا نبدأ مع كونتاكتكومبوننت.

27
00:01:52,585 --> 00:01:56,630
للبدء، قم أولاً بنسخ القالب الخاص

28
00:01:56,630 --> 00:02:01,070
بـ ContactComponent الذي أعطيته لك في إرشادات التمرين ثم

29
00:02:01,070 --> 00:02:06,660
لصقه في ملف contactcomponent.html حتى نتمكن

30
00:02:06,660 --> 00:02:13,580
من مسح العرض الفعلي لـ ContactComponent لدينا بمزيد من التفصيل هنا.

31
00:02:13,580 --> 00:02:18,680
الآن، يمكنك أن ترى أنني قمت بقطع ولصق التعليمات البرمجية

32
00:02:18,680 --> 00:02:24,550
لملف القالب من التعليمات إلى contactComponent الخاص بي.

33
00:02:24,550 --> 00:02:27,650
سنكمل تكامل

34
00:02:27,650 --> 00:02:30,665
ContactComponent في تطبيقنا ثم سننظر في

35
00:02:30,665 --> 00:02:33,590
ما يبدو عليه ContactComponent ثم نعود

36
00:02:33,590 --> 00:02:36,940
وننظر بسرعة إلى هذا الرمز بعد ذلك بقليل.

37
00:02:36,940 --> 00:02:41,660
الآن، لدمج ContactComponent في تطبيقنا الزاوي،

38
00:02:41,660 --> 00:02:46,910
نحتاج إلى تضمين مسار إلى ContactComponent في طرقنا.

39
00:02:46,910 --> 00:02:52,270
لذلك، انتقل إلى ملف routes.ts مباشرة بعد القائمة،

40
00:02:52,270 --> 00:03:01,520
وأنا ذاهب إلى تضمين مسار آخر لكونتاكتكومبوننت وسوف تستخدم

41
00:03:01,520 --> 00:03:05,480
عنوان ورل كما اتصل بنا

42
00:03:05,480 --> 00:03:15,375
والمكون المقابل هو كونتاكتكومبوننت هنا.

43
00:03:15,375 --> 00:03:19,815
لذا، مع هذا، قمنا الآن بدمج ContactComponent

44
00:03:19,815 --> 00:03:24,725
في تطبيقنا ودعونا

45
00:03:24,725 --> 00:03:30,935
نحفظ التغييرات على هذا ومن ثم سنحتاج أيضًا إلى تحديث مكون الرأس وتحديث

46
00:03:30,935 --> 00:03:37,540
رابط في مكون الرأس لمساعدتنا على الانتقال إلى ContactComponent.

47
00:03:37,540 --> 00:03:43,680
لذا، سأقوم فقط بنسخ هذا من القائمة رابط في

48
00:03:43,680 --> 00:03:48,710
شريط أدوات مكون الرأس الخاص بي هناك ثم نسخ ذلك إلى

49
00:03:48,710 --> 00:03:53,960
ContactComponent ثم تحديثه كاتصال بنا.

50
00:03:53,960 --> 00:03:57,680
دعونا حفظ التغييرات على جميع الملفات ومن

51
00:03:57,680 --> 00:04:02,469
ثم إلقاء نظرة على التطبيق الناتج.

52
00:04:02,469 --> 00:04:05,725
الذهاب إلى التطبيق في متصفحنا،

53
00:04:05,725 --> 00:04:08,570
إذا انتقلنا الآن إلى ContactComponent،

54
00:04:08,570 --> 00:04:12,680
يمكننا أن نرى أن تفاصيل ContactComponent يتم عرضها

55
00:04:12,680 --> 00:04:16,790
هنا بين الرأس والتذييل كما نتوقع.

56
00:04:16,790 --> 00:04:18,590
لذلك، داخل ContactComponent،

57
00:04:18,590 --> 00:04:22,370
لدينا عنوان اتصل بنا

58
00:04:22,370 --> 00:04:26,390
هناك ثم بعض معلومات الموقع حيث قمت بعرض العنوان.

59
00:04:26,390 --> 00:04:28,490
لذلك، هذا يشبه العنوان الذي

60
00:04:28,490 --> 00:04:30,740
لدينا في التذييل لذلك أنا لن أشرح أنه

61
00:04:30,740 --> 00:04:36,050
بالتفصيل ثم لدينا جزء آخر هنا حيث نقوم بتضمين خريطة موقعنا.

62
00:04:36,050 --> 00:04:37,490
نحن لن نفعل ذلك في الوقت الحالي،

63
00:04:37,490 --> 00:04:41,990
ونحن في طريقنا إلى مجرد ترك فارغة وبعد ذلك أيضا ترى أن لدي

64
00:04:41,990 --> 00:04:48,150
ثلاثة أزرار التي قمت بتضمينها هنا للاتصال، سكايب، والبريد الإلكتروني.

65
00:04:48,150 --> 00:04:52,354
يتم تنشيط هذه الأزرار الثلاثة في تطبيقنا

66
00:04:52,354 --> 00:04:57,910
وأنا باستخدام زر حصيرة رفعت لتقديم هذه الأزرار الثلاثة.

67
00:04:57,910 --> 00:05:00,980
لذلك، يمكنك أن ترى أن هذه الأزرار تبدو مختلفة

68
00:05:00,980 --> 00:05:05,080
عن الأزرار الأخرى التي قمت بتضمينها في التطبيق الخاص بك هناك.

69
00:05:05,080 --> 00:05:10,870
لذلك، هذا هو عنصر زر أثار من المواد الزاوي لدينا هناك.

70
00:05:10,870 --> 00:05:14,195
لذلك، بعد أن رأيت ContactComponent

71
00:05:14,195 --> 00:05:17,675
وحقيقة أننا قادرون على الانتقال إلى ContactComponent.

72
00:05:17,675 --> 00:05:20,560
الآن، من المكونات الأخرى،

73
00:05:20,560 --> 00:05:22,730
دعونا نلقي نظرة سريعة على

74
00:05:22,730 --> 00:05:29,250
رمز HTML الذي قمنا بتضمينه للقالب الخاص بنا ContactComponent.

75
00:05:29,250 --> 00:05:33,335
الذهاب إلى contactcomponent.html، سترى أن لدينا

76
00:05:33,335 --> 00:05:38,720
عنوان هذه الصفحة المضمنة باستخدام هذا div

77
00:05:38,720 --> 00:05:42,965
هنا و div الثاني داخل هنا مع FxFlex

78
00:05:42,965 --> 00:05:48,020
يتضمن معلومات الموقع ثم هذا داخل معلومات الموقع،

79
00:05:48,020 --> 00:05:51,260
وأنا مرة أخرى تحديد div آخر مما سيسمح لي

80
00:05:51,260 --> 00:05:55,480
لتضمين طرق عرض متعددة في هذا div الآخر هنا.

81
00:05:55,480 --> 00:05:57,290
لذلك، داخل هذا، أنا تحديد

82
00:05:57,290 --> 00:06:00,410
ديف آخر مع عمود تخطيط الآثار وتأثيرات صف طبقة.

83
00:06:00,410 --> 00:06:09,675
لذا، هذه طريقة متداخلة لتحديد وجهات نظر CSS Flex هنا.

84
00:06:09,675 --> 00:06:11,270
لذلك، داخل هذا مرة أخرى،

85
00:06:11,270 --> 00:06:14,990
أنا باستخدام عرض ديف فليكسس 50 بحيث

86
00:06:14,990 --> 00:06:18,900
تحتل نصف ثم فكسفليكسس إزاحة 20 بكسل.

87
00:06:18,900 --> 00:06:26,300
لذلك، سيتم تهجير هذا العرض CSS إلى اليمين بمقدار 20 بكسل لذلك

88
00:06:26,300 --> 00:06:29,300
لدي بعض الهامش هناك ومن ثم لدينا

89
00:06:29,300 --> 00:06:33,800
العنوان المدرج هنا ثم أسفل هنا،

90
00:06:33,800 --> 00:06:36,080
يمكنك أن ترى أنه داخل div آخر،

91
00:06:36,080 --> 00:06:42,690
لدي علامة مع زر رفع حصيرة المرتبطة به.

92
00:06:42,690 --> 00:06:45,740
هذا هو ما يسبب الأزرار التي

93
00:06:45,740 --> 00:06:49,140
لدينا في الجزء السفلي من صفحة الاتصال هناك.

94
00:06:49,140 --> 00:06:51,050
إذاً، ثلاثة منهم هنا

95
00:06:51,050 --> 00:06:52,730
واحد لرقم الهاتف

96
00:06:52,730 --> 00:07:00,425
واحد لسكايب واحد للبريد الإلكتروني هنا وأيضا لاحظ أنني الاستفادة من

97
00:07:00,425 --> 00:07:04,010
الرموز الخط رهيبة لكل واحد منهم ثم

98
00:07:04,010 --> 00:07:08,350
خريطة موقعك في ديف آخر هنا.

99
00:07:08,350 --> 00:07:13,690
لذلك، كل من هذه أرفق داخل هذا div الخارجي الذي يتم تضمينه مرة أخرى داخل div.

100
00:07:13,690 --> 00:07:20,555
لذلك، طريقة متداخلة لتحديد تخطيطات مرنة لأجزاء مختلفة لدينا هنا.

101
00:07:20,555 --> 00:07:23,465
لذلك، هذا هو عن ذلك لكونتاكتكومبوننت.

102
00:07:23,465 --> 00:07:29,329
وقد أدمجنا ذلك الآن في تطبيقنا من صفحة واحدة.

103
00:07:29,329 --> 00:07:32,445
الآن، الذهاب إلى ديشسرفيس.

104
00:07:32,445 --> 00:07:36,440
الآن، في ديشسرفيس جنبا إلى جنب مع طريقة

105
00:07:36,440 --> 00:07:39,005
جيتدايز، وأنا ذاهب لتقديم طريقتين أخريين.

106
00:07:39,005 --> 00:07:42,350
طريقة واحدة تسمى GetDish،

107
00:07:42,350 --> 00:07:50,950
طبق معين ثم سأقوم بتحديد الطبق بمعرف محدد هنا.

108
00:07:50,950 --> 00:07:52,460
لذلك، سيكون المعرف

109
00:07:52,460 --> 00:08:01,885
وهذا من شأنه أن يحدد تعطيني الطبق مع معرف المقابلة لهذا الرقم.

110
00:08:01,885 --> 00:08:04,640
لذلك سيكون ذلك طريقة أخرى سأقوم بإضافتها

111
00:08:04,640 --> 00:08:09,870
وإضافة طريقة أخرى تسمى GetFeatureDish.

112
00:08:13,750 --> 00:08:17,495
لذا، فإن هذا الطبق المميز سوف يستخدم

113
00:08:17,495 --> 00:08:22,460
الخاصية المميزة التي أضفناها

114
00:08:22,460 --> 00:08:27,995
ثم يعيد الطبق الذي تم تعيين الميزة له إلى true.

115
00:08:27,995 --> 00:08:33,330
لذلك، هذه هي الطريقة التي يمكنك اختيار طبق واحد معين ومن ثم جعلها متاحة.

116
00:08:33,330 --> 00:08:37,970
الآن، السبب في أن لدي هذا العلم المميز هو أنه عندما يتم تعيين الميزة إلى true،

117
00:08:37,970 --> 00:08:41,680
سيتم تقديم هذا الطبق الخاص على HomeComponent.

118
00:08:41,680 --> 00:08:44,455
الآن، كيف نختار هذه الأطباق؟

119
00:08:44,455 --> 00:08:47,185
لذلك، دعونا نضيف في التعليمات البرمجية لهذا.

120
00:08:47,185 --> 00:08:49,050
لذلك، بالنسبة لـ getDish،

121
00:08:49,050 --> 00:08:57,650
أحتاج إلى إرجاع شيء من الأطباق الثابتة التي لدي بالفعل هناك.

122
00:08:57,650 --> 00:08:59,600
لذلك، من الأطباق الثابتة،

123
00:08:59,600 --> 00:09:05,525
سأستخدم طريقة جافا سكريبت للقيام بتصفية مصفوفة.

124
00:09:05,525 --> 00:09:09,470
لذا، فإن تصفية صفيف سيساعدني على تحديد

125
00:09:09,470 --> 00:09:13,565
العناصر فقط من المصفوفة التي

126
00:09:13,565 --> 00:09:16,985
تتطابق مع معايير معينة سيتم تحديدها

127
00:09:16,985 --> 00:09:21,530
داخل الفلتر هنا ومن ثم سأعود فقط أول واحد.

128
00:09:21,530 --> 00:09:25,050
الآن، يحدث ذلك عندما أقوم بتحديد معرف،

129
00:09:25,050 --> 00:09:28,960
فإنه سيحدد عنصرًا واحدًا فقط ولكن بعد ذلك سيصبح صفيفًا.

130
00:09:28,960 --> 00:09:33,150
لذلك، من هذا الصفيف، أحتاج إلى استخراج هذا العنصر في هذا الصفيف.

131
00:09:33,150 --> 00:09:37,320
لذلك، هذا هو السبب في أنني أستخدم داخل الأقواس صفر هناك.

132
00:09:37,320 --> 00:09:41,010
لذا، هذا سيساعدني في التعرف على هويته

133
00:09:41,010 --> 00:09:43,005
لذا، كيف يمكنني تصفية الأطباق الخاصة بي؟

134
00:09:43,005 --> 00:09:47,140
لذلك، لكل طبق في قائمتي من الأطباق،

135
00:09:47,140 --> 00:09:49,729
لذلك هذا هو المكان الذي سأستخدم فيه

136
00:09:49,729 --> 00:09:55,610
ميزة أخرى من typescript تسمى وظائف السهم.

137
00:09:55,610 --> 00:10:01,575
وظيفة السهم هي طريقة اختزال لكتابة وظيفة.

138
00:10:01,575 --> 00:10:04,090
لذا، إذا كنت معتادًا على كتابة الوظائف،

139
00:10:04,090 --> 00:10:06,100
بدلاً من كتابة الدالة بشكل متقن

140
00:10:06,100 --> 00:10:09,850
ثم داخل طبق بين قوسين وما إلى

141
00:10:09,850 --> 00:10:13,900
ذلك، يمكنني ببساطة كتابته في الحالات التي تكون فيها الوظيفة بسيطة

142
00:10:13,900 --> 00:10:27,305
جدًا، فمن السهل جدًا كتابة هذا كدالة سهم هنا.

143
00:10:27,305 --> 00:10:33,245
لذا، ما أحدده هنا هو تصفية مجموعة الأطباق واستخراج

144
00:10:33,245 --> 00:10:40,360
تلك العناصر فقط من الصفيف الذي معرف الطبق

145
00:10:40,360 --> 00:10:44,570
لذلك، يتم تحديد كل عنصر هنا من خلال طبق المعلمة هنا.

146
00:10:44,570 --> 00:10:47,090
لذلك، الذي يتطابق معرف الطبق مع

147
00:10:47,090 --> 00:10:50,360
المعرف الذي تم توفيره كمعلمة للطبق.

148
00:10:50,360 --> 00:10:53,810
لذا، بهذه الطريقة سوف تستخرج هذا الطبق المحدد من

149
00:10:53,810 --> 00:10:59,400
هذه الصفيف ثم تعيد هذا الطبق من طريقة getDish هذه.

150
00:10:59,710 --> 00:11:04,240
ساعدتني وظائف السهم في كتابة التعليمات البرمجية بطريقة أكثر بساطة.

151
00:11:04,240 --> 00:11:06,724
إذا كنت لا تحب وظائف السهم،

152
00:11:06,724 --> 00:11:09,710
فيمكنك كتابتها بالطريقة الأكثر تقليدية بالقول،

153
00:11:09,710 --> 00:11:16,870
«طبق الدالة»، ثم من هذا، ستعود dish.id triple يساوي id،

154
00:11:16,870 --> 00:11:19,005
لذلك سيؤدي ذلك إلى إرجاع Boolean.

155
00:11:19,005 --> 00:11:22,960
عندما يواجه المرشح حقيقيًا في الداخل هنا،

156
00:11:22,960 --> 00:11:27,115
سيتم اختيار تلك العناصر من الأطباق في الصفيف.

157
00:11:27,115 --> 00:11:31,980
لذا، هذا هو المكان الذي تأتي فيه معرفتك بجافا سكريبت لصالحك.

158
00:11:31,980 --> 00:11:34,060
لذلك، تحتاج إلى معرفة كيفية

159
00:11:34,060 --> 00:11:38,085
عمل فلتر جافا سكريبت لمساعدتك على فهم كيفية القيام بذلك.

160
00:11:38,085 --> 00:11:41,390
حسنًا، الآن بالمثل بالنسبة للطبق المميز،

161
00:11:41,390 --> 00:11:47,365
سأستخدم طريقة مشابهة للاستخراج من

162
00:11:47,365 --> 00:11:51,620
مجموعة الأطباق الخاصة بي باستخدام مرشح هنا ولكن المرشح الذي

163
00:11:51,620 --> 00:11:57,000
سأقوم بتحديده هنا سيكون مرة أخرى وظيفة السهم هنا.

164
00:11:58,410 --> 00:12:03,260
سوف تعتاد على وظائف السهم وبعد ذلك بمجرد أن تعتاد عليها،

165
00:12:03,260 --> 00:12:06,370
ثم عليك أن تدرك مدى بساطة هم على حق جدا.

166
00:12:06,370 --> 00:12:11,380
لذا، هنا طريقة اختيار لي

167
00:12:11,380 --> 00:12:20,445
هي خاصية dish.featured لأن هذا dish.feature بالفعل منطقية هناك.

168
00:12:20,445 --> 00:12:25,720
لذا، سيساعدني ذلك على إرجاع الطبق المميز.

169
00:12:25,720 --> 00:12:27,355
لذلك، أيا كان الطبق،

170
00:12:27,355 --> 00:12:29,120
وميزة الطبق صحيح.

171
00:12:29,120 --> 00:12:31,710
سيتم تصفية هذا الطبق الخاص من

172
00:12:31,710 --> 00:12:35,330
مجموعة الأطباق وبعد ذلك سيكون هناك يوم واحد فقط.

173
00:12:35,330 --> 00:12:38,280
على أي حال، يجب عليك التأكد من

174
00:12:38,280 --> 00:12:42,210
ذلك بحيث يمكنك تعيين مميزة فقط إلى true لأحد هؤلاء،

175
00:12:42,210 --> 00:12:50,630
ثم أستخدم هذا لأن هذا الفلتر سيعود صفيفًا فرعيًا من مجموعة الأطباق،

176
00:12:50,630 --> 00:12:52,300
لذلك أحتاج إلى تحديد هذا العنصر.

177
00:12:52,300 --> 00:12:55,600
سيكون هناك عنصر واحد واحد هناك في الفهرس صفر.

178
00:12:55,600 --> 00:12:59,150
لذلك، أنا باستخدام مؤشر الصفر لتحديد هذا العنصر وإرجاع

179
00:12:59,150 --> 00:13:03,680
ذلك من الحصول على طريقة طبق مميزة هنا.

180
00:13:03,680 --> 00:13:09,985
لذلك، أن يكمل التحديث إلى خدمة الطبق.

181
00:13:09,985 --> 00:13:15,140
لبناء قالب المنزل لدينا،

182
00:13:15,140 --> 00:13:21,195
ونحن في طريقنا إلى عرض على الصفحة الرئيسية طبق

183
00:13:21,195 --> 00:13:24,545
محدد، والترويج الحالي المحدد من قبل المطعم،

184
00:13:24,545 --> 00:13:29,785
وقائد شركة مختارة من قائمة القراء.

185
00:13:29,785 --> 00:13:34,260
زعيم الشركة التي تظهر على الصفحة الأولى

186
00:13:34,260 --> 00:13:38,550
سيكون جزءا من مهمتك التي تتبع هذا الدرس بالذات.

187
00:13:38,550 --> 00:13:40,380
لكننا سنقوم الآن بتضمين،

188
00:13:40,380 --> 00:13:45,775
لدينا طبق مميز والترويج المميز على الصفحة الأولى.

189
00:13:45,775 --> 00:13:50,170
لذلك، مما يعني أنني بحاجة إلى خدمة الترويج

190
00:13:50,170 --> 00:13:55,250
التي تعيد مجموعة من العروض الترويجية التي تجري من قبل هذا المطعم بالذات.

191
00:13:55,250 --> 00:14:01,095
لذلك، اسمحوا لي أن أضيف في خدمة الترقيات لطلبي.

192
00:14:01,095 --> 00:14:04,005
لذلك، للقيام بذلك، في المجلد المشترك،

193
00:14:04,005 --> 00:14:12,140
سأقوم بإنشاء ملف جديد يسمى promotion.ts.

194
00:14:12,560 --> 00:14:18,410
في العرض الترويج.ts، سأقوم بإنشاء فئة،

195
00:14:18,870 --> 00:14:29,125
ترقية فئة وإرجاع هذا العرض الترويجي هنا.

196
00:14:29,125 --> 00:14:32,460
لذا، ماذا تحتوي فئة الترقية هذه؟

197
00:14:32,460 --> 00:14:36,529
يحتوي على خاصية هوية،

198
00:14:36,529 --> 00:14:43,010
ثم يحتوي على اسم للترويج للمطعم.

199
00:14:43,010 --> 00:14:47,310
على سبيل المثال، العرض يمكن أن يكون مثل بوفيه عطلة نهاية الأسبوع.

200
00:14:47,310 --> 00:14:52,320
أو 10٪ من كل يوم واحد في

201
00:14:52,320 --> 00:14:57,845
وقت الغداء وأشياء من هذا القبيل يمكن أن تظهر على الصفحة الأولى لمطاعمك هناك.

202
00:14:57,845 --> 00:15:01,280
لذلك، اسم ثم سوف تشمل أيضا صورة،

203
00:15:01,280 --> 00:15:05,635
والتي هي أن تكون من نوع سلسلة عنوان ورل الصورة،

204
00:15:05,635 --> 00:15:10,625
ثم التسمية التي ستكون سلسلة.

205
00:15:10,625 --> 00:15:13,895
السعر أيضا سلسلة.

206
00:15:13,895 --> 00:15:15,330
الآن، العمل يعني،

207
00:15:15,330 --> 00:15:17,260
كنت لا ترى لي استخدامها في الوقت الراهن،

208
00:15:17,260 --> 00:15:25,780
ونحن سوف تجلب لهم في الاستخدام في واحدة من التدريبات في وقت لاحق ظهرت منطقية.

209
00:15:25,780 --> 00:15:29,965
لذلك، ترى العلامة المميزة تظهر مرة أخرى في العرض الترويجي أيضًا،

210
00:15:29,965 --> 00:15:34,960
ثم وصف السلسلة.

211
00:15:34,960 --> 00:15:38,380
لذلك، ترى أن الترويج منظم

212
00:15:38,380 --> 00:15:42,840
يشبه إلى حد كبير هيكل الطبق الذي رأيناه في وقت سابق.

213
00:15:42,840 --> 00:15:46,010
لذا، هذا هو صف الترقية هنا.

214
00:15:46,010 --> 00:15:48,090
الآن، جنبا إلى جنب مع فئة الترويج،

215
00:15:48,090 --> 00:15:50,980
وأنا بحاجة إلى إنشاء فئة أخرى أن

216
00:15:50,980 --> 00:16:00,615
تصدير مجموعة من الترويج يقول ثابت مع الترقيات هنا.

217
00:16:00,615 --> 00:16:04,240
لذا هنا، سأقوم باستيراد

218
00:16:06,920 --> 00:16:11,024
فئة الترويج

219
00:16:11,024 --> 00:16:18,400
من ملف.ts الترويجي،

220
00:16:18,400 --> 00:16:25,290
ثم أقوم بتصدير ثابت يسمى الترويج.

221
00:16:25,290 --> 00:16:32,395
لذا، ترى أنني أستخدم بنية مشابهة جدًا للأطباق هنا.

222
00:16:32,395 --> 00:16:36,290
لذا, عليك أن تبدأ في رؤية

223
00:16:36,660 --> 00:16:40,790
أن, هذا الهيكل الذي استخدمناه

224
00:16:40,790 --> 00:16:46,465
في وقت سابق للترقيات للأطباق مفيد أيضا لإعلان الترقيات.

225
00:16:46,465 --> 00:16:47,910
إذا كان لديك بنية مختلفة،

226
00:16:47,910 --> 00:16:50,990
سترى أنه مع القادة، سيكون الهيكل

227
00:16:50,990 --> 00:16:55,315
مختلفًا قليلاً عن كائن JavaScript هنا. الترقيات

228
00:16:55,315 --> 00:17:00,160
الآن، تفاصيل عرض ترويجي محدد أعطيته في التعليمات،

229
00:17:00,160 --> 00:17:02,790
لذا أقترح عليك نسخه ولصقه من

230
00:17:02,790 --> 00:17:05,550
هناك بدلاً من كتابة كل شيء هنا.

231
00:17:05,550 --> 00:17:07,390
لذلك، اسمحوا لي أن المضي قدما ونسخ ولصق

232
00:17:07,390 --> 00:17:11,800
هذا الكائن جافا سكريبت في هذا مصفوفة كائن جافا سكريبت هنا،

233
00:17:11,800 --> 00:17:13,510
لذلك هناك تذهب.

234
00:17:13,510 --> 00:17:20,475
العرض الترويجي يحتوي على كائن واحد فقط في الوقت الحالي.

235
00:17:20,475 --> 00:17:22,715
في المستقبل، يمكننا إضافة المزيد.

236
00:17:22,715 --> 00:17:26,375
عند هذه النقطة، لدي واحد فقط لذلك أضفته هناك،

237
00:17:26,375 --> 00:17:31,265
وسأستخدم ذلك وهذا هو العرض المميز لمطعمي هناك.

238
00:17:31,265 --> 00:17:33,045
هذا هو مجرد ترقية،

239
00:17:33,045 --> 00:17:35,820
لذلك اسمحوا لي أن تحديث تلك الترقيات،

240
00:17:35,820 --> 00:17:37,465
وهذا ما أحتاج.

241
00:17:37,465 --> 00:17:42,120
لذلك، أنا فقط ذاهب لحفظ التغييرات على ملف.ts الترويجية.

242
00:17:42,120 --> 00:17:46,820
بعد ذلك، سأقوم بإنشاء خدمة أخرى تسمى خدمة الترويج.

243
00:17:46,820 --> 00:17:53,285
لذلك للقيام بذلك، دعونا نذهب إلى سطر الأوامر في نوع موجه الأوامر

244
00:17:53,285 --> 00:18:02,005
ng توليد خدمات الاستطلاع/الترويج.

245
00:18:02,005 --> 00:18:05,105
لذا، يتم إنشاء خدمة الترويج هناك.

246
00:18:05,105 --> 00:18:08,500
لذلك، الآن PromotionService هو في المكان.

247
00:18:08,500 --> 00:18:13,575
لذلك، دعونا إضافة في ميزات للترقية.

248
00:18:13,575 --> 00:18:18,070
لذلك، انتقل إلى PromotionService،

249
00:18:18,070 --> 00:18:25,690
ترى أن PromotionService يتم تضمينها الآن في مجلد الخدمات الخاص بك هنا،

250
00:18:25,690 --> 00:18:28,615
لذلك نحن بحاجة إلى إعداد PromotionService.

251
00:18:28,615 --> 00:18:30,715
لذلك، في PromotionService،

252
00:18:30,715 --> 00:18:33,170
سأقوم باستيراد

253
00:18:37,170 --> 00:18:48,355
الترويج من المشاركة/الترويج،

254
00:18:48,355 --> 00:18:55,010
وفئة الترويج، وكذلك استيراد

255
00:18:57,000 --> 00:19:09,985
الترقيات من فئة الترقيات المشتركة/الترقيات هناك.

256
00:19:09,985 --> 00:19:11,885
الترقيات المستمرة من هناك.

257
00:19:11,885 --> 00:19:14,590
الآن، تماما كما كان لدينا لخدمة الطبق،

258
00:19:14,590 --> 00:19:19,840
نحن بحاجة إلى إنشاء ثلاث طرق داخل الترقيات Service.

259
00:19:19,840 --> 00:19:25,080
لذا، ما سأقوم به هو إنقاذ نفسي من المتاعب،

260
00:19:25,080 --> 00:19:27,450
سأذهب إلى dish.service،

261
00:19:27,450 --> 00:19:29,750
ثم قم بنسخ هذه الثلاثة فقط،

262
00:19:29,750 --> 00:19:33,445
ثم لصقها في خدمة الترويج الخاصة بي،

263
00:19:33,445 --> 00:19:35,570
ثم قم بتحرير الشفرة.

264
00:19:35,570 --> 00:19:38,965
حسنا، لذلك من خدمة الترويج،

265
00:19:38,965 --> 00:19:46,505
وأنا بحاجة إلى العودة getPromotions

266
00:19:46,505 --> 00:19:54,340
وهذا هو من نوع الترويج ومن ثم هذا سيعود الترقيات،

267
00:19:54,340 --> 00:20:00,670
ومن ثم الحصول على الثاني سيكون الترويج

268
00:20:00,670 --> 00:20:10,615
الذي يتلقى مرة أخرى معرف العرض

269
00:20:10,615 --> 00:20:20,830
الترويجي، لذلك أنا ذاهب للعودة الترقيات. promo.id هو معرف،

270
00:20:20,830 --> 00:20:26,780
ثم الحصول على عرض ترويجي.

271
00:20:26,780 --> 00:20:31,860
لذلك، يمكنك أن ترى أن هيكل PromotionService يشبه إلى حد كبير

272
00:20:31,860 --> 00:20:39,920
خدمة الصحون وهذا لن يكون نوع الترويج،

273
00:20:39,920 --> 00:20:41,875
وهذا سيعود

274
00:20:41,875 --> 00:20:52,145
الترقيات. مرشح الترويجي وهذا سيكون ترويج.speatures وهذا كل شيء.

275
00:20:52,145 --> 00:20:55,030
بلدي الترقيات الخدمة كلها جاهزة.

276
00:20:55,030 --> 00:20:59,695
الآن، أنا ذاهب للذهاب إلى مكون المنزل، وإعداد ذلك،

277
00:20:59,695 --> 00:21:02,115
بحيث في عنصر منزلي،

278
00:21:02,115 --> 00:21:07,560
وسوف عرض طبق مميز والترويج المميز.

279
00:21:07,560 --> 00:21:10,820
سيتم عرض المميزات/الطبق والميزات/الترويج في

280
00:21:10,820 --> 00:21:15,690
المكون المنزلي باستخدام مكون بطاقة المادة الزاوي.

281
00:21:15,690 --> 00:21:19,675
لذلك، نحن بحاجة أولا الحصول على البيانات في مكون المنزل لدينا،

282
00:21:19,675 --> 00:21:24,690
لذلك هذا ما سنفعله في مكونات المنزل نوع ملف البرنامج النصي هناك.

283
00:21:24,690 --> 00:21:29,630
لذلك، والذهاب إلى مكونات المنزل نوع ملف البرنامج النصي، component.ts المنزل.

284
00:21:29,630 --> 00:21:44,330
هنا، أنا بحاجة لاستيراد الطبق

285
00:21:44,330 --> 00:21:52,060
من المشاركة/طبق وأيضا طبق

286
00:21:52,060 --> 00:22:07,430
المقابلة. الخدمة من الخدمات/dish.service.

287
00:22:12,330 --> 00:22:17,495
حسنا، الآن أنا ذاهب أيضا أن تفعل نفس الشيء للترقيات،

288
00:22:17,495 --> 00:22:21,465
لذلك أنا مجرد الذهاب لنسخ ذلك ولصقه في هنا، ومن

289
00:22:21,465 --> 00:22:23,120
ثم تحرير هذا واحد،

290
00:22:23,120 --> 00:22:26,735
لذلك هذا سيكون الترويج، وهذا من شأنه أن

291
00:22:26,735 --> 00:22:31,315
يكون PromotionService،

292
00:22:31,315 --> 00:22:42,350
ومن ثم الترويج، ومن ثم هذا سيكون PromotionService.

293
00:22:42,790 --> 00:22:46,800
لذلك، مع هذا، لدينا كل من طبق

294
00:22:46,800 --> 00:22:50,205
وطبق الخدمات والخدمات الترويجية المتاحة لنا،

295
00:22:50,205 --> 00:22:52,485
ضمن عنصر المنزل لدينا.

296
00:22:52,485 --> 00:22:54,660
القادمة الآن إلى منشئ.

297
00:22:54,660 --> 00:23:01,180
يتيح الآن حقن الخدمتين هنا،

298
00:23:02,280 --> 00:23:12,590
وجعلها متاحة لتطبيقاتنا أو خدمة الطبق،

299
00:23:25,490 --> 00:23:30,240
وخدمة الترويج التي يتم حقنها هنا.

300
00:23:30,240 --> 00:23:34,610
لذلك، مع هذا، لدينا الوصول إلى كل من الخدمات.

301
00:23:34,610 --> 00:23:38,650
حتى الآن داخل طريقة نغونينيت،

302
00:23:38,650 --> 00:23:43,779
وأنا ذاهب لجلب اثنين من الأطباق المميزة.

303
00:23:43,779 --> 00:23:51,770
لذلك، أود أن أقول هذا.DishService.GetFeatureddish

304
00:23:51,770 --> 00:23:59,520
وأيضا الترويج،

305
00:24:03,690 --> 00:24:11,510
الترقيات و جيتفيتوريدبروميشن.

306
00:24:14,400 --> 00:24:18,820
فقط أن تكون كاملة،

307
00:24:18,820 --> 00:24:23,185
اسمحوا لي أن أعلن الطبق هنا اعتبارا من

308
00:24:23,185 --> 00:24:32,025
نوع طبق والترويج اعتبارا من نوع الترويج هنا.

309
00:24:32,025 --> 00:24:38,830
لذلك، يجب أن يوضح ذلك جميع القيم التي نستخدمها في الداخل هنا.

310
00:24:38,830 --> 00:24:46,665
لذلك، مع هذا، ونحن استكمال التحديث إلى مكونات المنزل لدينا ملف typescript.

311
00:24:46,665 --> 00:24:49,710
دعونا الآن التبديل إلى ملف القالب،

312
00:24:49,710 --> 00:24:55,815
ومن ثم إضافة في ورقتين لعرض الطبق المميز والترويج المميز.

313
00:24:55,815 --> 00:25:00,310
الآن، لهذا، لقد أعطيتك الرمز في التعليمات.

314
00:25:00,310 --> 00:25:02,995
لذلك، أنا فقط ذاهب لنسخ هذا الرمز ولصقه هنا.

315
00:25:02,995 --> 00:25:05,640
أنت تعرف بالفعل كيفية إنشاء بطاقات،

316
00:25:05,640 --> 00:25:10,590
لذلك سوف تكون قادرة على اتباع بسهولة التعليمات البرمجية التي ألصقها هنا.

317
00:25:10,590 --> 00:25:17,095
لذلك، يتم تحديث قالب مكونات المنزل أيضا،

318
00:25:17,095 --> 00:25:20,830
حتى تتمكن من رؤية أنه يحتوي على ورقتين هنا.

319
00:25:20,830 --> 00:25:26,550
لأحد، عرض الطبق والآخر يعرض العرض الترويجي هنا،

320
00:25:26,550 --> 00:25:33,030
ومغلقة داخل div FxLayout هنا.

321
00:25:33,030 --> 00:25:38,175
لذلك، دعونا حفظ التغييرات ومن ثم نلقي نظرة سريعة على طلبنا.

322
00:25:38,175 --> 00:25:41,095
بعد إنشاء خدمة الترويج،

323
00:25:41,095 --> 00:25:45,470
نحتاج أيضًا إلى تضمين خدمة الترويج في AppModule،

324
00:25:45,470 --> 00:25:47,750
وجعلها متاحة لتطبيقنا.

325
00:25:47,750 --> 00:25:49,840
لذا، أنا ذاهب إلى هنا،

326
00:25:49,840 --> 00:25:53,350
ثم استيراد

327
00:25:53,350 --> 00:26:00,950
خدمة الترويج هنا.

328
00:26:03,150 --> 00:26:07,915
بعد ذلك، أعلنت خدمة الترويج

329
00:26:07,915 --> 00:26:16,030
كأحد مقدمي الخدمات

330
00:26:16,030 --> 00:26:19,720
في ملف Appmodule.ts الخاص بي هنا.

331
00:26:19,720 --> 00:26:21,580
لذلك، في ملف AppModule،

332
00:26:21,580 --> 00:26:23,415
أنا بحاجة إلى كل من هذه،

333
00:26:23,415 --> 00:26:25,480
ومن ثم حفظ التغييرات.

334
00:26:25,480 --> 00:26:27,055
الذهاب إلى المتصفح،

335
00:26:27,055 --> 00:26:29,455
يمكنك الآن أن ترى أنه في المتصفح،

336
00:26:29,455 --> 00:26:34,150
المكون الرئيسي يظهر الآن ورقتين،

337
00:26:34,150 --> 00:26:40,580
واحدة للطبق المميز واحدة للترويج المميز هنا.

338
00:26:40,580 --> 00:26:43,850
لذلك، يمكنك أن ترى أن السيارتين معروضة هنا.

339
00:26:43,850 --> 00:26:50,505
يمكنني الآن الانتقال إلى صفحة القائمة،

340
00:26:50,505 --> 00:26:54,405
ثم أيضًا إلى صفحة جهة الاتصال.

341
00:26:54,405 --> 00:26:56,690
لا تزال صفحة «حول» غير موجودة،

342
00:26:56,690 --> 00:27:02,070
وستقوم بملء صفحة «حول» كجزء من مهمتك الثانية.

343
00:27:02,070 --> 00:27:07,490
إلقاء نظرة على نفس التطبيق على حجم شاشة أصغر،

344
00:27:07,490 --> 00:27:11,200
لذلك هذا هو شاشة iPhone 6 Plus.

345
00:27:11,200 --> 00:27:16,225
دعونا ننظر إلى المكون الرئيسي وشاشة iPhone 6 Plus.

346
00:27:16,225 --> 00:27:24,490
يمكنك أن ترى هذا الطبق المميز والترويج المميز على الصفحة الرئيسية هناك.

347
00:27:24,490 --> 00:27:29,820
ثم، القائمة التي رأيناها في وقت سابق،

348
00:27:29,820 --> 00:27:35,150
وأيضا صفحة الاتصال التي يتم عرضها هنا.

349
00:27:35,150 --> 00:27:41,395
لذلك، يمكنك أن ترى أن لدينا الآن تطبيق صفحة واحدة هو أكثر من ذلك بكثير تكوين.

350
00:27:41,395 --> 00:27:43,120
باستثناء حول،

351
00:27:43,120 --> 00:27:46,875
الذي سنفعله في المهمة الثانية.

352
00:27:46,875 --> 00:27:54,345
تغيير بسيط آخر يمكنك القيام به في ملف HTML لمكونات الرأس الخاص بك،

353
00:27:54,345 --> 00:27:57,470
هو أنه جنبا إلى جنب مع توجيه رابط جهاز التوجيه، فإن

354
00:27:57,470 --> 00:28:06,880
Route Angular يدعم أيضًا توجيهًا آخر يسمى RouteLinkActive.

355
00:28:06,880 --> 00:28:14,660
هذا يسمح لنا بتطبيق بعض الطبقات على عنصر معين هنا.

356
00:28:14,660 --> 00:28:16,305
لذلك، في هذه الحالة،

357
00:28:16,305 --> 00:28:20,090
إذا أصبح هذا الرابط نشطًا من أي شيء أحده هنا،

358
00:28:20,090 --> 00:28:24,980
فسيتم تطبيقه كفئة لهذا العنصر المحدد هناك.

359
00:28:24,980 --> 00:28:28,309
لذلك، سأقوم بتحديد فئة تسمى نشطة.

360
00:28:28,309 --> 00:28:32,280
حتى هنا، أنا تحديد روترلينككتيف مع نشط.

361
00:28:32,280 --> 00:28:35,265
لذا، إذا قمت بتعريف فئة CSS تسمى نشطة،

362
00:28:35,265 --> 00:28:39,300
فسيتم تطبيق الفصل على هذا الرابط،

363
00:28:39,300 --> 00:28:46,975
كلما تم عرض هذا العرض الخاص على صفحة التطبيقات هنا.

364
00:28:46,975 --> 00:28:53,250
سأقوم بنسخ نفس الشيء وتطبيقه على جميع الأزرار المتبقية،

365
00:28:53,250 --> 00:28:56,735
حيث قمت بتعريف رابط جهاز التوجيه بالفعل.

366
00:28:56,735 --> 00:28:59,600
لذلك، سأقوم بتطبيق فئة RouterLinkActive،

367
00:28:59,600 --> 00:29:04,195
إلى المنزل، والقائمة والاتصال بنا.

368
00:29:04,195 --> 00:29:08,535
الآن، هذا يعني أيضًا أنه يجب عليّ تحديد فئة CSS نشطة.

369
00:29:08,535 --> 00:29:14,360
لذلك، للقيام بذلك، سأذهب إلى ملف مكونات الرأس SESS،

370
00:29:14,360 --> 00:29:16,590
ثم حدد فئة نشطة هنا،

371
00:29:16,590 --> 00:29:21,400
لذلك سأحدد الطبقة النشطة هناك.

372
00:29:21,400 --> 00:29:22,870
لتحديد الفئة النشطة،

373
00:29:22,870 --> 00:29:31,220
سأقوم بإضافة متغير لون آخر هنا يسمى background-moredark.

374
00:29:33,030 --> 00:29:39,080
ثم، اللون المقابل هو 4527A0،

375
00:29:39,900 --> 00:29:47,480
وهذا هو نسخة أغمق من هذا اللون الداكن الخلفية، 4527A0.

376
00:29:47,480 --> 00:29:50,055
ثم، بالنسبة لبلدي النشط،

377
00:29:50,055 --> 00:29:52,720
ما سأقوم به هو، من الطبقة النشطة،

378
00:29:52,720 --> 00:29:57,725
وسوف تسمح للفئة تحديد خلفية،

379
00:29:57,725 --> 00:29:59,560
تعيين خلفية

380
00:29:59,560 --> 00:30:09,410
هذا العنصر إلى لون الخلفية أكثر ظلام.

381
00:30:10,170 --> 00:30:18,270
لذلك، عندما يتم تحديد هذا العرض المحدد وعرضه في الصفحة،

382
00:30:18,270 --> 00:30:21,630
فسيتم تطبيق هذه الفئة النشطة على

383
00:30:21,630 --> 00:30:24,670
علامة A المعينة

384
00:30:24,670 --> 00:30:30,340
هناك بواسطة التوجيه النشط لرابط الموجه الذي قمنا بتطبيقه هنا.

385
00:30:30,340 --> 00:30:34,750
الآن، ما هو التغيير الذي يسببه هذا على صفحتنا الإلكترونية.

386
00:30:34,750 --> 00:30:36,460
الآن، والانتقال إلى صفحة الويب الخاصة بنا،

387
00:30:36,460 --> 00:30:40,685
سنرى ما يقدمه هذا على صفحتنا الإلكترونية.

388
00:30:40,685 --> 00:30:43,390
الذهاب إلى طلبنا،

389
00:30:43,390 --> 00:30:45,360
ترى الآن أنه عندما نكون في

390
00:30:45,360 --> 00:30:52,125
وجهة نظر المنزل في المكون الرئيسي التي يتم عرضها هنا، وجهة نظر المقابلة.

391
00:30:52,125 --> 00:30:59,870
بعد ذلك، يحتوي الزر الصفحة الرئيسية هنا على لون خلفية مختلف يتم

392
00:30:59,870 --> 00:31:03,670
تطبيقه لأنه تمت إضافة الفئة النشطة لأننا

393
00:31:03,670 --> 00:31:08,150
نحدد RouterLinkActive إلى نشط هنا.

394
00:31:08,150 --> 00:31:09,510
لذلك، يتم تطبيق هذه الفئة.

395
00:31:09,510 --> 00:31:11,985
وبالمثل، عند تحديد القائمة

396
00:31:11,985 --> 00:31:17,205
، سترى أن القائمة يتم تمييزها في الرأس،

397
00:31:17,205 --> 00:31:20,025
ويتم عرض القوائم هنا،

398
00:31:20,025 --> 00:31:21,795
وبالمثل للمحتوى.

399
00:31:21,795 --> 00:31:29,035
الآن، وهذا يتيح لنا أن نرى في لمحة عن أي دفع معين عرض الواقع الافتراضي،

400
00:31:29,035 --> 00:31:31,760
في تطبيق صفحة واحدة لدينا.

401
00:31:31,760 --> 00:31:38,145
لذلك، هذا هو تعزيز العرض قليلا إضافية لواجهة المستخدم،

402
00:31:38,145 --> 00:31:42,255
التي تمكننا من رؤية بعض الميزات المثيرة للاهتمام.

403
00:31:42,255 --> 00:31:46,004
على الرغم من ذلك، فإنه لا يضيف الكثير إلى وظائف التطبيق،

404
00:31:46,004 --> 00:31:54,370
ولكن فقط إضافة بعض الميزات الصغيرة التي ستكون إضافة مفيدة إلى التطبيق الخاص بك.

405
00:31:54,370 --> 00:31:58,615
لذلك، مع هذا، ونحن استكمال هذا التمرين.

406
00:31:58,615 --> 00:32:02,275
في هذا التمرين، عملنا

407
00:32:02,275 --> 00:32:07,495
على دمج مكون الاتصال في تطبيق صفحة واحدة.

408
00:32:07,495 --> 00:32:15,800
قمنا أيضًا بتصميم بضع بطاقات قمنا بتضمينها في المكون المنزلي،

409
00:32:15,800 --> 00:32:20,180
وأضفنا في بعض الميزات الجديدة لتطبيقنا.

410
00:32:20,180 --> 00:32:28,310
هذا هو الوقت المناسب لك لحفظ التغييرات في مستودع Git الخاص بك مع الرسالة،

411
00:32:28,310 --> 00:32:31,520
الجزء 1 من تطبيق الصفحة الواحدة.