1
00:00:00,000 --> 00:00:06,150
الآن سوف ننتقل إلى

2
00:00:06,150 --> 00:00:09,045
التمرين التالي حيث سنقوم بإنشاء

3
00:00:09,045 --> 00:00:13,275
مكون جديد وإضافته إلى تطبيق Angular الخاص بنا.

4
00:00:13,275 --> 00:00:17,430
بعد ذلك، سنستفيد من هذا المكون للتحكم في جزء

5
00:00:17,430 --> 00:00:22,380
من الشاشة الذي قمنا بتصميمه لتطبيق Angular الخاص بنا.

6
00:00:22,380 --> 00:00:27,380
الشاشة لتطبيق الزاوي لدينا مملة جدا في الوقت الراهن.

7
00:00:27,380 --> 00:00:32,240
كل ما لدينا هو شريط أدوات في الأعلى ثم فارغة،

8
00:00:32,240 --> 00:00:35,595
شاشة بيضاء هنا، ولكن هذا يعطينا أيضا الأفكار.

9
00:00:35,595 --> 00:00:39,560
يمكننا الآن أخذ محتوى إضافي ثم

10
00:00:39,560 --> 00:00:43,970
وضعه في هذا الجزء من الشاشة هنا. كيف نفعل ذلك؟

11
00:00:43,970 --> 00:00:46,850
يمكننا إنشاء مكون جديد ومن ثم

12
00:00:46,850 --> 00:00:49,460
تسليم هذا الجزء من الشاشة إلى هذا المكون ونقول،

13
00:00:49,460 --> 00:00:53,450
«أنت تهتم بتقديم ما تريد في ذلك الجزء من الشاشة.»

14
00:00:53,450 --> 00:00:58,055
لذلك، سيتم التحكم في هذا العرض من قبل المكون الجديد.

15
00:00:58,055 --> 00:01:03,345
كيف نفعل ذلك؟ دعونا نذهب من خلال التمرين الآن.

16
00:01:03,345 --> 00:01:06,610
للبدء في التمرين،

17
00:01:06,610 --> 00:01:10,620
انتقل إلى تعليمات التمرين التي تتبع هذا الفيديو بالذات.

18
00:01:10,620 --> 00:01:12,555
ثم في تعليمات التمرين،

19
00:01:12,555 --> 00:01:15,680
سترى بعض موارد التمرين،

20
00:01:15,680 --> 00:01:18,290
وهو ملف مضغوط متاح لك.

21
00:01:18,290 --> 00:01:23,085
تحميل هذا الملف مضغوط إلى جهاز الكمبيوتر الخاص بك،

22
00:01:23,085 --> 00:01:28,320
وهذا سوف تعطيك ملفات images.zip.

23
00:01:28,320 --> 00:01:36,340
لذا، فقط احفظه كملف images.zip إلى مجلد التنزيلات الخاص بك

24
00:01:36,340 --> 00:01:39,140
، وفك ضغطه، ومن ثم سيعطيك هذا

25
00:01:39,140 --> 00:01:42,200
مجلد صور يحتوي على

26
00:01:42,200 --> 00:01:46,700
مجموعة من الصور التي سنقوم بالاستفادة منها في تطبيقنا.

27
00:01:46,700 --> 00:01:51,379
قم بفك ضغط ملف images.zip الذي قمت بتنزيله للتو،

28
00:01:51,379 --> 00:01:56,415
ونقل ملف images.zip هذا إلى مشروعك،

29
00:01:56,415 --> 00:01:58,130
وداخل مشروعك،

30
00:01:58,130 --> 00:02:02,695
إلى مجلد المصادر والأصول هنا.

31
00:02:02,695 --> 00:02:08,645
لذلك، مرة أخرى، نقل مجلد الصور التي تحصل عليها عن طريق

32
00:02:08,645 --> 00:02:15,110
فك ضغط ملف images.zip ثم نقل مجلد الصور هذا إلى التطبيق الخاص بك،

33
00:02:15,110 --> 00:02:17,465
لذلك، داخل التطبيق الخاص بك،

34
00:02:17,465 --> 00:02:22,670
تحت المصادر والأصول المجلد الفرعي.

35
00:02:22,670 --> 00:02:26,975
ستكون هذه الصور التي يتم توفيرها هنا

36
00:02:26,975 --> 00:02:31,690
متاحة للاستخدام داخل تطبيق Angular الخاص بك.

37
00:02:31,690 --> 00:02:37,310
الآن، سنقوم باستخدام CLI Angular

38
00:02:37,310 --> 00:02:43,025
لإنشاء مكون تلقائيًا لنا وإضافته إلى تطبيقنا Angular.

39
00:02:43,025 --> 00:02:45,750
لذلك، في المحطة،

40
00:02:45,750 --> 00:02:50,420
انتقل إلى المجلد الذي يحتوي على تطبيق Angular الخاص بك واكتب

41
00:02:50,420 --> 00:02:56,960
ng قائمة المكونات.

42
00:02:56,960 --> 00:03:00,570
لذلك، سنقوم بتسمية هذا المكون كما مينوكومبوننت.

43
00:03:00,570 --> 00:03:03,980
سيحتوي هذا MenuComponent

44
00:03:03,980 --> 00:03:08,390
على قائمة المطعم الذي نقوم بإعداد تطبيق Angular الخاص بنا.

45
00:03:08,390 --> 00:03:10,460
لذلك، عند كتابة

46
00:03:10,460 --> 00:03:11,975
هذا، سيؤدي ذلك تلقائيًا إلى إنشاء

47
00:03:11,975 --> 00:03:16,350
MenuComponent ثم إضافته إلى تطبيق Angular الخاص بك.

48
00:03:16,350 --> 00:03:19,970
سيتم إنشاء هذا MenuComponent وإضافته

49
00:03:19,970 --> 00:03:27,300
إلى مجلد المصدر/التطبيق/القائمة من التطبيق الخاص بك.

50
00:03:27,300 --> 00:03:33,050
لذلك، فإنه سيتم إنشاء مجموعة من الملفات في مجلد القائمة.

51
00:03:33,050 --> 00:03:35,550
لذلك، يمكنك أن ترى أنه يقوم بإنشاء ملف SCSS،

52
00:03:35,550 --> 00:03:38,310
ملف HTML، وملف TS،

53
00:03:38,310 --> 00:03:40,630
ثم شيء يسمى ملف TS الطيفي.

54
00:03:40,630 --> 00:03:42,495
سنعود إلى ذلك لاحقاً

55
00:03:42,495 --> 00:03:48,140
ثم، أيضًا، سيقوم بتحديث ملف.ts module.ts الخاص بالتطبيق.

56
00:03:48,140 --> 00:03:52,920
لذلك، دعونا نذهب ونلقي نظرة على ما حدث للتو عندما قمت

57
00:03:52,920 --> 00:03:58,415
بإنشاء هذا MenuComponent وإضافته إلى تطبيق Angular الخاص بك.

58
00:03:58,415 --> 00:04:01,040
دعونا نذهب إلى المحرر.

59
00:04:01,040 --> 00:04:03,930
القادمة إلى المحرر لدينا،

60
00:04:03,930 --> 00:04:05,245
ستلاحظ الآن أنه،

61
00:04:05,245 --> 00:04:06,650
في مجلد التطبيق،

62
00:04:06,650 --> 00:04:09,380
هناك مجلد جديد يسمى القائمة هناك،

63
00:04:09,380 --> 00:04:16,210
وهذا المجلد القائمة يحتوي على جميع الملفات ذات الصلة مينوكومبوننت هنا.

64
00:04:16,210 --> 00:04:22,385
يتبع CLI الزاوي دليل النمط القياسي الزاوي.

65
00:04:22,385 --> 00:04:25,715
يقترح دليل النمط أنه يجب وضع كل مكون

66
00:04:25,715 --> 00:04:29,765
في مجلده الخاص كما هو موضح هنا،

67
00:04:29,765 --> 00:04:34,220
وأنا أحب هذا إلى حد كبير لأنني مهووس جدا حول

68
00:04:34,220 --> 00:04:38,840
الحفاظ عليه التسلسل الهرمي نظيفة لمجلدات التطبيق الخاصة بي هنا.

69
00:04:38,840 --> 00:04:41,825
لذلك، هذا يعمل بشكل جيد جدا بالنسبة لي.

70
00:04:41,825 --> 00:04:44,545
بعض الناس يحبون التسلسل الهرمي المسطح،

71
00:04:44,545 --> 00:04:46,570
ولكن أنا فقط الحصول على الخلط مع ذلك الجزء.

72
00:04:46,570 --> 00:04:51,455
لذلك، أنا أفضل تخزين كل مكون في المجلد الخاص به.

73
00:04:51,455 --> 00:04:53,480
لذلك، فإنه يعمل بشكل جيد بالنسبة لي.

74
00:04:53,480 --> 00:04:58,430
الآن، إذا قمت بفتح ملف.ts module.ts

75
00:04:58,430 --> 00:05:02,390
التطبيق، ستلاحظ أنه قد تم تحديث ملف module.ts التطبيق

76
00:05:02,390 --> 00:05:06,810
عن طريق تضمين استيراد آخر في ملف module.ts التطبيق.

77
00:05:06,810 --> 00:05:09,435
لذلك، ترى أنه، جنبا إلى جنب مع AppComponent،

78
00:05:09,435 --> 00:05:15,235
تمت إضافة MenuComponent تلقائيا في كاستيراد إلى وحدة التطبيق الخاصة بك.

79
00:05:15,235 --> 00:05:17,570
لذا، هذا يعني أن MenuComponent

80
00:05:17,570 --> 00:05:20,470
متاح الآن لتطبيق Angular الخاص بك ليتم استخدامه.

81
00:05:20,470 --> 00:05:26,590
أيضا، إذا قمت بالتحقق من خاصية الإعلانات داخل الديكور نغمودول،

82
00:05:26,590 --> 00:05:29,160
سترى أنه في خاصية الإعلانات،

83
00:05:29,160 --> 00:05:31,465
بالإضافة إلى أبكومبوننت،

84
00:05:31,465 --> 00:05:34,120
لديك أيضا مينوكومبوننت المدرجة.

85
00:05:34,120 --> 00:05:37,270
هذا هو السبب في أنني أحب Angular CLI،

86
00:05:37,270 --> 00:05:40,035
لأنه يبسط كل هذا العمل بالنسبة لي.

87
00:05:40,035 --> 00:05:41,945
إذا كان لي أن تفعل ذلك باليد،

88
00:05:41,945 --> 00:05:48,710
وسوف تضطر إلى الذهاب يدويا إلى module.ts التطبيق ثم اكتب في كل هذا الرمز

89
00:05:48,710 --> 00:05:53,830
هناك، وهناك احتمال كبير أن ينتهي بي الأمر ارتكاب الأخطاء هناك.

90
00:05:53,830 --> 00:05:57,800
لذلك، نحن نوفر أنفسنا الكثير من المتاعب باستخدام كلي الزاوي.

91
00:05:57,800 --> 00:05:59,720
لذا، هذا هو السبب في أنني وقعت في الحب مع

92
00:05:59,720 --> 00:06:04,455
Angular CLI لإنشاء تطبيقات Angular الخاصة بي.

93
00:06:04,455 --> 00:06:07,965
لذلك، مع ذلك، قمنا بإعداد

94
00:06:07,965 --> 00:06:11,570
مينوكومبوننت لدينا لتكون متاحة لتطبيق الزاوي لدينا.

95
00:06:11,570 --> 00:06:14,505
الآن، أين أنا ذاهب للاستفادة من مينوكومبوننت؟

96
00:06:14,505 --> 00:06:21,460
أنا ذاهب للاستفادة من مينوكومبوننت داخل بلدي قالب أبكومبونينتس.

97
00:06:21,460 --> 00:06:25,275
لذلك، سأذهب إلى قالب AppComponents ثم قم

98
00:06:25,275 --> 00:06:29,810
بتضمين MenuComponent هنا في AppComponent الخاص بي.

99
00:06:29,810 --> 00:06:37,795
لذلك، فإن ذلك سوف يسلم أساسا هذا الجزء من الشاشة إلى بلدي مينوكومبوننت.

100
00:06:37,795 --> 00:06:38,980
كيف نفعل ذلك؟

101
00:06:38,980 --> 00:06:44,300
للقيام بذلك، سنلقي نظرة سريعة على ملف MenuComponent.ts.

102
00:06:44,300 --> 00:06:47,425
لذلك، عند فتح الملف MenuComponent.ts،

103
00:06:47,425 --> 00:06:54,225
سترى أن محدد MenuComponent قد تم تعريفه كقائمة التطبيق.

104
00:06:54,225 --> 00:07:02,615
لذا، هذا هو اسم المحدد القياسي الذي يعطيه CLI Angular للمكونات الخاصة بك.

105
00:07:02,615 --> 00:07:04,840
يمكنك تغيير هذا إذا كنت تريد،

106
00:07:04,840 --> 00:07:07,970
ولكن أيا كان المحدد الذي تحدده هنا، من

107
00:07:07,970 --> 00:07:15,670
شأنه أن يشكل العلامات التي تستخدمها لتضمينه في ملف القالب الخاص بك.

108
00:07:15,670 --> 00:07:20,195
لذلك، والعودة إلى AppComponent.html،

109
00:07:20,195 --> 00:07:23,795
الآن، إذا كنت ترغب في تضمين ملف القائمة هنا،

110
00:07:23,795 --> 00:07:24,930
لذلك سأقول فقط،

111
00:07:24,930 --> 00:07:31,775
علامة القائمة التطبيق وفويلا،

112
00:07:31,775 --> 00:07:35,360
يتم تسليم هذا الجزء من الشاشة الآن إلى مينوكومبوننت بلدي،

113
00:07:35,360 --> 00:07:40,640
والامر متروك لمينوكومبوننت أن تقرر ما يريد أن يضع في هناك.

114
00:07:40,640 --> 00:07:42,420
لذلك، مهما تم تعريفه،

115
00:07:42,420 --> 00:07:49,535
سيتم وضع قالب MenuComponents في مكانه هنا.

116
00:07:49,535 --> 00:07:53,630
لذلك، الآن، كل ما تبقى لنا هو الذهاب وإعداد

117
00:07:53,630 --> 00:07:58,695
مينوكومبوننت لدينا لإظهار المعلومات المناسبة بالنسبة لنا.

118
00:07:58,695 --> 00:08:00,885
دعونا حفظ التغييرات،

119
00:08:00,885 --> 00:08:04,825
وبعد ذلك سوف ننتقل إلى

120
00:08:04,825 --> 00:08:11,715
الخطوة التالية حيث سنقوم بإنشاء القائمة لمطعمنا باستخدام MenuComponent.

121
00:08:11,715 --> 00:08:14,845
قبل أن أفعل ذلك،

122
00:08:14,845 --> 00:08:17,625
ما سأقوم به هو،

123
00:08:17,625 --> 00:08:19,830
انتقل إلى مجلد التطبيق هنا،

124
00:08:19,830 --> 00:08:22,090
ثم في مجلد التطبيق،

125
00:08:22,090 --> 00:08:29,660
سأقوم بإنشاء مجلد فرعي جديد واسمه كمجلد فرعي مشترك.

126
00:08:29,660 --> 00:08:34,015
الآن، أي ملفات سأقوم بمشاركتها عبر مكونات مختلفة،

127
00:08:34,015 --> 00:08:37,040
سأقوم بوضعها في المجلد المشترك هنا.

128
00:08:37,040 --> 00:08:39,160
الآن، داخل المجلد المشترك،

129
00:08:39,160 --> 00:08:45,895
سأقوم بإنشاء ملف جديد باسم dish.ts.

130
00:08:45,895 --> 00:08:51,650
داخل هذا dish.ts، سأقوم بإنشاء فئة لتحديد

131
00:08:51,650 --> 00:08:59,050
طبق وجعله متاحًا للمكونات المتبقية لاستخدامها.

132
00:08:59,050 --> 00:09:02,555
لذلك، لتحديد فئة تيبسكريبت هنا،

133
00:09:02,555 --> 00:09:04,240
سأقول التصدير،

134
00:09:04,240 --> 00:09:07,525
لذلك أنا تصدير هذه الفئة تيبسكريبت هنا،

135
00:09:07,525 --> 00:09:13,550
فئة التصدير، وبعد ذلك سوف تسمية الطبقة كطبق.

136
00:09:13,550 --> 00:09:16,230
داخل فئة الطبق هذه،

137
00:09:16,230 --> 00:09:20,175
يمكنني الآن تحديد خصائص مختلفة.

138
00:09:20,175 --> 00:09:21,550
لذلك، بالنسبة لفئة الطبق،

139
00:09:21,550 --> 00:09:23,050
سأحدد خاصية واحدة،

140
00:09:23,050 --> 00:09:27,425
وهي معرّف، والذي أعرّفه كسلسلة.

141
00:09:27,425 --> 00:09:31,330
الآن، لاحظ، إذا كنت قادمًا من عالم جافا سكريبت،

142
00:09:31,330 --> 00:09:35,975
في JavaScript، لا تحتاج إلى تحديد نوع أي متغير.

143
00:09:35,975 --> 00:09:43,380
يجلب TypeScript هذا المرفق لك لتحديد النوع لكل متغير.

144
00:09:43,380 --> 00:09:46,405
لذا، إذا قمت بتحديد الاسم والعمود والسلسلة،

145
00:09:46,405 --> 00:09:51,785
فهذا يعني أن متغير الاسم سيكون دائمًا من نوع السلسلة.

146
00:09:51,785 --> 00:09:55,595
لذا، إذا حاولت تعيين عدد صحيح للاسم،

147
00:09:55,595 --> 00:09:58,400
فسيقوم مترجم TypeScript

148
00:09:58,400 --> 00:10:01,850
بالتقاط ذلك تلقائيًا لك ثم يخبرك بوجود خطأ.

149
00:10:01,850 --> 00:10:04,855
هذا هو السبب، باستخدام TypeScript،

150
00:10:04,855 --> 00:10:08,155
يمكنك تقليل عدد الأخطاء التي قد تسببها.

151
00:10:08,155 --> 00:10:11,850
جافا سكريبت تقليديا لا تفعل هذا

152
00:10:11,850 --> 00:10:16,790
التحقق من الخطأ لأنه ليس لديها أي مفهوم لأنواع البيانات.

153
00:10:16,790 --> 00:10:22,025
ولكن إذا كنت قادمًا من لغة برمجة تقليدية مثل C ++ أو Java،

154
00:10:22,025 --> 00:10:24,945
فأنت على دراية كبيرة بأنواع البيانات وأنواع

155
00:10:24,945 --> 00:10:28,565
البيانات البدائية وأنواع

156
00:10:28,565 --> 00:10:33,290
أخرى من أنواع البيانات التي تم تعريفها بالفعل في اللغة.

157
00:10:33,290 --> 00:10:41,315
يجلب TypeScript هذه الميزة إلى JavaScript أو بالأحرى كجزء من TypeScript،

158
00:10:41,315 --> 00:10:47,865
والتي تمكنك من تحديد المتغيرات وإرفاق أنواع بتلك المتغيرات،

159
00:10:47,865 --> 00:10:49,950
وبالتالي اسم TypeScript.

160
00:10:49,950 --> 00:10:51,500
لذلك، بالنسبة للطبق،

161
00:10:51,500 --> 00:10:53,970
سأقوم بإنشاء خاصية اسم.

162
00:10:53,970 --> 00:10:57,870
ثم سأقوم بإنشاء خاصية صورة،

163
00:10:57,870 --> 00:10:59,640
وهي أيضًا سلسلة.

164
00:10:59,640 --> 00:11:03,710
ستكون سلسلة الصور هذه عبارة عن سلسلة تشير

165
00:11:03,710 --> 00:11:08,635
إلى عنوان URL للصورة التي سأستخدمها لهذا الطبق المعين.

166
00:11:08,635 --> 00:11:18,230
ثم سوف تحديد فئة لهذا الطبق كما أيضا سلسلة أخرى واردة كما منطقية،

167
00:11:18,230 --> 00:11:21,130
تسمية كسلسلة.

168
00:11:21,150 --> 00:11:31,810
السعر كسلسلة ثم وصف كسلسلة.

169
00:11:31,810 --> 00:11:37,695
لذلك، هذه هي الخصائص التي أربطها مع فئة الطبق.

170
00:11:37,695 --> 00:11:43,440
لذلك، وهذا سوف يحدد أطباق مختلفة في قائمتي من مطعمي،

171
00:11:43,440 --> 00:11:48,060
ولكل طبق أحتاج إلى تحديد كل هذه الخصائص المختلفة.

172
00:11:48,060 --> 00:11:49,325
الآن، لماذا أحتاج ذلك؟

173
00:11:49,325 --> 00:11:54,400
هذا سيساعدني على بناء قائمة الطعام لمطعمي كما سترون قريباً

174
00:11:54,400 --> 00:12:02,890
لذلك، مع هذا، ونحن استكمال تعريف صفي هناك.

175
00:12:02,890 --> 00:12:06,940
دعونا حفظ التغييرات على ملف dish.ts.

176
00:12:06,940 --> 00:12:11,300
الآن، هذا الملف dish.ts تصدير فئة.

177
00:12:11,300 --> 00:12:15,820
الآن، يمكنني استيراد هذه الفئة إلى أي من

178
00:12:15,820 --> 00:12:22,485
ملفات البرنامج النصي نوع المكون من طلبي.

179
00:12:22,485 --> 00:12:28,550
بعد ذلك، سأقوم بالتبديل إلى ملف menu.component.ts الخاص بي.

180
00:12:28,550 --> 00:12:34,484
داخل ملف menu.component.ts بالإضافة إلى استيراد المكون،

181
00:12:34,484 --> 00:12:38,420
سأرى أيضًا أنك تقوم باستيراد OnInit هناك.

182
00:12:38,420 --> 00:12:41,885
سنأتي إلى جزء أونينيت في واحدة من التدريبات في وقت لاحق.

183
00:12:41,885 --> 00:12:45,475
سأشرح ماذا يفعل ذلك في تمرين لاحق

184
00:12:45,475 --> 00:12:53,820
سنقوم أيضًا باستيراد الفئة الجديدة التي أنشأناها تسمى فئة الطبق.

185
00:12:53,820 --> 00:12:56,160
لماذا نقوم باستيراد فئة الطبق هذه؟

186
00:12:56,160 --> 00:13:03,180
حتى نتمكن من استخدام ذلك كنوع لمتغير أقوم بتعريفه هنا.

187
00:13:03,180 --> 00:13:04,850
إذاً، أين صف الطبق هذا؟

188
00:13:04,850 --> 00:13:13,955
هو في.. /مشتركة/مجلد الطبق.

189
00:13:13,955 --> 00:13:17,890
لذلك، هذا هو في مجلد الطبق المشترك أعلاه هناك.

190
00:13:17,890 --> 00:13:22,460
ثم سترى أننا حددنا مكون القائمة هنا.

191
00:13:22,460 --> 00:13:23,640
لذلك، يمكنك أن ترى أنه يقول،

192
00:13:23,640 --> 00:13:27,950
«مكون قائمة فئة التصدير» ثم يقول، «تنفيذ على ذلك».

193
00:13:27,950 --> 00:13:30,630
سنعود إلى ذلك بعد قليل

194
00:13:30,630 --> 00:13:37,130
ترى أيضا أن هناك منشئ وهناك طريقة واحدة أخرى هنا تسمى NGonIt.

195
00:13:37,130 --> 00:13:40,170
سنستخدم هذه في بعض التدريبات اللاحقة

196
00:13:40,170 --> 00:13:42,970
لذلك، دعونا فقط ترك الأمر هناك على هذا النحو ونحن سوف

197
00:13:42,970 --> 00:13:46,565
نعود لفهم ما هو ذلك في فترة قصيرة.

198
00:13:46,565 --> 00:13:48,940
أيضا، لاحظ أن لهذا المكون،

199
00:13:48,940 --> 00:13:52,040
يتم تعريف القالب في عنصر القائمة نقطة HTML،

200
00:13:52,040 --> 00:13:56,070
وعناوين URL نمط المعرفة هناك.

201
00:13:56,070 --> 00:14:02,170
الآن، بالإضافة إلى ذلك، في فئة مكون القائمة الخاصة بي،

202
00:14:02,170 --> 00:14:07,100
سأقوم بتضمين متغير جديد يسمى

203
00:14:07,100 --> 00:14:14,660
الأطباق التي ستكون مجموعة من نوع الطبق.

204
00:14:14,660 --> 00:14:21,540
حسناً؟ ثم أنا ذاهب ببساطة لتشمل مجموعة من

205
00:14:21,540 --> 00:14:29,955
الأطباق في بلدي متغير الأطباق التي قمت بتعريفها هنا.

206
00:14:29,955 --> 00:14:35,040
الآن، لكتابة كل شيء في اليد سوف يستغرق لي الكثير من الوقت.

207
00:14:35,040 --> 00:14:39,060
لذلك بدلا من ذلك، ما أود أن أقترح عليك القيام به هو مجرد الذهاب ونسخ

208
00:14:39,060 --> 00:14:45,780
المحتوى مباشرة من التعليمات التي تتبع هذا الفيديو.

209
00:14:45,780 --> 00:14:47,350
إذاً، هذا ما سأفعله

210
00:14:47,350 --> 00:14:50,810
ثم عد ولصق هذا هنا.

211
00:14:50,810 --> 00:14:55,720
يمكنك الآن أن ترى أن قمت بقطع ولصق المعلومات

212
00:14:55,720 --> 00:15:00,120
لجميع أطباقي من التعليمات هنا.

213
00:15:00,120 --> 00:15:07,045
لذلك، هذا يكمل مجموعة من جميع الأطباق التي تم تعريفها في تعليماتي.

214
00:15:07,045 --> 00:15:11,035
لذلك، وهذا هو أسهل طريقة للحصول على عقد من هذه المعلومات.

215
00:15:11,035 --> 00:15:13,525
لذلك، مجرد قطع ولصقه من هناك.

216
00:15:13,525 --> 00:15:16,800
الآن، لاحظ أنه لهذا الطبق،

217
00:15:16,800 --> 00:15:20,885
كل واحد منهم هو كائن جافا سكريبت هنا.

218
00:15:20,885 --> 00:15:25,240
لذلك، يمكن تعيين ذلك في فئة البرنامج النصي نوع المقابلة هناك.

219
00:15:25,240 --> 00:15:28,700
لذلك، يمكنك أن ترى أن كل كائن جافا سكريبت له خصائص هناك،

220
00:15:28,700 --> 00:15:35,245
وهذه الخصائص تتطابق تماما مع الخصائص التي قمت بتعريفها لفئة الطبق الخاص بي.

221
00:15:35,245 --> 00:15:37,080
لذا، بمجرد تحديد هذا،

222
00:15:37,080 --> 00:15:39,430
ستصبح هذه الأطباق الآن مجموعة من

223
00:15:39,430 --> 00:15:42,020
الأطباق وهذا سيصبح متاحًا

224
00:15:42,020 --> 00:15:48,420
لي لاستخدامه عند تحديد قالب HTML الخاص بي لقائمتي.

225
00:15:48,420 --> 00:15:53,715
دعونا حفظ التغييرات التي قمنا بها حتى الآن ومن ثم سنقوم

226
00:15:53,715 --> 00:15:59,410
بفتح ملف menu.component.html.

227
00:15:59,410 --> 00:16:02,580
لذلك، سنذهب إلى ملف menu.component.html.

228
00:16:02,580 --> 00:16:06,280
سترى أنه في ملف menu.component.html،

229
00:16:06,280 --> 00:16:11,390
لديك حاليًا فقط P مع القائمة تعمل هنا.

230
00:16:11,390 --> 00:16:17,390
لذلك، إذا قمت بلصقه هناك ثم رؤية التطبيق يعمل،

231
00:16:17,390 --> 00:16:20,500
كنت قد رأيت فقط هذه القائمة تعمل على الشاشة.

232
00:16:20,500 --> 00:16:25,640
أنا ذاهب لاستبدال هذا مع رمز القالب الخاص بي هنا.

233
00:16:25,640 --> 00:16:31,230
هذا هو المكان الذي سأخذ مساعدة من تخطيط المرن الزاوي لمساعدتي على

234
00:16:31,230 --> 00:16:37,125
وضع المحتوى الخاص بي بشكل جيد في شاشتي.

235
00:16:37,125 --> 00:16:38,885
لذلك، للبدء،

236
00:16:38,885 --> 00:16:41,490
سأبدأ مع ديف،

237
00:16:41,490 --> 00:16:46,480
والتي سوف أطبق فئة تسمى الحاوية.

238
00:16:46,480 --> 00:16:49,710
سأقوم بتعريف فئة الحاوية باستخدام

239
00:16:49,710 --> 00:16:55,360
بعض رموز CSS في وقت لاحق قليلاً في هذا التمرين.

240
00:16:55,360 --> 00:16:57,715
لذلك، سوف أطبق حاوية الصف هنا.

241
00:16:57,715 --> 00:17:04,640
سأقوم أيضًا بتعريف خاصية تسمى fxlayout.

242
00:17:04,640 --> 00:17:07,545
سمة تسمى fxlayout.

243
00:17:07,545 --> 00:17:10,205
الآن، هذا fxlayout هو سمة

244
00:17:10,205 --> 00:17:15,015
أن تخطيط المرن الزاوي يسمح لي بالتطبيق على div.

245
00:17:15,015 --> 00:17:20,295
يحدد هذا ما إذا كان

246
00:17:20,295 --> 00:17:25,440
يجب وضع المحتوى المختلف الذي أدرجه داخل تلك div إما أفقياً أو رأسياً.

247
00:17:25,440 --> 00:17:28,755
لذا، سأحدد هذا ليكون عمودًا.

248
00:17:28,755 --> 00:17:32,675
لذلك، مهما كان المحتوى الذي

249
00:17:32,675 --> 00:17:36,105
أدرجه داخل هذا div، سيتم وضعه عموديًا أسفل الآخر على شاشتي.

250
00:17:36,105 --> 00:17:43,855
إذا كنت قد رأيت طريقة الشبكة للعمل مع المحتوى في Bootstrap،

251
00:17:43,855 --> 00:17:47,100
فسترى أن هذا يخبرني بشكل أساسي أنني

252
00:17:47,100 --> 00:17:50,970
سأضع كل شيء في عمود واحد هناك.

253
00:17:50,970 --> 00:17:55,700
لا تخلط بين هذا العمود وعمود Bootstrap من شبكة Bootstrap.

254
00:17:55,700 --> 00:17:57,185
إنهما شيئان مختلفان

255
00:17:57,185 --> 00:18:01,290
هنا، السمة هي fxlayout وأحدد العمود.

256
00:18:01,290 --> 00:18:03,240
يمكنني أيضًا تحديد هذا كصف،

257
00:18:03,240 --> 00:18:07,470
مما يعني أنه سيتم وضع المحتوى أفقيًا.

258
00:18:07,470 --> 00:18:14,590
الآن أيضا، سمة واحدة أخرى أنا ذاهب لتحديد لهذا هو فكسلايوتغاب،

259
00:18:14,590 --> 00:18:18,705
والتي سوف تحدد كما 10 بكسل.

260
00:18:18,705 --> 00:18:23,330
لذلك، ما يعنيه هذا هو أنه أيا كان المحتوى الذي أدرجه هنا

261
00:18:23,330 --> 00:18:27,690
سيتم فصله عن بعضها البعض بواسطة فجوة 10 بكسل بين كل واحد منهم.

262
00:18:27,690 --> 00:18:33,745
من المعرفة بوتسترابس، ترى ما هو قطع هنا.

263
00:18:33,745 --> 00:18:38,050
هذا يحدد فصل قطع بين

264
00:18:38,050 --> 00:18:42,925
قطعتين من المحتوى في قالب التطبيق الخاص بي.

265
00:18:42,925 --> 00:18:46,945
لذلك، مع هذا، سنقوم بإغلاق div هنا.

266
00:18:46,945 --> 00:18:49,080
الآن، داخل هذا div،

267
00:18:49,080 --> 00:18:57,735
سأقوم بتعريف المحتوى الفعلي الذي سيذهب إلى ملف menu.component.html الخاص بي.

268
00:18:57,735 --> 00:19:04,035
الآن هنا، أنا ذاهب للاستفادة من عنصر آخر أن

269
00:19:04,035 --> 00:19:10,745
تصميم المواد يوفر لي يسمى كعنصر قائمة حصيرة.

270
00:19:10,745 --> 00:19:14,470
لذا، يسمح لي هذا المكون بإنشاء قائمة

271
00:19:14,470 --> 00:19:19,215
بالعناصر التي أقوم بتضمينها في القالب الخاص بي هنا.

272
00:19:19,215 --> 00:19:25,360
لذلك، هذا هو عنصر قائمة المواد الزاوي.

273
00:19:25,360 --> 00:19:30,980
من Bootstrap، لاحظت أنه في Bootstrap كان لدينا كائن الوسائط.

274
00:19:30,980 --> 00:19:36,430
لذا، فإن قائمة حصيرة مثل كائن الوسائط بمعنى ما من Bootstrap.

275
00:19:36,430 --> 00:19:39,470
الآن لهذا، أنا ذاهب لتطبيق فئة،

276
00:19:39,470 --> 00:19:42,095
سمة تسمى FxFlex.

277
00:19:42,095 --> 00:19:49,990
الآن، ما يعنيه هذا هو أن كل شيء سيتم التعامل معه كوحدة واحدة أو قطعة واحدة من

278
00:19:49,990 --> 00:19:58,180
المحتوى الذي سيتم وضعه من خلال تخطيط المرن الخاص بي هنا.

279
00:19:58,180 --> 00:20:01,100
لذا، إذا كنت معتادًا على تخطيط CSS المرن.

280
00:20:01,100 --> 00:20:05,505
لذلك، هذا هو جزء واحد من المحتوى الذي سيتم وضعه من خلال تخطيط CSS المرن الخاص بي.

281
00:20:05,505 --> 00:20:09,420
لذا، قم بتطبيق FxFlex

282
00:20:09,420 --> 00:20:16,610
هنا، ثم داخل هنا سأقوم بتعريف عنصر قائمة الحصيرة.

283
00:20:16,610 --> 00:20:18,380
لذلك، هذا هو عنصر القائمة هنا.

284
00:20:18,380 --> 00:20:22,250
لذلك، من معرفة HTML الخاصة بك،

285
00:20:22,250 --> 00:20:28,090
إذا كانت علامة LI التي تستخدمها في HTML مشابهة لهذا هنا.

286
00:20:28,090 --> 00:20:31,240
لذلك، هذا هو عنصر قائمة ملغ هنا.

287
00:20:31,240 --> 00:20:34,705
لذلك من الواضح، داخل عنصر القائمة هذا،

288
00:20:34,705 --> 00:20:39,220
أنت ذاهب إلى تحديد قائمة الأشياء.

289
00:20:39,220 --> 00:20:45,750
الآن، يوفر الزاوي بعض التوجيهات الهيكلية التي يمكنك تطبيقها

290
00:20:45,750 --> 00:20:53,455
على علاماتك هنا والتي تسمح لك بإنشاء المحتوى الخاص بك.

291
00:20:53,455 --> 00:20:58,375
الآن، أنا ذاهب لاستخدام توجيه هيكلي واحد يسمى نغفور.

292
00:20:58,375 --> 00:21:01,990
سنرى كيف نستخدمها في هذا القالب.

293
00:21:01,990 --> 00:21:04,050
ثم في وقت لاحق بعد هذا التمرين،

294
00:21:04,050 --> 00:21:07,250
سأشرح لك بإيجاز ما هي التوجيهات الهيكلية

295
00:21:07,250 --> 00:21:11,625
وما الغرض الذي تخدمه في تحديد القوالب الخاصة بك هنا.

296
00:21:11,625 --> 00:21:15,960
لذلك، داخل هذا البند قائمة فارغة، وأنا ذاهب إلى القول،

297
00:21:15,960 --> 00:21:21,480
نجمة، لاحظ بناء الجملة، نجمة نغفور.

298
00:21:22,470 --> 00:21:25,500
لذا، هذا هو التوجيه الهيكلي، التوجيه الهيكلي

299
00:21:25,500 --> 00:21:29,585
ngFor في الزاوي.

300
00:21:29,585 --> 00:21:34,690
ما يسمح لك هذا التوجيه الهيكلي ngFor القيام به هو

301
00:21:34,690 --> 00:21:40,855
التكرار على مجموعة من العناصر.

302
00:21:40,855 --> 00:21:48,805
تذكر أننا عرفنا الأطباق كمجموعة من كائنات الأطباق في شفرتنا.

303
00:21:48,805 --> 00:21:51,040
الآن، في قالب بلدي،

304
00:21:51,040 --> 00:21:54,095
وسوف يكون الوصول إلى هذا الكائن الأطباق.

305
00:21:54,095 --> 00:21:56,945
حتى هنا، إذا كنت تريد أن تتكرر أكثر من ذلك،

306
00:21:56,945 --> 00:21:59,160
والطريقة التي أحدد بها هو سأقول،

307
00:21:59,160 --> 00:22:04,950
«دع طبق من الأطباق.»

308
00:22:04,950 --> 00:22:11,495
هذه هي الطريقة التي يعمل بها بناء الجملة للتوجيه الهيكلي ngFor.

309
00:22:11,495 --> 00:22:14,020
لذلك، والسماح طبق من الأطباق.

310
00:22:14,020 --> 00:22:21,805
ما يعنيه هذا هو أن الأطباق هي مجموعة من كائنات الأطباق.

311
00:22:21,805 --> 00:22:24,245
عندما نختار نقول السماح طبق من الأطباق،

312
00:22:24,245 --> 00:22:27,130
وهذا سوف يسمح لي للوصول إلى كل عنصر من عناصر

313
00:22:27,130 --> 00:22:30,460
الصفيف ومن ثم يساعدني على التكرار عبر الصفيف.

314
00:22:30,460 --> 00:22:32,085
هذا يشبه حلقة for،

315
00:22:32,085 --> 00:22:36,210
إذا كنت معتادًا على الحلقات من البرمجة.

316
00:22:36,210 --> 00:22:40,630
لذلك، هذا يعمل مثل حلقة for بالنسبة لك ومن ثم يساعدك

317
00:22:40,630 --> 00:22:46,855
على التكرار على جميع عناصر مجموعة الأطباق هنا.

318
00:22:46,855 --> 00:22:51,050
يصبح هذا الطبق كائن جافا سكريبت يسمح لي

319
00:22:51,050 --> 00:22:55,350
بالوصول إلى كل عنصر من هذه الصفيف هناك.

320
00:22:55,350 --> 00:23:00,680
الآن، من هذا، يمكننا أيضًا

321
00:23:00,680 --> 00:23:06,775
الوصول إلى خصائص كل كائن على حدة داخل مجموعة الأطباق الخاصة بي.

322
00:23:06,775 --> 00:23:13,335
لذلك، بعد ذلك، يمكنني الاستفادة منها لتحديد القالب الخاص بي هنا.

323
00:23:13,335 --> 00:23:16,120
اسمحوا لي أن وضع القالب وبعد ذلك سوف نعود

324
00:23:16,120 --> 00:23:19,185
وننظر في كيف هذين مترابطة هنا.

325
00:23:19,185 --> 00:23:21,760
الآن، داخل عنصر القائمة الفارغ،

326
00:23:21,760 --> 00:23:28,480
يمكنني تضمين صورة مع السمة كما MatlistavaTar.

327
00:23:30,040 --> 00:23:38,625
لذلك، هذا يسمح لي بتضمين صورة ثم مع تحديد المصدر هنا.

328
00:23:38,625 --> 00:23:44,275
الآن من المثير للاهتمام، انظر إلى بناء الجملة الذي أستخدمه هنا.

329
00:23:44,275 --> 00:23:48,380
داخل الأقواس المزدوجة، وأنا ذاهب إلى القول dish.image.

330
00:23:48,560 --> 00:23:55,985
ما يعنيه هذا هو أن هذا هو الاستيفاء أحادي الاتجاه الذي نتحدث عنه.

331
00:23:55,985 --> 00:23:58,885
هنا، عندما أحدد هذا،

332
00:23:58,885 --> 00:24:07,635
ما يعنيه هذا هو أن هذا المصدر سيحصل على قيمة dish.image التي تم تعريفها في

333
00:24:07,635 --> 00:24:10,515
كائن جافا سكريبت

334
00:24:10,515 --> 00:24:17,050
الخاص بي الذي قمت بتعريفه في فئة البرنامج النصي الخاصة بي هناك والتي تتوفر لي للقيام بالتخطيط هنا.

335
00:24:17,050 --> 00:24:22,510
لذلك، أن قيمة dish.image ستكون متاحة لي وأيضا لهذه الصورة،

336
00:24:22,510 --> 00:24:28,255
وسوف تحدد قيمة بديلة كما dish.name.

337
00:24:28,255 --> 00:24:33,770
أذكر أن طبقي كان أيضا خاصية الاسم المتاحة

338
00:24:33,770 --> 00:24:39,240
لي بحيث يحدد صورة لقائمتي هنا.

339
00:24:39,240 --> 00:24:42,460
سوف تدرك قريبا كيف تبدو هذه القائمة

340
00:24:42,460 --> 00:24:46,010
على الشاشة عندما نكمل هذا القالب هنا.

341
00:24:46,010 --> 00:24:53,140
بالإضافة إلى ذلك، سأستخدم h1 مع علامة MatLine.

342
00:24:53,140 --> 00:24:56,500
مرة أخرى، هذا هو استخدام

343
00:24:56,500 --> 00:25:04,900
عنصر المادة الزاوي القائمة لتحديد القالب الخاص بي هنا.

344
00:25:04,900 --> 00:25:12,800
لذلك، أقول h1 MatLine لذلك هذا يساعدني على تحديد خط هنا ثم داخل هناك،

345
00:25:12,800 --> 00:25:17,170
وأنا ذاهب لاستخدام الأقواس المزدوجة ويقول dish.name هنا.

346
00:25:17,170 --> 00:25:24,930
لذلك، هذا يسمح لي للحصول على قيمة اسم الطبق هناك.

347
00:25:24,930 --> 00:25:33,140
لذلك، هذا يحدد سطر واحد ثم في السطر التالي أنا ذاهب إلى القول p MatLine.

348
00:25:33,140 --> 00:25:36,370
لذلك، سأقوم باستخدام علامة p هنا ثم

349
00:25:36,370 --> 00:25:39,655
أغلق علامة p ثم داخل علامة p،

350
00:25:39,655 --> 00:25:48,000
سأقوم باستخدام امتداد لتحديد dish.description.

351
00:25:48,000 --> 00:25:52,025
لذا، إذا كنت معتادًا على كائنات جافا سكريبت،

352
00:25:52,025 --> 00:25:56,180
فسترى الآن كيف يمكنني الوصول إلى خصائص

353
00:25:56,180 --> 00:26:02,030
كائن جافا سكريبت الخاص بي هنا، dish.description هنا.

354
00:26:02,030 --> 00:26:06,595
للملاحظة، من خلال تشغيل هذه المرة الإضافية،

355
00:26:06,595 --> 00:26:13,630
تسمح لي السمة ngFor بالتكرار عبر مجموعة من الكائنات هنا.

356
00:26:13,630 --> 00:26:17,700
لذلك، الأطباق هنا هي مجموعة من الكائنات طبق.

357
00:26:17,700 --> 00:26:20,865
لذلك، عندما أقول اسمحوا طبق من الأطباق،

358
00:26:20,865 --> 00:26:28,070
وهذا الطبق يعطيني الوصول إلى كل عنصر من

359
00:26:28,070 --> 00:26:32,170
صفيف الأطباق الخاصة بي وأنا تكرار على كل عنصر من عناصر الصفيف

360
00:26:32,170 --> 00:26:36,525
وبعد ذلك سوف يتم إنشاء هذا المحتوى لكل واحد منهم.

361
00:26:36,525 --> 00:26:39,205
لذا، فإن عنصر القائمة الفارغ هذا،

362
00:26:39,205 --> 00:26:43,500
يعمل بشكل أساسي مثل حلقة for من

363
00:26:43,500 --> 00:26:47,830
لغة الكمبيوتر التقليدية ثم يتكرر على

364
00:26:47,830 --> 00:26:52,890
قائمة الأطباق ثم يضع كل واحد منهم على شاشتي.

365
00:26:52,890 --> 00:26:54,895
لذلك، مع هذا التغيير،

366
00:26:54,895 --> 00:27:00,145
دعونا حفظ ملف مكون القائمة.

367
00:27:00,145 --> 00:27:06,800
بعد ذلك، نذهب إلى app.module.ts ونحن بحاجة إلى استيراد وحدة MatList في هذا.

368
00:27:06,800 --> 00:27:11,840
لذلك، نقول، استيراد

369
00:27:11,840 --> 00:27:20,380
MatlistModule من الزاوي/مادي/list.Once

370
00:27:20,380 --> 00:27:25,390
قمنا باستيراد هذا هناك، ثم نذهب إلى أسفل ثم تحديث الواردات في

371
00:27:25,390 --> 00:27:30,320
وحدة Ng وإضافة في

372
00:27:30,320 --> 00:27:36,435
وحدة MatList إلى قائمة الواردات هناك.

373
00:27:36,435 --> 00:27:42,430
يتم الآن تحديث هذا التطبيق module.ts ثم أيضا،

374
00:27:42,430 --> 00:27:47,770
أنا ذاهب للذهاب إلى ملف.scss الأنماط ثم إضافة

375
00:27:47,770 --> 00:27:53,575
في فئة الحاوية هنا.

376
00:27:53,575 --> 00:27:55,890
ماذا تحدد فئة الحاوية هنا؟

377
00:27:55,890 --> 00:28:00,995
فئة الحاوية هي هامش 20 بكسل

378
00:28:00,995 --> 00:28:07,830
وعرض المرن وحفظ التغييرات.

379
00:28:07,830 --> 00:28:12,210
الآن، دعنا نذهب ونلقي نظرة على صفحتنا الإلكترونية.

380
00:28:12,210 --> 00:28:14,180
الذهاب إلى صفحة الويب الخاصة بنا.

381
00:28:14,180 --> 00:28:15,885
( فويلا) ها أنت ذا

382
00:28:15,885 --> 00:28:22,250
القائمة لمطعم لدينا هو مبين في كل روعة على الشاشة.

383
00:28:22,250 --> 00:28:25,365
ترى كيف تم إنشاء هذه القائمة.

384
00:28:25,365 --> 00:28:30,455
انظر إلى مصفوفة كائن JavaScript التي رأيتها.

385
00:28:30,455 --> 00:28:35,250
انظر إلى كيفية استخدام كل من خصائص صفيف كائن JavaScript

386
00:28:35,250 --> 00:28:40,490
وتعيينها إلى العناصر الأربعة في قائمتي.

387
00:28:40,490 --> 00:28:44,170
انظر إلى كيفية تضمين الصور المقابلة هنا

388
00:28:44,170 --> 00:28:48,430
باستخدام MatlistaVatar هنا.

389
00:28:48,430 --> 00:28:55,150
لذلك، وهذا يخلق الصور المستديرة هنا ومن ثم لاحظ كيف

390
00:28:55,150 --> 00:29:03,155
يتم عرض اسم الطبق هنا ثم وصف الطبق المدرجة هنا.

391
00:29:03,155 --> 00:29:09,010
رائع الآن، لدينا القائمة لمطعمنا

392
00:29:09,010 --> 00:29:14,925
على الشاشة باستخدام مكون القائمة في Angular.

393
00:29:14,925 --> 00:29:17,625
و هذا يكمل هذا التمرين.

394
00:29:17,625 --> 00:29:21,860
في هذا التمرين، تعلمنا كيفية إنشاء مكون جديد.

395
00:29:21,860 --> 00:29:25,165
إضافته إلى تطبيق Angular الخاص بنا،

396
00:29:25,165 --> 00:29:28,270
وكيفية تضمين هذا المكون في قالب

397
00:29:28,270 --> 00:29:32,365
مكون آخر بحيث ينشئ التسلسل الهرمي للمكونات.

398
00:29:32,365 --> 00:29:39,255
ثم رأينا كيف يمكننا الاستفادة من تخطيط المرن الزاوي وأيضا

399
00:29:39,255 --> 00:29:42,700
مكونات تصميم المواد لتصميم

400
00:29:42,700 --> 00:29:47,560
القالب لمكون القائمة لدينا لعرض المحتوى هنا.

401
00:29:47,560 --> 00:29:52,710
الآن، إذا سألتني كيف أتذكر كل هذه الأشياء

402
00:29:52,710 --> 00:29:54,535
حسنا، لأكون صادقا،

403
00:29:54,535 --> 00:29:59,435
لا يمكنك تذكر كل شيء ولكن عليك أن تفهم النهج.

404
00:29:59,435 --> 00:30:03,035
هذا أكثر أهمية من محاولة حفظ أي من هذه الأشياء.

405
00:30:03,035 --> 00:30:06,735
الآن، إذا سألتني أين يمكنني الحصول على المعلومات حول

406
00:30:06,735 --> 00:30:12,740
مكون القائمة من المواد الزاوي.

407
00:30:12,740 --> 00:30:16,560
يمكننا فرز الوثائق المادية الزاوي وهناك

408
00:30:16,560 --> 00:30:21,005
سيكون لديك تفاصيل حول كيفية إعداد مكون القائمة.

409
00:30:21,005 --> 00:30:29,405
الآن، أين نحصل على التفاصيل حول كيفية تصميم مكون في الزاوي؟

410
00:30:29,405 --> 00:30:33,240
درسنا فقط قليلا من ذلك وبعد ذلك في هذا التمرين،

411
00:30:33,240 --> 00:30:41,080
تعلمنا كيفية إنشاء مكون جديد ومن ثم تطبيق ذلك في التطبيق الزاوي لدينا.

412
00:30:41,080 --> 00:30:44,790
لذلك، هذه نقطة جيدة بالنسبة لك للقيام

413
00:30:44,790 --> 00:30:48,905
بتعليق الحصول على مكونات الرسالة الجزء الأول.

414
00:30:48,905 --> 00:30:50,540
في التمرين التالي،

415
00:30:50,540 --> 00:30:54,895
سنقوم بتحسين هذا أكثر من ذلك بقليل باستخدام نوع آخر

416
00:30:54,895 --> 00:31:00,920
من مكون المادة الزاوي لوضع المحتوى على شاشتي.