8 : Angular2 – Data Binding ربط المعطيات

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

سنتحدث اليوم عن طريقة ربط المعطيات data binding  ضمن angular 2.

تعتبر خاصية ربط المعطيات باتجاهين عبارة عن ميزة كانت متواجدة ضمن angular js, ولكن تم ازالة هذه الميزة من الاصدار الجديد angular 2.data binding

لنوضح الآن  طريقة الربط ضمن angular 2.

1 class defnision.JPG

لنفترض بأن لدينا class  ويوجد ضمنه خاصية property لها قيمة ونمط معطيات كما يلي:

عندها, يصبح بإمكاننا ربط احدى خاصيات عناصر html بهذه الخاصية كما يلي:

2 html tag property.JPG

عندها سوف تسند قيمة هذه الخاصية Property الى خاصية عنصر html التي تم ربطها به.

سنطرح مثال عن كيفية تحقيق هذا النوع من الربط للمعطيات.

في مثالنا, سنعمد على عرض صور, بحيث ان مصدر الصور images source سوف يأتي من الخاصية الواردة ضمن ال class.

فيما يلي الخطوات المطلوبة لتحقيق هذا الربط:

  • قم بتحميل اي صورتين, على سبيل المثال, يمكن تحميل الصورة ادناه images_download.jpg.png
  • خزن هذه الصور ضمن مجلد يدعى “Images” ضمن مجلد “app”.
  • اضف الكود التالي الى ملف
    component.ts كما هو موضح في الشكل ادناه.
    3 step.JPG
  • اضف الكود التالي الى ملف
    component.html كما هو موضح ادناه
    4 step 4.JPG

كما نلاحظ في الكود اعلاه, فإننا نسند الخاصية src من الصورة الى الخاصية التابعة للصف.

النتيجة:

نتيجة تنفييذ البرنامج السابق ستُظهر كل صورة من الصور وبجوارها رقم.

————————

والى اللقاء في الحلقة القادمة التي سنتحدث فيها ان شاء الله عن عمليات الاضافة, الحذف, التعديل والاستعراض باستخدام HTTP.

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

 

الترجمة المصطلح
مفتوح المصدر 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 مدونون معجبون بهذه: