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

2
00:00:04,711 --> 00:00:06,798
إذا كان لديك موقع ويب ثابت،

3
00:00:06,798 --> 00:00:11,735
ثم لديك جميع البيانات التي تحتاج إليها من أجل بناء موقع الويب الخاص بك.

4
00:00:11,735 --> 00:00:17,790
وسيتم إنشاؤه مرة واحدة وموقع الويب الخاص بك على استعداد للذهاب.

5
00:00:17,790 --> 00:00:23,208
ولكن العديد من المواقع هذه الأيام مدفوعة بالبيانات من الخلفية.

6
00:00:23,208 --> 00:00:27,721
سيؤدي تطبيق الويب الخاص بك إلى جلب البيانات من خادم الواجهة الخلفية

7
00:00:27,721 --> 00:00:32,667
ثم استخدام البيانات لتخطيط المحتوى بشكل ديناميكي على موقع الويب الخاص بك، أو

8
00:00:32,667 --> 00:00:35,474
حتى تحديث المحتوى على موقع الويب الخاص بك.

9
00:00:35,474 --> 00:00:40,090
لذلك يتطلب هذا تدفق البيانات من الواجهة الخلفية من خلال

10
00:00:40,090 --> 00:00:43,410
تطبيق الويب الخاص بك إلى DOM.

11
00:00:43,410 --> 00:00:49,161
ويجب نقل أي تفاعل مستخدم على DOM مرة أخرى إلى تطبيق الويب الخاص بك.

12
00:00:49,161 --> 00:00:54,211
لذلك يتطلب هذا الاتصال بين DOM

13
00:00:54,211 --> 00:00:59,920
والمكون الخاص بك في الإطار الزاوي على سبيل المثال.

14
00:00:59,920 --> 00:01:03,268
دعونا ننظر في كيفية حدوث هذا داخل الإطار الزاوي

15
00:01:03,268 --> 00:01:04,880
ومع مزيد من التفاصيل قليلا.

16
00:01:06,900 --> 00:01:11,420
وما تعلمناه حتى الآن هو كيفية إعداد عنصر ما.

17
00:01:11,420 --> 00:01:17,129
لذلك رأينا أن المكون يحتوي على جزأين رئيسيين،

18
00:01:17,129 --> 00:01:24,380
ملف typescript حيث يتم تعريف بنية المكون، والخصائص.

19
00:01:24,380 --> 00:01:29,480
وطرق ثم لديك القالب الذي

20
00:01:29,480 --> 00:01:34,430
يحدد كيفية وضع المحتوى، وإضافته إلى DOM.

21
00:01:34,430 --> 00:01:38,410
لذا فإن القالب هو القالب الذي سيتم توفيره بواسطة مكون

22
00:01:38,410 --> 00:01:41,640
لاحتلال جزء من صفحة الويب الخاصة بك.

23
00:01:41,640 --> 00:01:45,870
لذلك يشكل القالب وسيطة الاتصال إلى DOM الخاص بك.

24
00:01:45,870 --> 00:01:52,210
ويتطلب هذا القالب الحصول على البيانات من المكون الخاص بك من أجل

25
00:01:53,450 --> 00:02:00,040
تقديم أجزاء من المحتوى على القالب الخاص بك

26
00:02:00,040 --> 00:02:04,105
وبالمقابل داخل DOM لصفحة الويب الخاصة بك.

27
00:02:05,250 --> 00:02:11,662
الآن، إذا لم يكن لديك ترف إطار عمل مثل Angular،

28
00:02:11,662 --> 00:02:16,442
فيجب عليك التعامل مع التفاصيل الكاملة حول كيفية

29
00:02:16,442 --> 00:02:21,586
تدفق البيانات من موقع التطبيق إلى DOM.

30
00:02:21,586 --> 00:02:25,696
وكيف

31
00:02:25,696 --> 00:02:29,980
سيتم إرسال أحداث تفاعل المستخدم التي تسببت في DOM مرة أخرى إلى التطبيق الخاص بك.

32
00:02:29,980 --> 00:02:33,851
لحسن الحظ، مع عمل الإطار مثل Angular،

33
00:02:33,851 --> 00:02:38,520
فإنها تدعم كل هذه السلوكيات بطبيعتها.

34
00:02:38,520 --> 00:02:44,047
الآن لقد رأينا بالفعل استخدام واحد لتدفق البيانات من

35
00:02:44,047 --> 00:02:48,504
خاصية المكونات إلى القالب في التدريبات السابقة.

36
00:02:48,504 --> 00:02:54,433
حيث استخدمنا الأقواس المتعرجة المزدوجة لتوفير المعلومات التي

37
00:02:54,433 --> 00:03:02,050
هي من متغير في رمز TypeScript المكون الخاص بك، إلى القالب الخاص بك.

38
00:03:02,050 --> 00:03:03,830
سننظر في طرق أخرى،

39
00:03:03,830 --> 00:03:08,670
ثم أيضًا في التمرين التالي، سنستفيد من هذا،

40
00:03:08,670 --> 00:03:14,370
لتعديل التطبيق الزاوي الذي قمنا بتطويره حتى الآن.

41
00:03:15,570 --> 00:03:18,975
ما كنا نتحدث عنه، حتى الآن، هو ربط البيانات،

42
00:03:18,975 --> 00:03:23,972
آلية لتنسيق تدفق المعلومات بين القالب

43
00:03:23,972 --> 00:03:27,468
والمكون، أو بين DOM والمكون.

44
00:03:27,468 --> 00:03:30,627
في مستوى المكون، هو نوع من خاصية أو

45
00:03:30,627 --> 00:03:35,215
طريقة تحتاج إما إلى توفيرها إلى القالب أو استدعاؤها من DOM.

46
00:03:35,215 --> 00:03:38,269
أو على جانب القالب، قد تكون بعض المعلومات

47
00:03:38,269 --> 00:03:41,890
المطلوبة من قبل القالب ليتم عرضها في DOM أو

48
00:03:41,890 --> 00:03:45,905
حتى من DOM التي تم التقاطها وإرسالها مرة أخرى إلى المكون الخاص بك.

49
00:03:45,905 --> 00:03:50,886
لذلك يتطلب كل هذا البيانات المتدفقة من المكون إلى

50
00:03:50,886 --> 00:03:55,868
القالب أو الأحداث التي يتم جمعها من DOM أو

51
00:03:55,868 --> 00:04:01,735
ليتم إرسالها مرة أخرى إلى المكون الخاص بك حتى يتصرف على تلك الأحداث.

52
00:04:01,735 --> 00:04:07,967
الآن يمكن التعامل مع هذا بسهولة في إطار الزاوي باستخدام أربعة

53
00:04:07,967 --> 00:04:14,850
أنواع مختلفة من تدفق المعلومات التي سوف نلخص في الشريحة التالية.

54
00:04:14,850 --> 00:04:19,150
بالعودة إلى التفاعل بين المكون والقالب،

55
00:04:19,150 --> 00:04:22,820
شهدنا بالفعل النوع الأول من التفاعل بين المكون

56
00:04:22,820 --> 00:04:27,800
والقالب حيث كانت قيمة الخاصية تتدفق في القالب.

57
00:04:27,800 --> 00:04:31,130
لذلك رأينا استخدام اسم الطبق،

58
00:04:31,130 --> 00:04:35,720
وصف الطبق، تفاصيل تعليق الطبق وهلم

59
00:04:35,720 --> 00:04:40,910
جرا يتم توفيرها من أجل تقديم المعلومات في القالب الخاص بك.

60
00:04:40,910 --> 00:04:47,210
هذا هو المكان الذي كنا نستخدم فيه الأقواس المزدوجة لإحاطة حقيقة أن

61
00:04:47,210 --> 00:04:53,030
قيمة من المكون الخاص بك يتم استخدامها في القالب الخاص بك.

62
00:04:53,030 --> 00:04:58,160
نوع آخر من تدفق المعلومات التي ستراها هو المكان الذي

63
00:04:58,160 --> 00:05:04,930
تحدد فيه نوع من الممتلكات المرتبطة بعلامة بين قوسين مربعين.

64
00:05:04,930 --> 00:05:11,670
ثم قم بتعيينه لتكون القيمة من أحد الخصائص في المكون الخاص بك.

65
00:05:12,790 --> 00:05:17,010
هذا النوع من النهج سنرى في التمرين الذي يتبع

66
00:05:17,010 --> 00:05:19,210
مباشرة بعد هذه المحاضرة.

67
00:05:19,210 --> 00:05:22,160
حتى هنا نود أن نحدد شيئا بين قوسين معقوفين.

68
00:05:22,160 --> 00:05:23,100
لذا احترس

69
00:05:23,100 --> 00:05:28,880
من مثال على ذلك في التمرين حيث سأناقش المزيد حول هذا الموضوع.

70
00:05:28,880 --> 00:05:32,640
وبالمثل، إذا كان لديك حدث تم إنشاؤه بالقرب من DOM،

71
00:05:32,640 --> 00:05:36,840
فقد يؤدي هذا الحدث إلى استدعاء معالج أو

72
00:05:36,840 --> 00:05:42,280
طريقة في المكون الخاص بك الذي سيعتني بمعالجة هذا الحدث.

73
00:05:42,280 --> 00:05:45,310
لذلك

74
00:05:45,310 --> 00:05:50,220
يشار إلى الطرق التي سيتم استدعاؤها من قبل الأحداث من DOM الخاص بك على أنها معالجات.

75
00:05:50,220 --> 00:05:55,670
لذا، فإن المقبض ليس شيئًا، كما قلت طريقة، والتي قد

76
00:05:55,670 --> 00:06:01,039
يتم تمريرها أيضًا في بعض المعلمات داخل أساليب المعالج هناك.

77
00:06:02,790 --> 00:06:09,620
في وقت لاحق، عندما ننظر إلى النماذج، سنرى ربط البيانات في اتجاهين.

78
00:06:09,620 --> 00:06:16,190
لذلك كل الثلاثة التي رأيناها حتى الآن، تدفق القيمة من

79
00:06:16,190 --> 00:06:20,910
المكون إلى القالب أو الخاصية التي يتم تعيينها إلى قيمة أو

80
00:06:20,910 --> 00:06:26,380
الحدث الذي يتم تعيينه إلى معالج للتعامل مع الحدث.

81
00:06:26,380 --> 00:06:29,780
كل هذه هي ما نشير إليه على أنه ربط البيانات بطريقة واحدة

82
00:06:31,010 --> 00:06:33,240
لأنها تتدفق فقط في اتجاه واحد.

83
00:06:33,240 --> 00:06:37,810
يمكنك أيضًا الحصول على تدفق ثنائي الاتجاه حيث قد تراه أيضًا

84
00:06:37,810 --> 00:06:41,200
في بناء الجملة ما تحدده باستخدام أقواس مربعة.

85
00:06:41,200 --> 00:06:44,590
ومن ثم محاطة داخل ذلك مع قوس قياسي.

86
00:06:44,590 --> 00:06:47,772
داخل هناك سوف تحدد شيئا مثل نغموديل.

87
00:06:47,772 --> 00:06:52,575
سترى استخدام هذا عندما يتشكل لاحقًا في الوحدة النمطية التالية.

88
00:06:52,575 --> 00:06:55,215
لذلك هذا هو المكان الذي ستعين فيه خاصية لذلك.

89
00:06:55,215 --> 00:06:58,675
لذلك في هذه الحالة تدفق المعلومات هو ثنائي الاتجاه.

90
00:06:58,675 --> 00:07:03,789
لذلك سيتم عكس أي تغيير في DOM الخاص بك مرة أخرى في الممتلكات الخاصة بك

91
00:07:03,789 --> 00:07:05,029
والمكون.

92
00:07:05,029 --> 00:07:08,785
سيتم عكس أي تغيير في خاصية المكون مرة أخرى إلى DOM.

93
00:07:08,785 --> 00:07:12,700
لاحظ بناء الجملة المحدد الذي نستخدمه

94
00:07:12,700 --> 00:07:15,918
لتحديد ngModel في هذا المثال هنا.

95
00:07:15,918 --> 00:07:21,100
نحن نستخدم قوس مربع وداخل ذلك نستخدم قوس القياسية في هناك.

96
00:07:22,390 --> 00:07:25,640
اسمحوا لي الآن أن ألخص ما تعلمناه للتو

97
00:07:25,640 --> 00:07:30,620
عن ربط البيانات في الشريحة السابقة في هذا الجدول.

98
00:07:30,620 --> 00:07:36,890
لذلك في هذا الجدول، نحن نعرض الطرق المختلفة التي يتم استخدام ربط البيانات.

99
00:07:36,890 --> 00:07:41,610
ربط البيانات أحادي الاتجاه من مصدر البيانات إلى هدف العرض، لذلك

100
00:07:41,610 --> 00:07:45,370
من المكون إلى DOM،

101
00:07:45,370 --> 00:07:51,720
نستخدم تعبيرًا مزدوجًا بالداخل هناك.

102
00:07:51,720 --> 00:07:55,970
هذا ما نشير إليه باسم الاستيفاء كمثال على

103
00:07:55,970 --> 00:08:01,080
ذلك, سيكون اسم الطبق, المغلقة داخل الأقواس المزدوجة كما رأينا,

104
00:08:01,080 --> 00:08:06,030
المستخدمة في التدريبات, في الوحدة السابقة.

105
00:08:06,030 --> 00:08:11,345
ثم لدينا، النوع الثاني حيث كنت أرفق الهدف

106
00:08:11,345 --> 00:08:17,385
داخل قوس مربع ومن ثم تعيينه إلى تعبير على الجانب الأيمن.

107
00:08:17,385 --> 00:08:22,450
قد تكون هذه التعبيرات تعبيرات جافا سكريبت مع بعض القيود.

108
00:08:22,450 --> 00:08:25,600
الأمثلة التي سنراها عادة

109
00:08:25,600 --> 00:08:30,960
ستستخدم خاصية من إحدى الفئات هناك.

110
00:08:30,960 --> 00:08:34,390
لذا، هذا ما أشرنا إليه على أنه خاصية خاصية،

111
00:08:34,390 --> 00:08:38,878
ومثال ستراه في التمرين الذي يتبع هذه المحاضرة.

112
00:08:38,878 --> 00:08:44,333
حيث ترى استخدام طبق، مغلق داخل قوس مربع،

113
00:08:44,333 --> 00:08:51,650
يتم مساواته إلى محدددديش، وهو متغير أعلن داخل مكون.

114
00:08:51,650 --> 00:08:56,770
ويمكن أيضًا التعبير عن ذلك باستخدام هدف ربط،

115
00:08:56,770 --> 00:08:58,680
طريقة للتعبير عن نفس الشيء.

116
00:08:58,680 --> 00:09:04,630
لذلك كل من هذه سواء كنت أرفق هدفًا بين قوسين مربعين أو هدف ربط.

117
00:09:04,630 --> 00:09:07,550
لذلك، على سبيل المثال، يمكنك أن ترى ربط طبق.

118
00:09:07,550 --> 00:09:11,820
لذا أيًا كانت الطريقة التي تعبر بها عن هذا، فإن كلاهما يشير إلى نفس الشيء.

119
00:09:11,820 --> 00:09:17,528
لذلك يتم تحديد سمة الخاصية أو نمط الفئة التي يتم تحديدها.

120
00:09:17,528 --> 00:09:22,367
الآن يتم

121
00:09:22,367 --> 00:09:27,401
التعبير عن تدفق المعلومات في اتجاه واحد من هدف العرض إلى مصدر البيانات عادة مع الهدف محاطة

122
00:09:27,401 --> 00:09:32,780
بين قوسين هنا أو يمكن أيضا التعبير عنها على أنها على الهدف.

123
00:09:32,780 --> 00:09:36,610
وعلى الجانب الأيمن سيكون بيان.

124
00:09:36,610 --> 00:09:41,523
يمكن أن يكون البيان نوعًا من تعبير JavaScript عادة ما

125
00:09:41,523 --> 00:09:46,532
يكون في استدعاء طريقة داخل مكون.

126
00:09:46,532 --> 00:09:51,668
حسنا سترى مثالا في التمرين الذي يتبع حيث

127
00:09:51,668 --> 00:09:57,611
كنت قد انقر داخل الأقواس وتعيين إلى onSelect.

128
00:09:57,611 --> 00:10:02,700
وهي طريقة موصوفة داخل

129
00:10:02,700 --> 00:10:10,540
فئة مكون هناك مع طبق معلمة يتم توفيره لهذه الطريقة هناك.

130
00:10:10,540 --> 00:10:15,920
ربط البيانات ثنائي الاتجاه كما رأينا سيكون مع مربع وأقواس،

131
00:10:15,920 --> 00:10:21,320
الأقواس المربعة والأقواس التي تساوي التعبير.

132
00:10:21,320 --> 00:10:26,380
سنرى ربط البيانات ثنائي الاتجاه كمجموعة ذات نماذج في وقت لاحق قليلاً حيث

133
00:10:26,380 --> 00:10:31,843
ستستخدم شيئًا مثل ngModel، محاطًا داخل الأقواس المربعة

134
00:10:31,843 --> 00:10:35,647
والأقواس، مساويًا لشيء مثل dish.name.

135
00:10:35,647 --> 00:10:40,438
الذي يربط عنصر النموذج إلى خاصية

136
00:10:40,438 --> 00:10:44,640
كائن جافا سكريبت، في المكون لدينا.

137
00:10:46,260 --> 00:10:50,240
يمكنك أيضًا التعبير عن هذا كـ bindon-target.

138
00:10:50,240 --> 00:10:52,401
وهي طريقة أخرى لقول نفس الشيء

139
00:10:52,401 --> 00:10:56,866
الآن، هذه البيانات ذات الاتجاهين الملزمة التي نقوم

140
00:10:56,866 --> 00:11:00,630
بها يشار إليها أحيانا على أنها موزة في صندوق.

141
00:11:00,630 --> 00:11:04,630
حتى إذا نظرتم إلى الأقواس المربعة مع الأقواس داخله،

142
00:11:04,630 --> 00:11:06,110
فإنه يبدو وكأنه الموز في مربع.

143
00:11:06,110 --> 00:11:11,550
لذلك، قد ترى هذا يتم استخدامه في بعض الوثائق أو

144
00:11:11,550 --> 00:11:14,580
في بعض المدونات التي قد تقرأها على الإنترنت.

145
00:11:15,970 --> 00:11:19,920
فالأهداف الملزمة التي شهدناها تتوسعا أكبر بشأن

146
00:11:19,920 --> 00:11:23,720
الأهداف الملزمة التي شهدناها، هي الخصائص المعلنة على الجانب الأيسر

147
00:11:23,720 --> 00:11:27,310
من الإعلان الملزم لذلك الإعلان الملزم للبيانات الملزم.

148
00:11:27,310 --> 00:11:33,280
عادة، المغلقة داخل أقواس معقوفة أو داخل قوسين أو كليهما.

149
00:11:33,280 --> 00:11:40,850
لذا فإن الجانب الأيمن من تعبير الربط هو مصادر الربط الخاصة بهم،

150
00:11:40,850 --> 00:11:45,670
والتي عادة ما تكون مثل خصائص كائن جافا سكريبت، أو

151
00:11:45,670 --> 00:11:51,930
متغير، أو تعبير نعرفه على الجانب الأيمن.

152
00:11:51,930 --> 00:11:58,970
إذا قمت بتعريف خصائص الهدف المقترنة بانتقائية مكون.

153
00:11:58,970 --> 00:12:03,140
هذه طريقة واحدة إما تمرير المعلومات إلى مكون،

154
00:12:03,140 --> 00:12:07,320
أو إرسال المعلومات من مكون واحد إلى مكون آخر.

155
00:12:07,320 --> 00:12:12,490
لذلك هذا يسهل التواصل بين المكونات.

156
00:12:12,490 --> 00:12:18,258
لذلك سترى استخدام ديكور مثل @Input مقترن

157
00:12:18,258 --> 00:12:24,442
بطريقة لإرسال المعلومات من مكون واحد إلى مكون آخر.

158
00:12:24,442 --> 00:12:29,194
سنرى مثالا على هذا الاستخدام في التمرين

159
00:12:29,194 --> 00:12:32,690
الذي يتبع هذه المحاضرة هنا.

160
00:12:32,690 --> 00:12:37,600
وبالمثل، يمكنك استخدام ديكور الإخراج لتحديد حدث

161
00:12:37,600 --> 00:12:42,070
من مكون واحد يتم تمريره مرة أخرى إلى مكون آخر.

162
00:12:42,070 --> 00:12:49,472
لذلك يتم استخدام كل من هذه الاستخدامات بشكل فعال للتواصل بين المكونات.

163
00:12:49,472 --> 00:12:52,759
[ موسيقى]