9 : Angular2 – CRUD Operations Using HTTP

facebook-groupالسلام عليكم ورحمة الله وبركاته

نتابع ضمن هذه الحلقة من سلسلة Angular 2 , بالحديث عن العمليات CRUD باستخدام Angular 2. وبشكل خاص سوف نتحدث عن امكانية قراءة المعطيات باستخدام web service من خلال اطار عمل angular 2.

angular-2-http

 

مثال:

سنقوم ضمن هذا المثال, بتعريف مصدر للمعطيات data source وسيكون ببساطة عبارة عن ملف json يحوي على مجموعة منتجات.

ومن ثم سوف نقوم بتعريف خدمة service, التي ستقوم بدورها بقراءة هذه المعطيات من ملف json. ومن ثم سوف نستخدم هذه الخدمة service ضمن ملف app.component.ts بهدف عرض المنتجات.

الخطوة الاولى:

سنقوم بتعريف ملف باسم products.json ضمن برنامج Visual Studio code – او اي محرر نصوص اخر.

1-product_service.jpg.png

سنضع الكود التالي ضمن ملف prodcuts.json.

الكود يمثل المعطيات – المنتجات – التي سوف نعرضها ضمن تطبيق angular 2.

1-1 products list.JPG

الخطوة الثانية:

سنقوم بتعريف Interface والتي سوف تكون بمثابة class لتعريف عناصر المنتج الذي نرغب بقراءة معلوماته.

انشأ ملف باسم products.ts.

2 products.jpg.png

الخطوة الثالثة:

ضع الكود التالي ضمن الملف الذي قمت بإنشاءه للتو.

3 - interface code.JPG

كما هو واضح من الكود اعلاه, فإن الواجهة Interface تحوي التعريف الاساسي لعناصر المنتج الا وهي:

  • ProductID
  • ProductName

والتي هي عبارة عن خواص ضمن هذه الواجهة.

الخطوة الرابعة:

ضع الكود التالي ضمن ملف app.module.ts:

4 app module ts.jpg

الخطوة الخامسة:

قم بتعريف الملف products.service.ts

5 define_products.jpg.png

الخطوة السادسة:

اضف الكود التالي للملف الذي قمت بإنشاءه للتو

6 product service.JPG

سنفصل بعض النقاط من الكود المذكور اعلاه:

  • تم استيراد كل من
    {Http, Response} from ‘@angular/http’
    لاننا سوف نستخدم التوابع الموجودة ضمن http بهدف احضار المعطيات من ملف json
  • العبارات المدرجة ادناه تستخدم بهدف تفعيل امكانية الاستفادة من اطارالعمل التفاعلي Reactive framework, والتي من الممكن استخدامها بهدف انشاء Observable variable.6 notes
  • Observable framework: يستخدم بهدف الكشف عن اي تغيرات تحصل في استجابة http, والتي يمكن عندها – اي بعد كشف هذه التغيرات – اعادة ارسالها الى التطبيق الاساسي.
  • تم استخدام عبارة
    private _producturl = ‘app/products.json’
    بهدف تحديد موقع ملف المعطيات data source file location.
    وبنفس الوقت, ممكن ان تستخدم بهدف تحديد موقع ومسار web service.
  • من ثم قمنا بتعريف متحول variable من نمط Http, والذي سوف يستخدم بهدف احضار المعطيات من مصدر المعطيات data source.
  • ما إن نحضر المعطيات من ملف مصدر المعطيات data source file, بعدها نقوم باستخدام تعليمة
    stringify(data)
    بهدف ارسال المعطيات الى browser consule.

الخطوة السابعة:

ضع الكود التالي ضمن ملف

App.component.ts

7.JPG

العنصر الاساسي ضمن الكود السابق يتمثل بخيار ‘subscribe’ والذي يستخدم للتنصت على التابع getproducts() لاحضار المعطيات من مصدر المعطيات.

 

الآن, وبعد حفظ كل الكود السابق, وتشغيل التطبيق باستخدام npm. اذهب الى المتصفح, وسوف ترى الخرج التالي – بعد الاستعانة ب f12  او ما يعرف ب Developer tools لكي تستطيع رؤية النتيجة ضمن browser console كما يلي:

result using_npm.jpg

وبهذا المثال البسيط والمفيد ننهي حلقتنا لهذا اليوم, ببساطة وبتطبيق نفس الخطوات.

يمكن احضار معطيات من web service وعرضها على المتصفح.

والى اللقاء في حلقة قادمة نتحدث فيها معالجة الاخطاء error handling ضمن angular 2.

والى ذلك الحين نستودعكم الله والسلام عليكم ورحمة الله وبركاته

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform
موديول Module
صف Class
فعالية Functionality
مكون Component
استيراد import
قالب template
 الموجهات  Directives

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

 

Advertisements

, , , , , , , , , , , ,

  1. أضف تعليق

اترك رد

Please log in using one of these methods to post your comment:

WordPress.com Logo

أنت تعلق بإستخدام حساب WordPress.com. تسجيل خروج   / تغيير )

صورة تويتر

أنت تعلق بإستخدام حساب Twitter. تسجيل خروج   / تغيير )

Facebook photo

أنت تعلق بإستخدام حساب Facebook. تسجيل خروج   / تغيير )

Google+ photo

أنت تعلق بإستخدام حساب Google+. تسجيل خروج   / تغيير )

Connecting to %s

%d مدونون معجبون بهذه: