1
00:00:00,031 --> 00:00:04,477
[MUSIC]

2
00:00:04,477 --> 00:00:09,184
الآن بعد أن كان لدينا مقدمة سريعة

3
00:00:09,184 --> 00:00:15,564
لأطر MVM و MVVM، والخدمات Angular، وكذلك حقن التبعية،

4
00:00:15,564 --> 00:00:21,003
دعونا ننتقل الآن إلى التمرين التالي حيث سنقوم بإنشاء

5
00:00:21,003 --> 00:00:26,442
أول خدمة Angular الخاصة بنا ثم حقنها في المكون الخاص

6
00:00:26,442 --> 00:00:29,710
بنا والاستفادة منها داخل المكون.

7
00:00:29,710 --> 00:00:34,370
للبدء، انتقل إلى التطبيق الخاص بك

8
00:00:34,370 --> 00:00:38,629
في لوحة المحرر داخل مجلد التطبيق،

9
00:00:38,629 --> 00:00:44,237
وإنشاء مجلد فرعي جديد وتسميه باسم الخدمات.

10
00:00:44,237 --> 00:00:52,918
الآن سوف نستفيد من Angular CLI لإضافة خدمة جديدة إلى تطبيق Angular الخاص بنا.

11
00:00:52,918 --> 00:00:57,953
للقيام بذلك، في نوع موجه نانوغرام

12
00:00:57,953 --> 00:01:04,673
توليد الخدمة، والخدمات/الطبق.

13
00:01:04,673 --> 00:01:11,480
لذلك سيؤدي هذا إلى إنشاء خدمة جديدة في مجلد الخدمات المسمى خدمة الطبق.

14
00:01:11,480 --> 00:01:16,815
لذلك، بمجرد إنشاء هذا، ترى أن يتم إنشاء ملفين

15
00:01:16,815 --> 00:01:23,837
بواسطة CLI الزاوي يسمى DishService.ts و dish.service.specter.ts.

16
00:01:23,837 --> 00:01:30,010
يتم استخدام هذا واحد لاختبار خدمة Angular الخاصة بنا بينما سنتحدث عنه لاحقًا.

17
00:01:30,010 --> 00:01:35,361
والثاني هو حيث سنقوم بإنشاء خدمة طبق لدينا ومن

18
00:01:35,361 --> 00:01:42,516
ثم حقن ذلك في وحدة التطبيق لدينا والاستفادة منه في عنصر القائمة لدينا.

19
00:01:42,516 --> 00:01:47,550
الذهاب إلى المحرر، دعونا فتح ملف dish.service.ts.

20
00:01:47,550 --> 00:01:52,618
الآن، عند فتح هذا الملف، تلاحظ على الفور هنا

21
00:01:52,618 --> 00:01:58,108
البيان الأول هناك قائلا، استيراد {حقن} من '@angular /كور'.

22
00:01:58,108 --> 00:02:02,791
لذلك هذا حقن يسمح لنا لتحديد هذا

23
00:02:02,791 --> 00:02:06,674
الديكور عن طريق الحقن إلى أي فئة التي حددناها هنا.

24
00:02:06,674 --> 00:02:10,730
لذلك يمكنك أن ترى أننا نحدد فئة هنا تسمى DishService.

25
00:02:10,730 --> 00:02:15,532
باستخدام هذا الديكور عن طريق الحقن لخدمة الطبق هذه،

26
00:02:15,532 --> 00:02:21,030
ونحن جعل هذا الكائن الآن عن طريق الحقن داخل تطبيقنا.

27
00:02:21,030 --> 00:02:25,481
لذلك هذا هو ما يمكن حقن التبعية لاستخدامها في

28
00:02:25,481 --> 00:02:26,490
تطبيقنا.

29
00:02:26,490 --> 00:02:30,345
لذلك بمجرد إعلان الصف على أنه قابل للحقن،

30
00:02:30,345 --> 00:02:36,746
دعونا الآن تكوين DishService لدينا لتوفير بعض المعلومات بالنسبة لنا.

31
00:02:36,746 --> 00:02:39,119
حتى هنا، أنا ذاهب لاستيراد،

32
00:02:42,757 --> 00:02:51,413
فئة الطبق من المجلد المشترك،

33
00:02:51,413 --> 00:02:55,354
وأيضا استيراد،

34
00:02:58,307 --> 00:03:01,887
ثابت DUSES من،

35
00:03:08,402 --> 00:03:11,574
مجلد مشترك هنا.

36
00:03:11,574 --> 00:03:14,353
لذلك بمجرد استيراد هذين الاثنين،

37
00:03:14,353 --> 00:03:19,432
يمكن الآن تكوين خدمتي لتوفير القيمة بالنسبة لنا.

