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

2
00:00:04,438 --> 00:00:08,934
لقد أكملنا للتو التعلم عن النماذج المدفوعة بالقالب

3
00:00:08,934 --> 00:00:12,310
بالزاوية في الدرس السابق.

4
00:00:12,310 --> 00:00:18,336
كما يدعم Angular طريقة أخرى لتصميم النماذج تسمى أشكال

5
00:00:18,336 --> 00:00:25,390
تفاعلية، وتستخدم الأشكال التفاعلية أسلوب البرمجة التفاعلي لدعم النماذج.

6
00:00:25,390 --> 00:00:28,050
سنتحدث عن البرمجة التفاعلية لفترة وجيزة في

7
00:00:28,050 --> 00:00:31,110
واحدة من الدروس اللاحقة في هذه الوحدة.

8
00:00:31,110 --> 00:00:34,180
ولكن في الوقت الحالي، سنتعامل مع أشكال تفاعلية

9
00:00:34,180 --> 00:00:38,410
ونرى كيف يمكننا تصميم أشكال تفاعلية بالزاوية

10
00:00:38,410 --> 00:00:44,430
وما هي الميزات الفريدة للقيام بأشكال تفاعلية في الزاوية التالية.

11
00:00:46,150 --> 00:00:52,310
يدعو أسلوب البرمجة التفاعلي إلى الإدارة الصريحة

12
00:00:52,310 --> 00:00:58,500
للبيانات المتدفقة بين نموذج البيانات غير واجهة المستخدم

13
00:00:58,500 --> 00:01:04,280
ونموذج النموذج الموجه نحو واجهة المستخدم وهذا هو النهج الذي تتخذه الأشكال التفاعلية في Angular.

14
00:01:04,280 --> 00:01:09,240
الآن قد لا يكون ذلك منطقيًا بالنسبة لك في هذه اللحظة، ولكن بينما نكمل هذا

15
00:01:09,240 --> 00:01:14,860
التمرين والمحاضرة، سيصبح الأمر أكثر وضوحًا لك

16
00:01:14,860 --> 00:01:21,530
لماذا يناسب النهج التفاعلي تصميم الشكل في سياقات معينة.

17
00:01:21,530 --> 00:01:26,630
الآن في النهج التفاعلي، نقوم بإنشاء شجرة من

18
00:01:26,630 --> 00:01:30,810
كائنات التحكم في النموذج الزاوي، داخل فئة المكون.

19
00:01:30,810 --> 00:01:33,300
الآن في النماذج المستندة إلى القالب التي رأيتها في وقت سابق،

20
00:01:34,450 --> 00:01:38,870
نقوم بتصميم النماذج باستخدام نهج قالب HTML، لذلك

21
00:01:38,870 --> 00:01:44,075
يتم وضع جميع عناصر التحكم في النموذج في هذا النموذج في قالب HTML

22
00:01:44,075 --> 00:01:49,667
ونحن ندير البيانات بشكل أساسي ونحن مرتبطون

23
00:01:49,667 --> 00:01:55,770
بكائن المكون الخاص بهم من خلال نموذج NG مباشرة.

24
00:01:55,770 --> 00:02:01,280
في هذا النهج، سنقوم بإنشاء بنية النموذج هذه في المكون الخاص بنا

25
00:02:01,280 --> 00:02:06,220
ثم ربط بنية النموذج في عناصر تحكم ثابتة في القالب الخاص بنا، لذلك

26
00:02:06,220 --> 00:02:10,860
سنقوم بربط شجرة النموذج التي نقوم

27
00:02:10,860 --> 00:02:15,920
بإنشائها داخل فئة المكون الخاصة بنا

28
00:02:15,920 --> 00:02:20,910
بعناصر النموذج الأصلية داخل ملف القالب الخاص بنا هناك.

29
00:02:20,910 --> 00:02:25,530
لذا، في هذا النهج، تتمتع فئة المكون

30
00:02:25,530 --> 00:02:30,390
بإمكانية الوصول الفوري إلى كل من نموذج البيانات بالإضافة إلى بنية التحكم في النموذج، لذا

31
00:02:30,390 --> 00:02:36,575
يمكننا بعد ذلك أخذ نموذج البيانات

32
00:02:36,575 --> 00:02:40,985
ودفعه إلى بنية التحكم في النموذج ونأخذ المعلومات من بنية التحكم في النموذج

33
00:02:40,985 --> 00:02:43,355
ثم تعيينه إلى نموذج البيانات.

34
00:02:43,355 --> 00:02:48,355
لذلك يمكن تعيين نموذج البيانات القادم من النهاية الخلفية لتشكيل

35
00:02:48,355 --> 00:02:53,410
هيكل التحكم الذي ينعكس في العرض من خلال هذا القالب

36
00:02:54,550 --> 00:02:58,280
ويتم الجسر بينهما داخل فئة المكون عن

37
00:02:58,280 --> 00:03:02,660
طريق إنشاء بنية النموذج داخل فئة المكون.

38
00:03:02,660 --> 00:03:07,330
الآن، هذا لا يجعل الكثير من المعنى بالنسبة لك في هذه اللحظة، ولكن

39
00:03:07,330 --> 00:03:12,230
عندما نقوم بالتمرين، سيصبح أكثر وضوحًا لك كيف

40
00:03:12,230 --> 00:03:17,080
يمكن تحقيق هذا الربط بين نموذج البيانات وهيكل التحكم الثابت

41
00:03:17,080 --> 00:03:22,185
داخل فئة المكون في رمز البرنامج النصي للمكونات فئة.

42
00:03:22,185 --> 00:03:26,700
لذلك هذا هو المكان الذي سوف نستفيد من أنماط رد الفعل، والاختبار

43
00:03:26,700 --> 00:03:31,160
والتحقق من الصحة إلى ميزة كبيرة، لذلك هذا

44
00:03:31,160 --> 00:03:35,170
النهج شكل رد الفعل يدعم أنماط رد الفعل من البرمجة، كما قلت، سوف نتحدث عن

45
00:03:35,170 --> 00:03:39,880
البرمجة رد الفعل أكثر قليلا في وقت لاحق في هذه الوحدة.

46
00:03:40,900 --> 00:03:45,470
أيضا، حقيقة أننا إنشاء النماذج في التعليمات البرمجية

47
00:03:45,470 --> 00:03:50,840
يعني أن اختبار وتقييم النماذج يصبح أسهل بكثير. من

48
00:03:50,840 --> 00:03:54,040
الصعب جدًا اختبار النماذج المدفوعة بالقالب

49
00:03:54,040 --> 00:03:58,770
لأن الكثير من البنية موجودة في رمز القالب، لذا

50
00:03:58,770 --> 00:04:03,800
فإن النهج التفاعلي يفسح المجال بشكل أفضل لاختبار الوحدة

51
00:04:03,800 --> 00:04:10,150
وكذلك للتحقق من صحة النموذج كما سنرى في وقت لاحق قليلاً في التمرين.

52
00:04:10,150 --> 00:04:15,650
دعونا نفكر بإيجاز في بعض مزايا استخدام أشكال رد الفعل.

53
00:04:15,650 --> 00:04:20,820
واحدة من المزايا هي أن القيم في النموذج الذي

54
00:04:20,820 --> 00:04:25,986
تكون العناصر متاحة على الفور ومزامنة مع التعليمات البرمجية المجردة.

55
00:04:25,986 --> 00:04:29,990
في النموذج المدفوع بالقالب، فإنه يأخذ دورة

56
00:04:29,990 --> 00:04:35,510
لأي تغييرات مكتوبة القالب ليتم انعكاسها في التعليمات البرمجية الخاصة بك هناك،

57
00:04:35,510 --> 00:04:40,990
ولكن في النهج التفاعلي،

58
00:04:40,990 --> 00:04:46,491
يتم الحفاظ على بت التزامن والبيانات وطريقة العرض بإحكام.

59
00:04:46,491 --> 00:04:50,680
ثانيا، أشكال رد الفعل، كما سبق أن ذكرت،

60
00:04:50,680 --> 00:04:55,560
هي أسهل للقيام اختبار وحدة وهذا يصبح حاسما جدا

61
00:04:55,560 --> 00:05:01,240
عندما كنت تصميم النسخ المتماثل زاوية معقدة جدا.

62
00:05:01,240 --> 00:05:04,320
يتم دعم النماذج التفاعلية لبعض

63
00:05:04,320 --> 00:05:08,240
الفئات المتوفرة لمكتبة النماذج الزاوي.

64
00:05:08,240 --> 00:05:13,390
واحد منهم هو فئة FormControl التي تقوم بتقوية عنصر تحكم النموذج الفردي هو

65
00:05:13,390 --> 00:05:19,350
أننا نقوم بتضمين العناصر الفردية في شكلنا ويمكننا أيضًا

66
00:05:19,350 --> 00:05:24,360
من تتبع قيمة تلك الحدود والقيام بالتحقق من صحة تلك العناصر.

67
00:05:25,500 --> 00:05:29,110
FormGroup مجموعة من FormControl، لذلك

68
00:05:29,110 --> 00:05:32,420
عندما تريد تنظيم FormControls معا كمجموعة

69
00:05:32,420 --> 00:05:37,700
ثم تعقب المعلومات حول هذه المجموعة ككل، ثم FormGroup

70
00:05:37,700 --> 00:05:43,240
تمكنك من تكتل مجموعة من FormControls معا.

71
00:05:44,780 --> 00:05:48,850
بالإضافة إلى ذلك، لدينا أيضًا فئة AbstractControl وهي

72
00:05:48,850 --> 00:05:53,930
فئة تستند إلى التجريدية لفئات FormControl، والتي يمكن استخدامها أيضًا لصالحنا

73
00:05:53,930 --> 00:05:58,500
على الرغم من

74
00:05:58,500 --> 00:06:02,630
أننا نريد رؤيتها تحديدًا في التمرين لاحقًا، ولكننا سنعود لاستخدامها في وقت لاحق.

75
00:06:05,600 --> 00:06:10,430
وأيضا لدينا فئة FormArray التي تمكنك من تحديد مصفوفة

76
00:06:10,430 --> 00:06:15,410
مفهرسة عدديا من مثيلات AbstractControl

77
00:06:15,410 --> 00:06:19,460
، مرة أخرى، كل من AbstractControl و FormArray، لن ندرس صراحة

78
00:06:19,460 --> 00:06:24,950
في هذا الدرس بالذات، لكننا سنراهم لاحقًا في الدورة.

79
00:06:24,950 --> 00:06:28,070
جانب آخر مثير للاهتمام من أشكال رد الفعل

80
00:06:28,070 --> 00:06:29,950
هو توافر FormBuilder.

81
00:06:29,950 --> 00:06:36,925
تسمح فئة FormBuilder باستخدام لإنشاء النماذج داخل شفرة TypeScript الخاصة بنا ومن

82
00:06:36,925 --> 00:06:42,115
ثم تكون قادرة على ربطها مع عناصر تحكم القالب هذه هناك.

83
00:06:42,115 --> 00:06:47,218
لذلك لاستخدام فئة منشئ النماذج، تقوم باستيراد منشئ النماذج من

84
00:06:47,218 --> 00:06:52,483
النماذج الزاوي ثم هناك بعد ذلك يمكنك استخدام منشئ النماذج لإنشاء النموذج،

85
00:06:52,483 --> 00:06:57,424
مثل إذا كنت تستخدم وفعل فئات محول النموذج

86
00:06:57,424 --> 00:07:03,040
وفئات مجموعة النموذج كما رأينا في الشريحة السابقة أن الرمز هو قليلا أكثر تفصيلا.

87
00:07:03,040 --> 00:07:08,180
ولكن باستخدام فئة FormBuilder، فإنه يقلل من تكرار inclitic في

88
00:07:08,180 --> 00:07:13,610
التعليمات البرمجية الخاصة بك ويجعلها أكثر إحكاما لتحديد الخطوط.

89
00:07:13,610 --> 00:07:16,440
سوف نستخدم فئة FormBuilder كنهج

90
00:07:16,440 --> 00:07:19,760
لبناء النماذج في التمرين التالي

91
00:07:19,760 --> 00:07:26,170
وهذا المثال مشتق من التمرين الذي ستقوم به مباشرة بعد هذه المحاضرة.

92
00:07:26,170 --> 00:07:31,320
حتى هنا يمكنك أن ترى أننا قد بنيت نموذج، كمجموعة من

