[MUSIC]
الآن بعد أن كان لدينا مقدمة سريعة
لأطر MVM و MVVM، والخدمات Angular، وكذلك حقن التبعية،
دعونا ننتقل الآن إلى التمرين التالي حيث سنقوم بإنشاء
أول خدمة Angular الخاصة بنا ثم حقنها في المكون الخاص
بنا والاستفادة منها داخل المكون.
للبدء، انتقل إلى التطبيق الخاص بك
في لوحة المحرر داخل مجلد التطبيق،
وإنشاء مجلد فرعي جديد وتسميه باسم الخدمات.
الآن سوف نستفيد من Angular CLI لإضافة خدمة جديدة إلى تطبيق Angular الخاص بنا.
للقيام بذلك، في نوع موجه نانوغرام
توليد الخدمة، والخدمات/الطبق.
لذلك سيؤدي هذا إلى إنشاء خدمة جديدة في مجلد الخدمات المسمى خدمة الطبق.
لذلك، بمجرد إنشاء هذا، ترى أن يتم إنشاء ملفين
بواسطة CLI الزاوي يسمى DishService.ts و dish.service.specter.ts.
يتم استخدام هذا واحد لاختبار خدمة Angular الخاصة بنا بينما سنتحدث عنه لاحقًا.
والثاني هو حيث سنقوم بإنشاء خدمة طبق لدينا ومن
ثم حقن ذلك في وحدة التطبيق لدينا والاستفادة منه في عنصر القائمة لدينا.
الذهاب إلى المحرر، دعونا فتح ملف dish.service.ts.
الآن، عند فتح هذا الملف، تلاحظ على الفور هنا
البيان الأول هناك قائلا، استيراد {حقن} من '@angular /كور'.
لذلك هذا حقن يسمح لنا لتحديد هذا
الديكور عن طريق الحقن إلى أي فئة التي حددناها هنا.
لذلك يمكنك أن ترى أننا نحدد فئة هنا تسمى DishService.
باستخدام هذا الديكور عن طريق الحقن لخدمة الطبق هذه،
ونحن جعل هذا الكائن الآن عن طريق الحقن داخل تطبيقنا.
لذلك هذا هو ما يمكن حقن التبعية لاستخدامها في
تطبيقنا.
لذلك بمجرد إعلان الصف على أنه قابل للحقن،
دعونا الآن تكوين DishService لدينا لتوفير بعض المعلومات بالنسبة لنا.
حتى هنا، أنا ذاهب لاستيراد،
فئة الطبق من المجلد المشترك،
وأيضا استيراد،
ثابت DUSES من،
مجلد مشترك هنا.
لذلك بمجرد استيراد هذين الاثنين،
يمكن الآن تكوين خدمتي لتوفير القيمة بالنسبة لنا.
حتى داخل الخدمة، وأنا ذاهب
لإضافة في طريقة جديدة استدعاء getDuises،
وهذه الطريقة سوف يعود في مجموعة من الأطباق هنا.
وبالتالي فإن هذه الطريقة ستعيد ثابت DUSES
الذي قمنا باستيراده إلى DishService الخاص بنا.
مع هذا، يتم الآن تكوين DishService لدينا
لتزويد مجموعة كائن JavaScript DUSES إلى أي
جزء آخر من تطبيقنا الذي يتطلب ذلك.
الآن قبل أن يحدث ذلك، نحن بحاجة إلى اتخاذ هذه الخدمة ومن
ثم حقن في طلبنا.
للقيام بذلك، سوف نفتح ملف.ts وحدة التطبيق.
حتى داخل ملف.ts وحدة التطبيق، مباشرة بعد استيراد
المكونات هناك حق، وأنا ذاهب لاستيراد،
ديشسرفيس الحق هناك.
ويتم استيراد هذا من,
خدمات DishService هنا.
حتى مرة واحدة ونحن استيراد ذلك، ثم سوف نعلن هذا ديشسرفيس كمزود.
حتى إذا ذهبت إلى الديكور وحدة نانوغرام، لذلك
ترى هذه الخاصية الثالثة هنا تسمى مقدمي الخدمات.
لذلك لدينا الإعلانات والواردات ومقدمي الخدمات.
لذلك كلما كان لديك خدمة تريد توفيرها
لجميع المكونات من جزء من هذه الوحدة.
ثم سوف تحدد أنه كمزود داخل الوحدة هنا.
لذا هناك، أنا ذاهب إلى القول، DishService، هنا.
حتى مع هذا، بلدي ديشسرفيس يصبح الآن متاحة لبقية التطبيق.
الآن، كيف يحدث هذا؟
ينظر التبعية في Angular إلى هذه المعلومات التي
أعلنناها هنا ثم يقرر أنه يحتاج إلى إنشاء DishService
وحقنه أينما كان مطلوبًا.
الآن، كيف نستفيد من تلك الخدمة؟
ونحن نرى أنه في مكون القائمة كنا في وقت سابق الحصول
على DUSES المستمر مباشرة عن طريق الاستيراد من ملف الأطباق المشتركة هنا.
الآن هذه ليست الطريقة المثالية للحصول على المعلومات،
بدلا من ربط المعلومات مباشرة في المكون الخاص بك،
يجب عليك بدلا من ترك خدمة جلب تلك المعلومات لك.
في وقت لاحق، يمكننا إعادة تصميم خدمتنا لتكون قادرة على الذهاب
وجلب نفس المعلومات من خادم الخلفية إذا كنت تحتاج إلى ذلك.
في الواقع، هذا ما سنفعله في بعض التدريبات اللاحقة.
لذلك سوف تفوض مسؤولية جلب المعلومات إلى الخدمة
ومن ثم عليك فقط الاستفادة من الخدمة ضمن مكون القائمة هذا.
لذلك سنقوم بحذف مكون الأطباق هذا من هناك،
وبدلاً من ذلك سنقوم باستيراد ذلك DishService هنا.
ويتم استيراد هذا DishService من
ملف الخدمات/dish.service هنا.
لذلك بعد إضافة هذا الآن قمنا بجزء واحد من المهمة.
الآن نحن بحاجة إلى جعل هذه الخدمة متاحة للمكون لدينا للاستفادة منها.
لذلك هذا هو المكان الذي سوف ننزل إلى هذا المنشئ هنا.
في هذا المُنشئ، لذلك
الآن ترى استخدام المُنشئ داخل صفنا هنا.
حتى في هذا المنشئ سوف نرى
ديشسرفيس الخاصة و ديشسرفيس هنا.
لذلك هذا هو من نوع ديشسرفيس، لذلك
عندما تعلن هذا في منشئ، عندما يتم إنشاء هذا المكون،
ثم هذا ديشسرفيس الذي قمت بحقنه في وحدة التطبيق.
عند حقن ذلك في وحدة التطبيق،
فإنه سيتم إنشاء كائن DishService واحد.
وسيتم توفير كائن DishService هذا لك داخل
مكون القائمة الخاص بك هنا.
حتى الآن يمكنك الاتصال بالطرق التي يوفرها
لك هذا DishService من أجل القيام بالعمل نيابة عنك.
لذلك بمجرد أن تضع ذلك هناك،
ونحن الآن ندرك أننا لم يعد لدينا هذه الأطباق ثابتة هنا.
لذلك أنا بحاجة لجلب هذه المعلومات بطريقة أو بأخرى.
الآن هذا هو المكان الذي سأستفيد فيه من الخدمة التي لدي المتاحة لي
لجلب المعلومات لنا.
أين نجلب هذه المعلومات؟
لذلك، هذا هو المكان الذي سنأخذ مساعدة من هذه الطريقة دورة الحياة تسمى
NgonInit.
لذلك، عندما تعلن طريقة دورة الحياة هذه تسمى ngonInit في
التطبيق الخاص بك، لذلك ترى أنه في الفصل، تقول تنفذ OnInit.
لذا فإن تنفيذ هذا OnInit يتطلب منك
تنفيذ طريقة ngonInit هذه كجزء من صفك هنا.
حتى داخل هذه الطريقة نغونينيت،
يمكنك الآن أن تطلب من الخدمة لجلب هذه المعلومات.
لماذا هذا صحيح؟
سيتم تنفيذ طريقة دورة الحياة هذه
بواسطة إطار Angular كلما تم إنشاء هذا المكون.
لذلك كلما تم إنشاء هذا المكون، سيتم تنفيذ هذه الطريقة.
لذلك عندما يتم تنفيذ هذه الطريقة، ثم في هذه المرحلة يمكنني الذهاب
وجلب الأطباق من ديشسرفيس.
لذلك أستطيع أن أقول ديشسرفيس،
وبعد ذلك سوف تعرف أن لديك طريقة جيتدايوسيس داخل ديشسرفيس.
يمكنك استدعاء طريقة لجلب الأطباق بالنسبة لك.
الآن عندما نفعل ذلك، ثم سيتم توفير كائن الأطباق من قبل
الخدمة لنا من خلال هذه الطريقة getDuses.
والتي يمكن وضعها في الأطباق لدينا متغير المحلية التي حددناها هنا.
لذلك مع هذا، ونحن استكمال التحديث
لجميع ملفات التطبيق لدينا.
دعونا نذهب ونلقي نظرة سريعة على تطبيق الزاوي الناتج.
التبديل إلى المتصفح، يمكنك الآن أن ترى أنه في المتصفح
تطبيق Angular يجعل تماما كما كان من قبل.
في هذا الإصدار كما رأيت،
سيتم جلب المعلومات حول الأطباق إلى المكون الخاص بك عن طريق الاستفادة من الخدمة.
الخدمة بدورها سوف تجلب هذه المعلومات لك.
الآن في هذه اللحظة نحن الحفاظ على الخدمة الأساسية جدا.
تقوم الخدمة ببساطة بإرجاع هذه القيمة الثابتة التي حددناها هنا.
في وقت لاحق، يمكنك أن تتخيل أنك ستقوم بتوسيع الخدمة للذهاب
وجلب هذه المعلومات من الخادم الخلفي.
و عندما يحدث ذلك, فإن جلب المعلومات لن يكون على الفور.
هذا هو المكان الذي سنحتاج فيه إلى مساعدة الوعود
وكذلك نهج جافا سكريبت التفاعلي لدعم هذا التأخير
والتعامل مع التأخير في جلب المعلومات داخل تطبيقنا.
سنتحدث عن ذلك بمزيد من التفصيل في الوحدة التالية.
في الوقت الحالي، سيتم تشغيل تطبيقنا على ما يرام، حتى تتمكن من تحديد أي واحد من
تلك الأطباق وسيتم عرض المعلومات تماما كما كان من قبل.
مع هذا، ننافس هذا التمرين حيث نتعلم أساسيات خدمات Angular.
ورأينا أيضًا كيف يمكننا الاستفادة من خدمة Angular،
ضمن مكون التطبيقات لدينا.
هذا هو الوقت المناسب بالنسبة لك للقيام جيت الالتزام مع الخدمات الأساسية الرسالة.
[ موسيقى].