38
00:03:19,432 --> 00:03:24,246
حتى داخل الخدمة، وأنا ذاهب

39
00:03:24,246 --> 00:03:29,370
لإضافة في طريقة جديدة استدعاء getDuises،

40
00:03:29,370 --> 00:03:35,753
وهذه الطريقة سوف يعود في مجموعة من الأطباق هنا.

41
00:03:35,753 --> 00:03:41,098
وبالتالي فإن هذه الطريقة ستعيد ثابت DUSES

42
00:03:41,098 --> 00:03:45,722
الذي قمنا باستيراده إلى DishService الخاص بنا.

43
00:03:45,722 --> 00:03:50,239
مع هذا، يتم الآن تكوين DishService لدينا

44
00:03:50,239 --> 00:03:54,866
لتزويد مجموعة كائن JavaScript DUSES إلى أي

45
00:03:54,866 --> 00:03:59,398
جزء آخر من تطبيقنا الذي يتطلب ذلك.

46
00:03:59,398 --> 00:04:03,862
الآن قبل أن يحدث ذلك، نحن بحاجة إلى اتخاذ هذه الخدمة ومن

47
00:04:03,862 --> 00:04:06,660
ثم حقن في طلبنا.

48
00:04:06,660 --> 00:04:11,652
للقيام بذلك، سوف نفتح ملف.ts وحدة التطبيق.

49
00:04:11,652 --> 00:04:17,214
حتى داخل ملف.ts وحدة التطبيق، مباشرة بعد استيراد

50
00:04:17,214 --> 00:04:22,333
المكونات هناك حق، وأنا ذاهب لاستيراد،

51
00:04:25,974 --> 00:04:34,950
ديشسرفيس الحق هناك.

52
00:04:34,950 --> 00:04:36,618
ويتم استيراد هذا من,

53
00:04:42,730 --> 00:04:46,466
خدمات DishService هنا.

54
00:04:46,466 --> 00:04:53,885
حتى مرة واحدة ونحن استيراد ذلك، ثم سوف نعلن هذا ديشسرفيس كمزود.

55
00:04:53,885 --> 00:04:58,121
حتى إذا ذهبت إلى الديكور وحدة نانوغرام، لذلك

56
00:04:58,121 --> 00:05:03,170
ترى هذه الخاصية الثالثة هنا تسمى مقدمي الخدمات.

57
00:05:03,170 --> 00:05:05,960
لذلك لدينا الإعلانات والواردات ومقدمي الخدمات.

58
00:05:05,960 --> 00:05:11,176
لذلك كلما كان لديك خدمة تريد توفيرها

59
00:05:11,176 --> 00:05:14,860
لجميع المكونات من جزء من هذه الوحدة.

60
00:05:14,860 --> 00:05:21,170
ثم سوف تحدد أنه كمزود داخل الوحدة هنا.

61
00:05:21,170 --> 00:05:25,618
لذا هناك، أنا ذاهب إلى القول، DishService، هنا.

62
00:05:25,618 --> 00:05:31,036
حتى مع هذا، بلدي ديشسرفيس يصبح الآن متاحة لبقية التطبيق.

63
00:05:31,036 --> 00:05:32,186
الآن، كيف يحدث هذا؟

64
00:05:32,186 --> 00:05:36,948
ينظر التبعية في Angular إلى هذه المعلومات التي

65
00:05:36,948 --> 00:05:41,944
أعلنناها هنا ثم يقرر أنه يحتاج إلى إنشاء DishService

66
00:05:41,944 --> 00:05:44,382
وحقنه أينما كان مطلوبًا.

67
00:05:44,382 --> 00:05:47,092
الآن، كيف نستفيد من تلك الخدمة؟

68
00:05:47,092 --> 00:05:52,674
ونحن نرى أنه في مكون القائمة كنا في وقت سابق الحصول

69
00:05:52,674 --> 00:06:00,180
على DUSES المستمر مباشرة عن طريق الاستيراد من ملف الأطباق المشتركة هنا.

70
00:06:00,180 --> 00:06:04,681
الآن هذه ليست الطريقة المثالية للحصول على المعلومات،

71
00:06:04,681 --> 00:06:09,812
بدلا من ربط المعلومات مباشرة في المكون الخاص بك،

72
00:06:09,812 --> 00:06:14,685
يجب عليك بدلا من ترك خدمة جلب تلك المعلومات لك.

73
00:06:14,685 --> 00:06:19,065
في وقت لاحق، يمكننا إعادة تصميم خدمتنا لتكون قادرة على الذهاب

74
00:06:19,065 --> 00:06:24,579
وجلب نفس المعلومات من خادم الخلفية إذا كنت تحتاج إلى ذلك.

75
00:06:24,579 --> 00:06:28,396
في الواقع، هذا ما سنفعله في بعض التدريبات اللاحقة.

76
00:06:28,396 --> 00:06:33,384
لذلك سوف تفوض مسؤولية جلب المعلومات إلى الخدمة

77
00:06:33,384 --> 00:06:37,814
ومن ثم عليك فقط الاستفادة من الخدمة ضمن مكون القائمة هذا.

78
00:06:37,814 --> 00:06:43,627
لذلك سنقوم بحذف مكون الأطباق هذا من هناك،

79
00:06:43,627 --> 00:06:48,806
وبدلاً من ذلك سنقوم باستيراد ذلك DishService هنا.

80
00:06:48,806 --> 00:06:52,105
ويتم استيراد هذا DishService من

81
00:06:57,492 --> 00:07:04,140
ملف الخدمات/dish.service هنا.

82
00:07:04,140 --> 00:07:09,744
لذلك بعد إضافة هذا الآن قمنا بجزء واحد من المهمة.

83
00:07:09,744 --> 00:07:14,774
الآن نحن بحاجة إلى جعل هذه الخدمة متاحة للمكون لدينا للاستفادة منها.

84
00:07:14,774 --> 00:07:18,107
لذلك هذا هو المكان الذي سوف ننزل إلى هذا المنشئ هنا.

85
00:07:18,107 --> 00:07:19,769
في هذا المُنشئ، لذلك

86
00:07:19,769 --> 00:07:23,813
الآن ترى استخدام المُنشئ داخل صفنا هنا.

87
00:07:23,813 --> 00:07:28,814
حتى في هذا المنشئ سوف نرى

88
00:07:28,814 --> 00:07:35,609
ديشسرفيس الخاصة و ديشسرفيس هنا.

89
00:07:35,609 --> 00:07:38,377
لذلك هذا هو من نوع ديشسرفيس، لذلك

90
00:07:38,377 --> 00:07:43,914
عندما تعلن هذا في منشئ، عندما يتم إنشاء هذا المكون،

91
00:07:43,914 --> 00:07:48,771
ثم هذا ديشسرفيس الذي قمت بحقنه في وحدة التطبيق.

92
00:07:48,771 --> 00:07:52,222
عند حقن ذلك في وحدة التطبيق،

93
00:07:52,222 --> 00:07:56,177
فإنه سيتم إنشاء كائن DishService واحد.

94
00:07:56,177 --> 00:08:00,956
وسيتم توفير كائن DishService هذا لك داخل

95
00:08:00,956 --> 00:08:02,123
مكون القائمة الخاص بك هنا.

96
00:08:02,123 --> 00:08:09,606
حتى الآن يمكنك الاتصال بالطرق التي يوفرها

97
00:08:09,606 --> 00:08:13,780
لك هذا DishService من أجل القيام بالعمل نيابة عنك.

98
00:08:13,780 --> 00:08:15,847
لذلك بمجرد أن تضع ذلك هناك،

99
00:08:15,847 --> 00:08:20,333
ونحن الآن ندرك أننا لم يعد لدينا هذه الأطباق ثابتة هنا.

100
00:08:20,333 --> 00:08:24,311
لذلك أنا بحاجة لجلب هذه المعلومات بطريقة أو بأخرى.

101
00:08:24,311 --> 00:08:29,138
الآن هذا هو المكان الذي سأستفيد فيه من الخدمة التي لدي المتاحة لي

102
00:08:29,138 --> 00:08:31,023
لجلب المعلومات لنا.

103
00:08:31,023 --> 00:08:33,257
أين نجلب هذه المعلومات؟

104
00:08:33,257 --> 00:08:38,058
لذلك، هذا هو المكان الذي سنأخذ مساعدة من هذه الطريقة دورة الحياة تسمى

105
00:08:38,058 --> 00:08:38,801
NgonInit.

106
00:08:38,801 --> 00:08:43,861
لذلك، عندما تعلن طريقة دورة الحياة هذه تسمى ngonInit في

107
00:08:43,861 --> 00:08:49,561
التطبيق الخاص بك، لذلك ترى أنه في الفصل، تقول تنفذ OnInit.

108
00:08:49,561 --> 00:08:54,239
لذا فإن تنفيذ هذا OnInit يتطلب منك

109
00:08:54,239 --> 00:08:59,570
تنفيذ طريقة ngonInit هذه كجزء من صفك هنا.

110
00:08:59,570 --> 00:09:02,461
حتى داخل هذه الطريقة نغونينيت،

111
00:09:02,461 --> 00:09:07,450
يمكنك الآن أن تطلب من الخدمة لجلب هذه المعلومات.

112
00:09:07,450 --> 00:09:08,690
لماذا هذا صحيح؟