93
00:07:31,320 --> 00:07:39,100
عناصر التحكم في النموذج هذه ولكل واحد منهم اسم معين وأيضا القيمة المعطاة لهم.

94
00:07:39,100 --> 00:07:43,540
من خلال إنشاء نموذج النموذج في شفرة typescript الخاصة بنا،

95
00:07:43,540 --> 00:07:48,030
لا تقوم تلقائيًا بملء نموذج النموذج، بل تحتاج إلى ملء

96
00:07:48,030 --> 00:07:51,190
نموذج النموذج حصريًا خاصةً إذا حصلت على البيانات في

97
00:07:51,190 --> 00:07:55,280
نموذج بيانات، فيجب تعيين نموذج البيانات في نموذج النموذج الخاص بك لملء القيم،

98
00:07:55,280 --> 00:08:00,580
وبالتالي فإن النموذج ونموذج البيانات منفصلة في أشكال تفاعلية.

99
00:08:00,580 --> 00:08:05,340
في النماذج المدفوعة للقالب رأيت أننا نحاول مباشرة في

100
00:08:05,340 --> 00:08:09,990
كائنات البيانات من ملف القالب إلى رمزنا التجريدي.

101
00:08:09,990 --> 00:08:17,610
لذلك في هذه الحالة، يتم الاحتفاظ بالنموذج ونموذج البيانات منفصلين، لذلك

102
00:08:17,610 --> 00:08:22,660
ستتدفق أي تغييرات تجريها على عناصر DOM في النموذج الخاص بك إلى نموذج النموذج

103
00:08:22,660 --> 00:08:28,030
ويجب عليك

104
00:08:28,030 --> 00:08:33,670
أن تعكس بيانات النموذج بشكل صريح مرة أخرى إلى نموذج البيانات هذا حتى من خلال خدمة أو أي وسيلة تختارها،

105
00:08:33,670 --> 00:08:39,240
لذلك يساعدنا هذا الفصل على تصميم شفرتنا بشكل أفضل، كما سنرى لاحقًا.

106
00:08:40,520 --> 00:08:45,490
تتوفر طريقتان لنا لملء نموذج نموذج من نموذج البيانات.

107
00:08:45,490 --> 00:08:50,280
لدينا طريقة setValue ()، والتي تمكننا من تعيين كل عنصر تحكم

108
00:08:50,280 --> 00:08:54,710
نموذج لقيمة معينة من نموذج البيانات أو لدينا PatchValue ()،

109
00:08:54,710 --> 00:08:59,360
والتي تمكنك من تحديث بعض عناصر التحكم فقط داخل نموذج النموذج الخاص بك.

110
00:08:59,360 --> 00:09:02,970
لذلك بمجرد الحصول على نموذج البيانات من النهاية الخلفية، من نموذج البيانات،

111
00:09:02,970 --> 00:09:08,030
يمكنك تصحيح القيم في نموذج النموذج الخاص بك أو تعيين القيم من نموذج

112
00:09:08,030 --> 00:09:13,130
البيانات الخاص بك إلى نموذج النموذج الخاص بك، في كثير من الأحيان، سنقوم بإنشاء نموذج البيانات،

113
00:09:13,130 --> 00:09:18,740
الذي يعكس بشكل معقول بنية النموذج.

114
00:09:18,740 --> 00:09:22,060
في التمرين الذي يلي، سترى أن لدي نموذج بيانات

115
00:09:22,060 --> 00:09:24,210
يستند إلى فئة،

116
00:09:24,210 --> 00:09:30,030
والتي تعكس بشكل وثيق نموذج النموذج الذي نستخدمه داخل مثالنا هناك.

117
00:09:31,740 --> 00:09:38,263
مع هذا الفهم السريع للأشكال التفاعلية، دعونا ننتقل الآن إلى التمرين

118
00:09:38,263 --> 00:09:43,880
حيث سنقوم بمضاعفة شكل تفاعلي داخل تطبيقنا الزاوي وعلى

119
00:09:43,880 --> 00:09:47,958
طول الطريق توحيد بعض المصطلحات

120
00:09:47,958 --> 00:09:52,866
وكذلك بعض الأفكار التي قمنا باستكشافها للتو في هذا الدرس.

121
00:09:52,866 --> 00:09:59,009
[ موسيقى]