5 : Angular2 – Components

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

نتابع ضمن هذه الحلقة المزيد من الشروح الننظرية حول بنية ومركبات angular 2.

في الحلقة الماضية تحدثنا بالتفصيل عن الموديول module ضمن angular 2. اما ضمن هذه الحلقة فسوف نتحدث عن مركب مهم وضروري ضمن angular 2 الا وهو المكونات components.

وكما نذكر من الحلقة السابقة, فإن الموديول module قد يتألف من عدة components.

دعونا الآن اذن نطّلع على بنية وطبيعة ال component.

Components

عبارة عن اجزاء منطقية من الكود تتواجد ضمن تطبيق angular 2.

يتألف ال component مما يلي:

  • “Template” – القالب: ويستخدم لتحديد واجهة HTML التي سيتم تهيئتها وعرضها ضمن التطبيق.
  • “Class”– مشابه لاي كلاس في اي لغة برمجة اخرى مثل  java or C.
    يحوي على خصائصproperties  وتوابع  methods. ويوجد ضمنه الكود الللازم لدعم الواجهة. وتتم برمجة الكلاس class باستخدام لغة TypeScript.
  • “Metadata” – تستخدم بهدف توسيع فعالية الصف class.

الآن دعونا ندهب ونفتح الملف التالي:

App.component.ts

بهدف انشاء اول component لنا.

والآن دعونا نضيف الكود التالي الى الملف, ومن ثم نناقش بالفصيل كل خطوة من الخطوات.

Class

كما ذكرنا منذ قليل, يتم تعريف وكتابة ال class  باستخدام لغة TypeScript.

وله  البناء التالي كما هو موضح بالشكل ادناه.

  • “Classname”– يمثل الاسم الذي سوف يتم اعطاءه للصف class.
  • “Propertyname”– الاسم الذي سيمثل الخاصية property
  • “PropertyType”– نمط ونوع الخاصية – مثلا string, integer…
  • “Value”– القيمة التي سيتم اسنادها الى الخاصيةproperty

مثال:

هنالك عدة نقاط من المهم الانتباه لها ضمن المثال المذكور:

  • في المثال تم تعريف صف class اسمه AppComponent
  • تم استخدام الكلمة المفتاحية “export” للدلالة على ان هذا المكون يمكن استخدامه ضمن مودول module اخرى ضمن تطبيق angular 2.
  • “appTitle” تمثل اسم الخاصية
  • نوع الخاصة من نمط string
  • قيمة الخاصية ‘Welcome’

 

القالب Template

وتمثل جزء من واجهة العرض التي سيتم عرضها ضمن التطبيق

  • “HTML Code” – عبارة عن كود html التي سيتم تهئيته وعرضه ضمن التطبيق.
  • “Class Properties”– عبارة عن خصائص الصف التي من الممكن الاشارة اليها هنا ضمن القالبtemplate .

مثال:

هنالك عدة نقاط من المهم الانتباه لها ضمن المثال المذكور:

  • قمنا بتعريف كود html الذي سيتم عرضه ضمن التطبيق
  • كما اننا نشير الى الخاصية appTitle التي تم تعريفها منذ قليل داخل الصف class .

Metadata

تستخدم بهدف توسيع فعالية الصف  class واضافة المزيد من المعلومات.

دعونا الان نلقي نظرة على الكود الكامل لكل من الصف class, القالب template  و ال metadata.

مثال:

نلاحظ النقاط التالية ضمن المثال السابق:

  • استخدمنا الكلمة المفتاحية “import” بهدف استيراد المكونات ‘component’ من موديول angular/core.
  • استخدمنا الكلمة المفتاحية ‘Component’ والتي يدرج تحتها كلمة ‘selector’ والتي تحدد تاغ من تاغات Html والذي سيستخدم في الصفحة الرئيسية.
    اسم التاغ ‘my-app’.

الآن دعونا نستعرض صفحة index.html.

دعونا نتحقق الان من وجود تاغ ‘my-app’ ضمن هذه الصفحة في جزء ال Body.

للتأكد من صحة مثالنا, ارجو وضع الكود التالي بمكان تاغ <body>

النتيجة

الآن لاستعراض النتيجة, افتح المتصفح على العنوان التالي:

Localhost:3000

ويجب ان يظهر الخرج التالي كما في الشكل ادناه

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

في الحلقة القادمة سنتحدث عن القوالب template, بشكل بسيط يوضح الغرض المطلوب منها.

ارجو ان ننتهي من هذه السلسة باقرب وقت ممكن لنتمكن بعدها من الانتقال الى موضوع شيق اكثر, تشكل angular 2 جزء اساسي منه, الا وهو برمجة تطبيقات الموبايل باستخدام HTML 5 & Angular 2.

والى لقاء قريب في الحلقة القادمة.

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

مع تحيات

م. نور الصباحي

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

 

المراجع:

  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 مدونون معجبون بهذه: