4: Angular2 – Architecture الهيكلة والبنية

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

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

اما في هذه الحلقة فسوف نتحدث عن البنية الاساسية لتطبيق angular 2

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

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

الموديول Module:

تستخدم  الموديول module  في angular 2  بهدف وضع حدود منطقية ضمن التطبيق.

مثلا بدل من وضع الكودل كله كجزء واحد ضمن التطبيق, يمكن عبر بناء موديول module منفصلة لكل فعالية ضمن التطبيق.

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

استخدم Visual Studio code – او اي محرر اخر – لفتح الملف التالي:
Demo -> app ->app.module.ts

يعرف هذا بالملف باسم صف الموديول الجذري root module calss.

root_module_class.jpg.png

سيظهر لك الكود التالي ضمن الملف:

app.module.ts

دعونا نناقش كل سطر ضمن الكود بالتفصيل:

  • عبارة الاستيراد Import تستخدم لاستحضار فعاليات اخرى من الموديولز الموجودة.
    وبذلك فإن اول ثلاث عبارات للاستيراد import مخصصة لاحضار الموديولز التالية: NgModule, BrowserModule, AppComponennt
  • عبارة “NgModule”  فإنها تستخدم لتحدد عدد من الخيارات الا وهي :
    imports, declarations, bootstrapping
  • “BrowserModule”فإنه ضروري من اجل اي تطبيق angularمخصص للويب
  • خيار “bootstrap” يخبر angular عن المكون component الذي يجب سيكون بوابة التطبيق

 

بشكل عام, فإن كل موديول module مؤلف من الأقسام التالية:

  • “Bootstrap array”: عبارة عن مصفوفة, تستخدم لاخبار angular عن المكونات components التي يتوجب تحميلها لان خدماتها وفعالياتها مطلوبة اثناء عمل التطبيق.
  • “Export array” : عبارة عن مصفوفة, تستخدم بهدف تحديد المكونات components المراد تصديرها, بحيث يصبح من الممكن استخدامها عبر موديول اخرى.
  • “Import array” : عبارة عن مصفوفة, مشابة لمصفوفة التصدير export array, ولكنها تستخدم بهدف استيراد فعاليات من موديولز اخرى.

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

اما الان فسوف ننتقل للحديث عن هيكلية وبنية angular 2.

 

هيكلية وبنية Angular 2 Architecture

الشكل التالي يظهر صورة تشريحية لتطبيق angular 2.

كل تطبيق يتالف من مكونات components.

كل مكون component عبارة عن جزء منطقي من الكود يحوي على فعالية ما ضمن التطبيق.

كما ان هنالك طبقة الخدمات services layer, والتي تستخدم بهدف مشاركة الفعاليات functionalities  بين المكونات components.

 

anatomy.jpg.png

بنية المكون Component Structure  

فيما يلي تشريح لبنية المكون component  ضمن angular 2.

يتألف كل مكون من العناصر التالية:

  • “Class”: وهو عبارة عن صف برمجي, مماثل لاي صف قد يتواجد ضمن كود جافا او سي. وبالتالي كالمعتاد فإنه يتألف من خصائص وتوابع properties and methods.
  • “Metadata”: تستخدم بهدف توسيع فعالية الصف class .
  • “Template”: تستخدم بهدف تحديد جزء html الذي سيتم عرضه ضمن التطبيق

componet.jpg.png

فيما يلي مثال على كود لاحد المكونات component.

component code example.JPG

يتكون كل تطبيق من مجموعة موديول.

بالنسبة لتطبيق angular 2 , فإنه بحاجة لان يكون هنالك موديول جذر واحد Angular root module.

كل موديول جذر root module يمكن ان يحوي على اكثر من مكون واحد component بهدف توزيع الفعاليات ضمن التطبيق.

model - component functionality.jpg

فيما يلي مثال على موديول جذر root module.

root module example.JPG

كل تطبيق مكون من مجموعة من الموديول modules, وكل موديول module  له ميزة خاصه ضمن التطبيق.

كل موديول يمكن ان يحوي على عدة مكونات component بهدف فصل وتوزيع الفعاليات ضمن التطبيق.

each_application.jpg.png

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

لنتابع بالحلقة القادمة ان شاء الله بقية المفاهيم والشروح عن المركبات الاساسية وبنية عناصر angular 2.

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

 

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

 

المراجع:

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