7 : Angular2 – Directives الموجهات

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

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

سنتحدث ضمن هذه الحلقة عن الموجهات directives ضمن angular 2

الموجهات Directives:

هنالك 3 انواع للموجهات directives ضمن angular 2. كما هو موضح بالشكل ادناه

angular 2 directives.PNG

Attribute directives:

مثل

  • ngClass
  • ngStyle

Structural Directive:

مثل:

  • ngIf
  • ngFor
  • ngSwitch

وهي ستكون حديثنا ضمن هذه الحلقة.

Directive : عبارة عن عنصر من عناصر Html, يستخدم بهدف توسعة امكانيات html عبر ردفها بعناصر جديدة.

تحوي angular 2 الموجهات directives التالية والتي يتم استدعائها كجزء من موديول BrowserModule.

  • ngif
  • ngFor

باستعراض ملف app.module.ts بإمكانك رؤية الكود ادناه, بالاضافة الى استدعاء موديول BrowserModule. عبر تعريف هذا الموديول, يصبح بإمكانك عندها الاستفادة من كل من هذين الموجهين ngif, ngFor.

1.JPG

الآن, دعونا ننظر الى كل موجه من هذه الموجهات على حدا.

 ngIf

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

2.JPG

في حال كانت القيمة المنطق

ية للتعبير المدرج مع ngIf محققة – اي تساوي true – عندها فإنه تتم اضافة العنصر المرتبط بها الى كود Html.  وإلا فإنه لن تتم اضافة العنصر.

دعونا الآن نطرح مثال لكيفية استخدام موجه ngif.

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

في البداية قم بإضافة خاصية تدعى ‘appStatus’ الى AppComponent Class.  هذه الخاصية من النمط المنطقي Boolean. وسنسند القيمة true

الى هذه الخاصية.

3.JPG

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

الآن قم بإضافة الكود التالي الى ملف
app.component.html

4

نجد في الكود السابق, بإننا قمنا بتعريف الموجه ngIf . واعطائه القيمة ‘appStatus’ التي هي في الاساس تملك القيمة true وبالتالي فإن الشرط المنطقي سوف يتحقق, وسوف يتم اضافة هذا العنصر الى كود html.

وكنتيجة لذلك سوف يظهر لنا الخرج التالي:

ngif.jpg.png

ngFor

يستخدم العنصر ngFor بمثابة حلقة تكرار loop.

5- ngFor.JPG

حيث ان المتحول let  عبارة عن متحول مؤقت يستخدم بهدف عرض القيمة الموجودة ضمن variablelist.

سنطرح الآن مثالا حول استخدام ngFor.

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

اضف الخاصية ‘appList’ الى ملف app.comopnent.ts كما هو موضح بالشكل ادناه.

6 - ng for

كما هو واضح من الشكل, فإن appList عبارة عن مصفوفة مكونة من عنصرين.

كل عنصر منهما لديه خاصيتين: ID, Name.

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

عرف الكود التالي ضمن ملف app.component.html.

7 - ng for

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

وستظهر لنا  النتيجة عبر المتصفح كالتالي:

ngfor.jpg

وبهذا الحديث عن الموجهات directives نختم حلقتنا القصيرة لهذا اليوم, على ان نتابع في حلقة قادمة ان شاء الله الحديث عن ربط المعطيات ضمن 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 مدونون معجبون بهذه: