2: تهيئة تطبيق AngularJs

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

نتابع ما بدأنا به في الحلقة السابقة من سلسلة تعلم angularJs وفق مثال تطبيقي

خلال هذه الحلقة, سوف تطلعون على اهم ملفات المصدر المتواجدة ضمن مشروعنا angularJs phonecat.

pic_angular.jpg

قبل أن نبدأ, تأكدوا من اعداد بيئة التطوير, وتنصيب كل الأمور المطلوبة كما هو موضح في الدرس السابق.

ضمن المسار التالي : anugular-phonecat, نفذوا التعليمة التالية:

Git checkout –f step-0

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

اي تعود إلى نسخة اولية من التطبيق – احد فوائد انظمة ادارة النسخGIT versioning system

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

طبعا هذا سيودي إلى ضياع اي تعديلات تقومون بإجرائها على الملفات ضمن مسار التطبيق.

كما شرحنا في الدرس الأول, يجب ان تقوموا بتنصيب الملفات المتعلقة بالتطبيق عبر التعليمة التالية:

 npm install

لكي تشغلوا التطبيق عبر المتصفح, افتحوا اداة سطر الأوامر command line في نافذة جديدة – او تاب جديدة, ومن ثم نفذوا التعليمة التالية

npm start

والتي ستعمل بدورها على تشغيل سيرفر الويب.

الآن, افتحوا نافذة المتصفح browser window واكتبوا ضمن العنوان المسار التالي:

http://localhost:8000/app/

ملاحظة:

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

Ctr+f5
ليتم تفريغ الكاش, واعادة تحميل الموقع وفق المرحلة الحالية.

اصبح الآن باستطاعتكم مشاهدة الصفحة ضمن متصفحكم.

لا تبدوا صفحة مسلية ابدا, ههههههه ولكنها مقبولة.

nothing here yet

كما نرى في الصورة اعلاه, فإننا نرى صفحة بيضاء تعرض العبارة التالية:

“Nothing here yet!”
والتي تمت كتابتها ضمن كود هتملHTML .

وسنعرض الكود فيما يلي ادناه.

يحوي الكود على بعض عناصر angular التي سنستخدمها مع تقدمنا ضمن هذه السلسلة التعليمية.

expression

ما اللذي يفعله الكود بالتحديد؟

الموجهng-app directive

<html ng-app>

تمثل الخاصية ng-app موجه angular ويدعى agApp (ملاحظة : تستخدم angular الاسلوب spinal-case بتسمية خواصها, كما تستخدم اسلوب camelCase لتسمية الموجهات)

يستخدم هذه الموجه ngApp directive لتحديد عنصر من عناصر هتمل HTML على انه العنصر الجذر لتطبيق angular.

يعطي هذا مطوري التطبيقات الحرية في اخبار angular عن الأجزاء من صفحة html التي يجب معاملتها على انها تطبيق angular.

اي ان هذا الموجه يحدد لنا الجزء من كود هتمل html الذي سيشكل تطبيق angular.

AngularJs Script Tag

<script src=”bower_components/angular/angular.js”>

الكود اعلاه يضمن ملف angular.js ضمن كود هتمل, وهذا الملف هو المسؤول عن تسجيل

يقوم الكود اعلاه بتحميل سكريبت angular.s التي تعتبر مسؤولة عن تسجيل الاستدعاءات callback التي يتم تنفيذها من قبل المتصفح عند تحميل صفحة هتمل Html بشكل كامل.

الأقواس المجعدة المضاعفة Double-curly

Nothing here {{‘yet’ + ‘!’}}

يمثل السطر اعلاه احد اهم امكانيتين يقدمها لنا نظام القوالب في angular

  • الربط, ويتم الاشارة إليه باستخدام الأقواس المجعدة المضاعفة double-curlies {{ }}
  • التعبير البسيط المستخدم في الربط ‘yet’ + ‘!’

 

تخبر أقواس الربط angular بأنه يتوجب عليه تقييم التعبير expression الموجود بينهما, وادراج النتيجة ضمن DOM في مكان الربط تمام.

بدلا من الاضافة إلى DOM لمرة واحدة فقط, فسوف نرى في الخطوات القادمة كيف أن عملية الربط سوف تنتج عمليات تعديل وتحديث فعالة ومستمرة كلما طرأ تعديل على التعبير المطلوب تقييمه.

تعابير angular

Angular Expression: عبارة عن كود مشابه لجافا سكريبت, يتم تقييمه من قبل angular وفق نطاق النموذج الحالي, بدل من تقييمه ضمن نطاق السياق العالم (النافذةwindow )

ما إن يتم معالجة القالب من قبل angular, حتى تحوي صفحة هتمل html العبارة التالية:

“Nothing here yet!”
Bootstrapping AngularJs App

تهيئة تطبيق angularJs

تبدأ تهيئة تطبيق angularJs بشكل اوتوماتيكي باستخدام الموجه ngApp.

هنالك ثلاثة أمور مهمة تحدث خلال عملية تهيئة التطبيق:

  • تم انشاء ال injector الذي سوف يتم استخدامه خلال عملية dependency injection.
  • من ثم سيقوم ال injector بإنشاء ال root scope – نطاق الرؤية الجذر – الذي سيصبح عبارة عن سياق النموذج ضمن تطبيقنا context for the model of our application
  • من ثم يقوم angular ب ‘compile’ لل DOM, ابتداءا من العنصر الحاوي على موجه ngApp, معالجا خلال ذلك كل الموجهات والربط الذي يجده خلال طريقه.

 

ماإن يتم الانتهاء من عملية تهيئة التطبيق, حتى يصبح مستعدا ومنتظرا للأحداث التي يقوم المتصفح بإرسالها ( مثل نقرة الماوس, ضغط مفتاح …) والتي قد تغير على النموذج model .

Two_Way_Data_Binding.png

على سبيل المثال, في حال وقع حدث ما, فإن angular يقوم بالتحقق فيما إذا سبب هذا الحدث اي تعديلات او تغييرات على النموذج model , وفي حال وجدت مثل هذه التغيرات, فإن angular سوف يعكسها على الصفحة view عبر تعديل وتحديث كل عناصر الربط المتأثرة affected binding.

بنية تطبيقنا في الوقت الحالي جدا سهلة وبسيطة.

يحوي القالب على موجه وحيد one directive, وعلى ربط وحيد وثابت static binding, ونموذجنا فارغ حاليا empty model.

سيتغير هذا الوقع قريبا!

 ملاحظة:

لا تنسوا بأن angularJs تعمل وفق MVC

  1. M: Model النموذج
  2. V: View الصفحة
  3. C: Controler المتحكم

tutorial_00.png

اذن ماهي كل تلك الملفات الموجودة ضمن مسار العمل الحالي؟

معظم الملفات الموجودة ضمن مسار العمل الحالي آتية من angular-seed project, وهذا المشروع يستخدم بشكل اساسي لتهيئة واعداد المشاريع التي ترغب باسخدام angularJs.

حيث ان مشروع seed project تم اعداده مسبقا لكي يقوم بتنصيب اطار عمل angular framework, بالإضافة إلى الأدوات ا للازمة لتطوير تطبيق ويب قياسي (عبر استخدام npm).

لأسباب تتعلق بخطة التعليم التي نسير بها ضمن هذه السلسلة التعليمية, قد قمنا بتعديل angular-seed كما يلي:

  • ازالة تطبيق المثال الجاهز
  • إضافة مجلد يحوي صور الاجهزة إلى المسار التالي :app/img/phones/
  • إضافة ملفات معطيات (بصيغة json) إلى المسار التالي: app/phones/
  • اضافة ملفات اخرى عبر json

359796918تجارب

بإمكانكم الآن تجريب تعبير جديد new expression ضمن ملف index.html , الذي بدوره سيقوم ببعض الحسابات البسيطة

<p>1 + 2 = {{ 1 + 2 }}</p>

الخلاصة

والآن وبعد ان تعلمنا بعض الأمور الاساسية عن angular وطريقة الربط التي تعتمد على تقييم التعابير expression evaluation, بإمكاننا الانتقال إلى الخطوة التالية , والتي سنضيف عبرها بعض المكونات إلى تطبيق الويب.

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

لا تتردوا في حال كان لديكم اي تساؤل حول ما تم عرضه لحد الآن
وإلى ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

المصدر:

https://docs.angularjs.org/tutorial

الترجمة

المصطلح

الموجه

Directive

تعبير

Expression

الربط

Binding

سياق

Context

 

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