113
00:09:08,690 --> 00:09:13,560
سيتم تنفيذ طريقة دورة الحياة هذه

114
00:09:13,560 --> 00:09:19,040
بواسطة إطار Angular كلما تم إنشاء هذا المكون.

115
00:09:19,040 --> 00:09:23,770
لذلك كلما تم إنشاء هذا المكون، سيتم تنفيذ هذه الطريقة.

116
00:09:23,770 --> 00:09:30,324
لذلك عندما يتم تنفيذ هذه الطريقة، ثم في هذه المرحلة يمكنني الذهاب

117
00:09:30,324 --> 00:09:34,623
وجلب الأطباق من ديشسرفيس.

118
00:09:34,623 --> 00:09:36,839
لذلك أستطيع أن أقول ديشسرفيس،

119
00:09:36,839 --> 00:09:42,700
وبعد ذلك سوف تعرف أن لديك طريقة جيتدايوسيس داخل ديشسرفيس.

120
00:09:42,700 --> 00:09:48,105
يمكنك استدعاء طريقة لجلب الأطباق بالنسبة لك.

121
00:09:48,105 --> 00:09:52,511
الآن عندما نفعل ذلك، ثم سيتم توفير كائن الأطباق من قبل

122
00:09:52,511 --> 00:09:56,090
الخدمة لنا من خلال هذه الطريقة getDuses.

123
00:09:56,090 --> 00:10:03,829
والتي يمكن وضعها في الأطباق لدينا متغير المحلية التي حددناها هنا.

124
00:10:03,829 --> 00:10:08,563
لذلك مع هذا، ونحن استكمال التحديث

125
00:10:08,563 --> 00:10:12,847
لجميع ملفات التطبيق لدينا.

126
00:10:12,847 --> 00:10:18,993
دعونا نذهب ونلقي نظرة سريعة على تطبيق الزاوي الناتج.

127
00:10:18,993 --> 00:10:23,507
التبديل إلى المتصفح، يمكنك الآن أن ترى أنه في المتصفح

128
00:10:23,507 --> 00:10:26,030
تطبيق Angular يجعل تماما كما كان من قبل.

129
00:10:26,030 --> 00:10:30,342
في هذا الإصدار كما رأيت،

130
00:10:30,342 --> 00:10:34,967
سيتم جلب المعلومات حول الأطباق إلى المكون الخاص بك عن طريق الاستفادة من الخدمة.

131
00:10:34,967 --> 00:10:38,847
الخدمة بدورها سوف تجلب هذه المعلومات لك.

132
00:10:38,847 --> 00:10:41,945
الآن في هذه اللحظة نحن الحفاظ على الخدمة الأساسية جدا.

133
00:10:41,945 --> 00:10:46,105
تقوم الخدمة ببساطة بإرجاع هذه القيمة الثابتة التي حددناها هنا.

134
00:10:46,105 --> 00:10:50,738
في وقت لاحق، يمكنك أن تتخيل أنك ستقوم بتوسيع الخدمة للذهاب

135
00:10:50,738 --> 00:10:55,428
وجلب هذه المعلومات من الخادم الخلفي.

136
00:10:55,428 --> 00:11:00,489
و عندما يحدث ذلك, فإن جلب المعلومات لن يكون على الفور.

137
00:11:00,489 --> 00:11:04,911
هذا هو المكان الذي سنحتاج فيه إلى مساعدة الوعود

138
00:11:04,911 --> 00:11:11,022
وكذلك نهج جافا سكريبت التفاعلي لدعم هذا التأخير

139
00:11:11,022 --> 00:11:17,881
والتعامل مع التأخير في جلب المعلومات داخل تطبيقنا.

140
00:11:17,881 --> 00:11:21,699
سنتحدث عن ذلك بمزيد من التفصيل في الوحدة التالية.

141
00:11:21,699 --> 00:11:26,683
في الوقت الحالي، سيتم تشغيل تطبيقنا على ما يرام، حتى تتمكن من تحديد أي واحد من

142
00:11:26,683 --> 00:11:32,370
تلك الأطباق وسيتم عرض المعلومات تماما كما كان من قبل.

143
00:11:32,370 --> 00:11:38,250
مع هذا، ننافس هذا التمرين حيث نتعلم أساسيات خدمات Angular.

144
00:11:38,250 --> 00:11:41,700
ورأينا أيضًا كيف يمكننا الاستفادة من خدمة Angular،

145
00:11:41,700 --> 00:11:46,118
ضمن مكون التطبيقات لدينا.

146
00:11:46,118 --> 00:11:51,682
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الخدمات الأساسية الرسالة.

147
00:11:51,682 --> 00:11:57,797
[ موسيقى].