1
00:00:03,650 --> 00:00:09,520
يتكون تطبيق Angular النموذجي من العديد من المكونات.

2
00:00:09,520 --> 00:00:16,225
تتحكم المكونات في جزء من الشاشة يسمى كطريقة عرض في Angular.

3
00:00:16,225 --> 00:00:21,840
لذلك، عند إنشاء شاشتك على تطبيق Angular

4
00:00:21,840 --> 00:00:25,310
الخاص بك، يمكنك تقسيم الشاشة إلى طرق عرض متعددة،

5
00:00:25,310 --> 00:00:29,384
يتم التحكم في كل منها بواسطة مكون منفصل.

6
00:00:29,384 --> 00:00:31,200
حتى الآن، في المثال،

7
00:00:31,200 --> 00:00:35,715
لدينا مكون جذر واحد يتحكم في الشاشة بأكملها.

8
00:00:35,715 --> 00:00:42,440
في هذا الدرس، سوف نضيف مكوناً آخر يأخذ جزءاً من الشاشة

9
00:00:42,440 --> 00:00:45,890
ويتحكم في ذلك الجزء من الشاشة ويعتني

10
00:00:45,890 --> 00:00:50,275
بالعرض الكامل لهذا الجزء من الشاشة، هنا.

11
00:00:50,275 --> 00:00:54,060
دعونا نقوم بزيارة سريعة إلى مكون التطبيق الذي

12
00:00:54,060 --> 00:00:57,350
لدينا بالفعل كجزء من تطبيقنا الزاوي.

13
00:00:57,350 --> 00:00:58,730
لذلك، في هذا المكون،

14
00:00:58,730 --> 00:01:04,250
يمكنك أن ترى أننا نستورد المكون من Angular core.

15
00:01:04,250 --> 00:01:07,100
لذلك، وهذا يوفر لنا القدرة على

16
00:01:07,100 --> 00:01:11,585
تحديد مكون الديكور وتطبيقه على صفنا.

17
00:01:11,585 --> 00:01:16,640
لذا، سيحدد هذا مكونًا واحدًا يشكل جزءًا من تطبيقنا Angular.

18
00:01:16,640 --> 00:01:19,590
لذلك، هنا، هذا المكون معين،

19
00:01:19,590 --> 00:01:22,970
كما ترون، عند تعريف الديكور المكون،

20
00:01:22,970 --> 00:01:30,450
فإنه يتكون من عدة خصائص هنا واحد منهم هو المحدد، هنا.

21
00:01:30,450 --> 00:01:36,375
الآن، هذه الخاصية محدد معين يحدد سلسلة هنا.

22
00:01:36,375 --> 00:01:40,010
لاحظ، على وجه الخصوص، ما هو موجود داخل السلسلة.

23
00:01:40,010 --> 00:01:42,080
وتقول الجذر التطبيق.

24
00:01:42,080 --> 00:01:46,270
الآن، وبالنظر إلى الوراء في ملف index.html.

25
00:01:46,270 --> 00:01:48,915
لذلك، أنا ذاهب إلى ملف index.html.

26
00:01:48,915 --> 00:01:51,400
يمكنك أن ترى أن هناك حق،

27
00:01:51,400 --> 00:02:00,570
ونحن نستخدم هذا التطبيق الجذر باعتبارها واحدة من العلامات في ملف index.html لدينا.

28
00:02:00,570 --> 00:02:05,630
لذا، ترى الآن أن هذه العلامة المعينة التي تستخدمها تشير

29
00:02:05,630 --> 00:02:11,270
إلى محدد ما حددناه هنا، جذر التطبيق.

30
00:02:11,270 --> 00:02:18,500
لذا، إذا كنت ترغب في إعطاء جزء من الشاشة وجعل ذلك قابلاً للتحكم بواسطة مكون،

31
00:02:18,500 --> 00:02:23,135
فإنك تستخدم المحدد لتحديد ثم ستقوم بتضمين

32
00:02:23,135 --> 00:02:28,310
علامة التحديد في ملف HTML الخاص بك.

33
00:02:28,310 --> 00:02:32,190
نفس الشيء ينطبق أيضا على قالب مكون.

34
00:02:32,190 --> 00:02:35,330
إذا قمت بتضمين محدد آخر من مكون آخر

35
00:02:35,330 --> 00:02:39,350
في قالب هذا المكون،

36
00:02:39,350 --> 00:02:42,770
فسيتم تسليم هذا الجزء من الشاشة إلى

37
00:02:42,770 --> 00:02:46,440
المكون الثاني ليتم التحكم فيه من المكون الثاني.

38
00:02:46,440 --> 00:02:52,304
وسوف نتعلم أيضا عن ذلك في واحدة من الدروس اللاحقة.

39
00:02:52,304 --> 00:02:57,970
الآن، الجزء الثاني الذي تراه يتم تحديده هو TemplateUrl.

40
00:02:57,970 --> 00:03:06,560
يحدد هذا TemplateUrl اسم ملف القالب لهذا المكون معين.

41
00:03:06,560 --> 00:03:10,970
لذلك، في هذه الحالة، كما ترون، هذا هو app.component.html.

42
00:03:10,970 --> 00:03:14,720
لذلك، هذا هو السبب في أن القالب يتم تعريفه في

43
00:03:14,720 --> 00:03:19,605
ملف app.component.html لهذا المكون معين.

44
00:03:19,605 --> 00:03:25,270
وبالإضافة إلى ذلك، يمكنك أيضا توفير أنماط لهذا التطبيق.

45
00:03:25,270 --> 00:03:30,105
لذلك، نحن هنا نقول StyleUrls ثم هنا،

46
00:03:30,105 --> 00:03:36,610
بين قوسين معقوفين كنت توريد هذا القول. /app.component.scss.

47
00:03:36,610 --> 00:03:44,175
لذلك، مما يعني أن ملف SaaS معين يتم تطبيقه على هذا النمط.

48
00:03:44,175 --> 00:03:48,620
لذا كما رأيت عندما

49
00:03:48,620 --> 00:03:53,970
أنشأنا تطبيق Angular الخاص بنا، حددت تنسيق النمط الذي سأستخدمه هو SCSS.

50
00:03:53,970 --> 00:03:56,650
لذلك، هذا هو السبب في أن هذه الملفات هي SCSS.

51
00:03:56,650 --> 00:04:01,190
إذا كنت لا تستخدم نمط SCSS وبدلاً من ذلك إنشاء بشكل طبيعي،

52
00:04:01,190 --> 00:04:06,860
فستكون هذه ملفات CSS فقط ثم يمكنك استخدام CSS لتحديد

53
00:04:06,860 --> 00:04:16,020
الأنماط التي يمكن استخدامها في قوالب التطبيق أو في قوالب المكونات الخاصة بك.

54
00:04:16,020 --> 00:04:19,820
لذلك، إذا كان لديك أي

55
00:04:19,820 --> 00:04:23,000
أنماط محددة المكونات التي تريد تضمينها لهذا المكون معين،

56
00:04:23,000 --> 00:04:25,565
ثم سوف تضمينها في هذا الملف.

57
00:04:25,565 --> 00:04:29,965
يمكنك أيضًا تحديد القالب والنمط المضمن.

58
00:04:29,965 --> 00:04:33,280
لذلك، إذا قمت بتحديد النمط أو القالب المضمن،

59
00:04:33,280 --> 00:04:37,785
فستحدد ببساطة ذلك كما هو الحال مع علامات الاقتباس الخلفية.

60
00:04:37,785 --> 00:04:40,080
لذلك، على سبيل المثال، يمكنني ببساطة،

61
00:04:40,080 --> 00:04:42,520
بدلاً من القيام بـ TemplateUrl،

62
00:04:42,520 --> 00:04:47,180
يمكنني ببساطة تحرير هذا إلى القالب

63
00:04:47,180 --> 00:04:52,475
ثم سأحدد القالب داخل علامات الاقتباس الخلفية هنا.

64
00:04:52,475 --> 00:04:59,420
لذلك أود أن أقول وداخل كووتس الخلفي يمكنني حتى القيام قوالب مثل هذا.

65
00:04:59,420 --> 00:05:07,360
لذلك، أستطيع أن أقول H1 ثم العنوان.

66
00:05:07,360 --> 00:05:17,060
لذلك، سيكون هذا ما نسميه كقالب مضمّن نستخدمه داخل تطبيقنا.

67
00:05:17,060 --> 00:05:19,280
الآن، إذا كنت تستخدم علامات الاقتباس مرة أخرى،

68
00:05:19,280 --> 00:05:23,690
يمكنك أيضًا استخدام أشياء مثل إضافة الدولار

69
00:05:23,690 --> 00:05:28,955
لاستخدام المتغيرات داخل القوالب الخاصة بك وما إلى ذلك.

70
00:05:28,955 --> 00:05:31,235
في هذه الدورة بالذات،

71
00:05:31,235 --> 00:05:34,820
سنقوم باستخدام ملفات قالب منفصلة

72
00:05:34,820 --> 00:05:39,590
وإنشاء القوالب في ملفات HTML تلك بدلاً من ذلك.

73
00:05:39,590 --> 00:05:45,050
أنا أفضل هذه الطريقة لتحديد القوالب الخاصة بي بدلا من القيام قوالب مضمنة.

74
00:05:45,050 --> 00:05:49,180
ولكن إذا كان القالب الخاص بك بسيطًا جدًا ويحتوي على سطرين أو ثلاثة أسطر فقط،

75
00:05:49,180 --> 00:05:56,235
فحينئذٍ، استخدم قالب مضمّن مثل هذا داخل تطبيقك.

76
00:05:56,235 --> 00:06:02,930
لذلك، اسمحوا لي أن تغييره مرة أخرى إلى القيمة الأصلية بلدي هنا.

77
00:06:02,930 --> 00:06:04,770
نفس الشيء للأنماط

78
00:06:04,770 --> 00:06:08,240
أيضا، يمكنني ببساطة أن أقول الأنماط ثم داخل علامات الاقتباس الخلفية

79
00:06:08,240 --> 00:06:12,500
تشمل فئات CSS الخاصة بي داخل علامات الاقتباس الخلفية.

80
00:06:12,500 --> 00:06:15,245
على الرغم من أنه كما ذكرت،

81
00:06:15,245 --> 00:06:24,895
فأنا أفضل الاحتفاظ بها في ملفات منفصلة فقط لوجود رمز نظيف في ملفات.ts الخاصة بي هنا.

82
00:06:24,895 --> 00:06:27,515
لذلك لدينا أنماط قالب محدد.

83
00:06:27,515 --> 00:06:30,010
سيكون لدينا أيضا واحد آخر يسمى معرف الوحدة النمطية.

84
00:06:30,010 --> 00:06:33,020
في هذه اللحظة، لا أستخدم ذلك للمكون الخاص بي،

85
00:06:33,020 --> 00:06:40,395
ولكن في بعض الحالات ستحتاج إلى تحديد معرف الوحدة بشكل صريح للمكون الخاص بك.

86
00:06:40,395 --> 00:06:44,610
سنرى بعض الأمثلة على ذلك في وقت لاحق قليلا.

87
00:06:44,610 --> 00:06:50,955
الآن بالإضافة إلى ذلك، المكون ليس سوى فئة JavaScript أو فئة Type Script.

88
00:06:50,955 --> 00:06:53,615
لذلك هذا هو السبب في أنك ترى هنا،

89
00:06:53,615 --> 00:06:58,960
وتحديد فئة تقول AppComponent ثم تقوم بتصدير هذه الفئة.

90
00:06:58,960 --> 00:07:01,820
السبب في أننا نستخدم التصدير هنا،

91
00:07:01,820 --> 00:07:06,820
بحيث يمكن استيراد هذا المكون إلى وحدة التطبيق الخاصة بي.

92
00:07:06,820 --> 00:07:10,070
لذلك رأيت أننا كنا نستورد هذا إلى وحدة التطبيق الخاصة بي.

93
00:07:10,070 --> 00:07:18,350
لذلك كلما كنت ترغب في جعل أي مكون أو وحدة نمطية في المحمولة في وحدة نمطية أخرى،

94
00:07:18,350 --> 00:07:25,245
فإنك دائما ما قبل التصدير إلى الفصل هنا.

95
00:07:25,245 --> 00:07:28,040
لذا، بالإضافة إلى ذلك،

96
00:07:28,040 --> 00:07:34,295
نرى أيضًا أن لدينا بعض الخصائص المحلية التي حددناها

97
00:07:34,295 --> 00:07:43,220
داخل فصولنا هنا وستكون هذه متاحة من خلال القالب الخاص بي.

98
00:07:43,220 --> 00:07:45,340
حتى أتمكن من الاستفادة من هذه في القالب الخاص بي.

99
00:07:45,340 --> 00:07:48,170
لذلك يمكن

100
00:07:48,170 --> 00:07:53,230
الوصول إلى الخصائص التي يتم تعريفها داخل ملف component.ts الخاص بي من ملفات القالب الخاصة بي.

101
00:07:53,230 --> 00:08:00,875
سنتحدث عن ربط البيانات في وقت لاحق قليلا في درس آخر.

102
00:08:00,875 --> 00:08:08,075
لتلخيص، ما تعلمناه حتى الآن هو أن يتم تعريف مكون من خلال

103
00:08:08,075 --> 00:08:15,990
تحديد التعليمات البرمجية وأيضا تحديد القالب المقابل.

104
00:08:15,990 --> 00:08:19,850
لذلك، داخل التعليمات البرمجية يمكنك تحديد الخصائص والأساليب

105
00:08:19,850 --> 00:08:24,455
التي يمكن الوصول إليها من القالب الخاص بك من القالب المقابل.

106
00:08:24,455 --> 00:08:26,530
لذلك، كما رأيت، في البيانات الوصفية،

107
00:08:26,530 --> 00:08:29,370
في الديكور، في ديكور المكون،

108
00:08:29,370 --> 00:08:33,425
قمت بتحديد اسم ملف القالب كواحدة

109
00:08:33,425 --> 00:08:38,380
من خصائص فئة المكون الخاص بك هنا.

110
00:08:38,380 --> 00:08:41,870
وبالمثل،

111
00:08:41,870 --> 00:08:45,875
سيتم الوصول إلى أي خصائص وأساليب تحددها في المكون الخاص بك من القالب الخاص بك.

112
00:08:45,875 --> 00:08:49,645
ليس ذلك فقط، يمكنك أيضًا الحصول على ما يسمى

113
00:08:49,645 --> 00:08:53,450
بربط الحدث من القالب الخاص بك إلى المكونات الخاصة بك.

114
00:08:53,450 --> 00:08:57,320
لذلك، إذا تم إنشاء أي أحداث في القوالب الخاصة بك، لذلك على سبيل المثال،

115
00:08:57,320 --> 00:09:02,180
النقر على زر في القالب الخاص بك الذي يمكن أن يؤدي

116
00:09:02,180 --> 00:09:08,535
المكالمات إلى أساليب داخل التعليمات البرمجية هنا،

117
00:09:08,535 --> 00:09:11,400
جافا سكريبت أو رمز نوع البرنامج النصي هنا.

118
00:09:11,400 --> 00:09:16,790
وسوف نرى استخدام تلك في واحدة من الدروس اللاحقة وبعد ذلك هناك، وسوف، مرة أخرى،

119
00:09:16,790 --> 00:09:20,180
إعادة النظر في هذه النقطة حول الملكية ملزمة والحدث،

120
00:09:20,180 --> 00:09:23,500
وشرح هذا لك بمزيد من التفصيل.

121
00:09:23,500 --> 00:09:29,840
يمكن تنظيم المكونات في تطبيق Angular نفسها في تسلسل هرمي.

122
00:09:29,840 --> 00:09:32,470
لذلك، سيكون لديك دائما مكون الجذر.

123
00:09:32,470 --> 00:09:37,130
لذلك بالنسبة لتطبيقنا،

124
00:09:37,130 --> 00:09:43,039
يشكل ملف app.component.ts وقالب HTML المقابل المكون الجذر لتطبيقنا

125
00:09:43,039 --> 00:09:46,724
ويمكن أن يحتوي هذا المكون الجذر على

126
00:09:46,724 --> 00:09:52,825
مكونات أسفل في التسلسل الهرمي ويمكن أن يتضمن مكونات في التسلسل الهرمي.

127
00:09:52,825 --> 00:09:56,750
سنرى أنه في التمرين التالي،

128
00:09:56,750 --> 00:10:02,275
حيث سننشئ مكونًا آخر ثم نستخدم ذلك في مكون الجذر لدينا.

129
00:10:02,275 --> 00:10:04,960
لذلك، يمكن أن يكون لديك مكونات متعددة يتم

130
00:10:04,960 --> 00:10:08,005
تضمينها في مكون الجذر الخاص بك وهذه المكونات

131
00:10:08,005 --> 00:10:13,690
نفسها بدورها يمكن استخدام المكونات الأخرى التي يتم تضمينها داخلها.

132
00:10:13,690 --> 00:10:21,075
لذا، فإن هذا التسلسل الهرمي للمكونات هو ما يمكّنك من تصميم شاشة التطبيق الخاص بك.

133
00:10:21,075 --> 00:10:24,940
مع هذا الفهم السريع

134
00:10:24,940 --> 00:10:28,810
للمكونات وكيف تكون المكونات مفيدة لتصميم تطبيقنا،

135
00:10:28,810 --> 00:10:32,935
سننتقل الآن إلى التمرين التالي حيث سنقوم بإنشاء

136
00:10:32,935 --> 00:10:37,339
وإضافة مكون آخر إلى تطبيق Angular الخاص بنا

137
00:10:37,339 --> 00:10:41,810
ومن ثم سنقوم بتحديد قالب لهذا المكون ثم سنقوم الاستفادة من

138
00:10:41,810 --> 00:10:47,230
هذا المكون داخل مكون الجذر لدينا لتصميم شاشتنا.