1: AngularJs مقدمة

AngularJS-large

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

سوف نتطرق ضمن الحلقات القادمة إلى تعلم اطار عمل حديث ضمن البرمجة

وذلك عبر مثال تطبيقي مباشر يساعدنا على التعلم السريع

متطلبات مسبقة:

قبل البدء بمتابعة وتعلم هذه السلسلة نفترض معرفة مبسقة بالامور التالية :

  • HTML
  • CSS
  • JAVASCRIPT

ماهو AngularJs

angularJs عبارة عن اطار عمل لجافا سكريبت مفتوح المصدر Open-source, تم تطويره برعاية غوغل, ويتوقع ان يكون لاستخدامه دور اساسي ومهم في المستقبل في مجال تطوير المواقع وتطبيقات الموبايل.

يعمل angular وفق ما يعرف ب MVC اي

Slide7Model-View-Controller

وطريقة العمل هذه تجعل عملية التطوير اسهل ومنظمة اكثر من قبل

يمكن اضافته إلى صفحة هتمل html عبر استخدام تاغ <script>

لنتجاوز هذا الكلام النظري وننطلق إلى التجربة العملية التي ستوضح لنا معنى هذا الكلام السابق.

مثال عملي

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

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

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

catalog_screen.

تابعوا معنا هذه السلسلة التعليمية لكي تروا كيف أنه بإمكان angular ان يجعل المتصفحات أذكى – بدون استخدام اضافات plug-ins:

سنتعرض ضمن هذه السلسلة للنقاط التالية:

  • أمثلة على كيفية القيام بربط المعطيات في طرف العميل client-side بهدف بناء صفحات ديناميكية تحتوي على المعطيات التي تتغير مباشرة وبحسب تفاعلات المستخدم معها
    data binding to build dynamic views
  • نستعرض كيفية قيام angular بالحفاظ على الصفحات views متزامنه مع المعطيات التي تحويهادون الحاجة إلى عمليات DOM.
  • تعلم اسهل وافضل طريقة لاختبار تطبيق الويب الخاص بك

عند انتهائك من هذه السلسلة تكون قد تعلمت ما يلي :

  • بناء تطبيق ديناميكي يعمل ضمن كل المتصفحات الحديثة
  • استخدام طريقة “ربط المعطيات Data binding “ لتربط بين نموذج المعطيات data model  مع صفحاتك views.
  • نقل منطق التطبيق application logic إلى المتحكمات Controllers
  • استحضار المعطيات من السيرفر عبر استخدام angular services
  • اضافة التحريك إلى تطبيقك عبر استخدام ngAnimate
  • التعرف على المزيد من المصادر لتعلم angularJs

ستقودك هذه السلسلة التعليميه عبر الخطوات الازمة لبناء تطبيق بسيط وفعال يستخدم angularJs, بما في ذلك من كتابة الكود وتشغيله واختباره.

لننطلق

الآن سنشرح فيما يلي كيف بإمكانك ان تعد جهازك للتطوير لكي تكون جاهزا لتطبيق الخطوات معنا.

اما اذا رغبت فقط بالقراءة دون التطبيق بإمكانك تجاوز تتمة هذا الدرس.

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

  • Bootstrapping
  • Static Template
  • Angular Template
  • Filtering Repeaters
  • Two-way Data Binding
  • XHRs & Dependency Injection
  • Templating Links & Images
  • Routing & Multiple Views
  • More Templating
  • Filters

ملاحظة :

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

العمل مع الكود

تعتمد هذه السلسلة التعليمية على نظام الاصدارات Git versioning system, حيث تم وضع الكود على GIt.

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

تنصيب GIT

بإمكانك تحميل وتنصيب GIT من الموقع التالي:

  http://git-scm.com/download

ما ان تقوم بتنصيبه, حتى يصبح بإمكانك النفاذ إلى اداة الأوامر السطرية الخاصة ب GIT command line tool .

التعليمات الاساسية ضمن GIT التي سوف تحتاج إلى استخدامها هي التالية :

  1. Git clone  : تقوم هذه التعليمة بنسخ الكود المتواجد على السيرفر إلى جهازك
  2. Git checkout : تقوم هذه التعليمه باالخروج من فرع أو نسخة محددة ضمن الكود

تحميل مشروع angular-phonecat من GIT

 

لكي تنسخ الكود الخاص بالتطبيق إلى جهازك من ال gitHub استخدم التعليمة التالية :

git clone –depth=14 https://github.com/angular/angular-phonecat.git

تقوم هذه التعليمة بإنشاء مسار يدعى angular-phonecat ضمن مسارك المحلي.

يقوم الخيار –depth=14 بإخبار GIT ان يقوم فقط بسحب اخر 14 تعديل – اخر 14 نسخة تم التعديل عليها وتثبيتها, إن هذا التحديد ب 14 تعديل فقط يجعل النسخة التي ستقوم بتحميلها إلى جهازك اصغر وأسرع

الآن قم بالانتقال للمسار الجديد

cd angular-phonecat

من الآن وصعوداً, سوف نفترض بأنك تقوم بتنفيذ كافة التعليمات من المسار التالي :

Angular-phonecat

تنصيب Node.js

اذا رغبت بتنفيذ وتشغيل المثال ضمن هذه السلسلة على جهازك – سيرفرك المحلي – فأنت بحاجة ايضا إلى تنصيب  Node.js v0.10.27+  .

بإمكانك تحميل وتنصيب node.js من الرابط التالي:

http://nodejs.org/download/

تحقق من نسخة node.js التي قمت بتنصيبها عبر التعليمية التالية :

node –version

ما إن تنصب node.js على جهازك المحلي, حتى يصبح بإمكانك تحميل بقية الأدوات التابعة للمشروع angular-phonecat عبر التعليمة التالية:

npm install

تقوم هذه التعليمة بقراءة ملف package.json الموجود ضمن مجلد angular-phonecat – من المفترض ان نكون متواجدين ضمن هذا المسار حاليا – , وتقوم بتحميل الأدوات التي سنذكرها فيما يلي إلى المسار node_modules:

  • Bower – client-side code package manager
  • Http-Server – simple local static web server
  • Karma – unit test runner
  • Protractor – end to end (E2E) test runner

كما ان  تنفيذ تعليمة npm install  يتضمن بشكل اوتوماتيكي استخدام bower لتحميل اطار عمل angular ضمن المسار التالي:

App/bower_components

كما تلاحظ فإن هذه المشروع angular-phonecat قد تمت تهيئته لكي يقوم بتنصيب وتشغل كل هذه الادوات عبر سكريبتات npm. وبالتالي لا يتوجب عليك القلق حيال توافرها لديك مسبقا, لانه سيتم تحميلها وتنصبها ضمن الخطوات.

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

  • npm start : start a local development web-serverبدء تشغيل سيرفر التطوير المحلي
  • npm test : start the Karma unit test runner
  • npm run protractor : run the Protractor end to end (E2E) tests
  • npm run update-webdriver : install the drivers needed by Protractor

تنصيب الأدوات المساعدة (خياري( Install helper tools
الأدوات تتضمن

Bower, http-server, karma, Protractor modules
بالامكان تنصيب هذه الموديولات باستخدام التعليمة التالية :

sudo npm install –g

على سبيل المثال, لتنصيب bower command line  ننفذ التعليمة التالية :

sudo npm install –g bower

يجب حذف كلمة sudo  في حال كنت ضمن بيئة windows

ومن ثم يصبح بالامكان استخدام هذه الاداة مباشرة, مثال :

Bower install

تشغيل سيرفر الويب running development web server

بما ان كود تطبيق angular هو عبارة عن كود من طرف العمل client-side code, لذلك فإنه من الممكن فتحه مباشرة ضمن المتصفحات من اي نظام ملفات,  ولكنه من الأفضل ان نستخدم ويب سيرفر http.

بشكل خاص, ولأسباب أمنية, فإن معظم المتصفحات لن تسمح لجافا سكريبت ان تقوم بطلبات للسيرفر في حال تم فتح التطبيق من ضمن نظام الملفات مباشرة.

تم تهيئة مشروع angular-phonecat بويب سيرفر بسيط لاستضافة التطبيق خلال مراحل التطوير.

الآن سنقوم بتشغيل الويب سيرفر عبر التعليمات التالية :

npm start

ستقوم هذه  التعليمة بإنشاء ويب سيرفر محلي, يتصنط على البورت 8000 ضمن جهازك.

بإمكانك الآن استعراض التطبيق على المسار التالي :

http://localhost:8000/app/index.html

لتشغيل تطبيق الويب على عنوان ip مختلف او على بورت مختلف, يتوجب عليك تعديل سكريبت “start” ضمن package.json.

بإمكانك استخدام

  • -a لتحديد العنوان
  • -p : لتحديد البورت

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

angular-phonecat page

الآن وبعد ان اصبحت بيئة العمل جاهزة, بإمكاننا الانطلاق للدرس القادم لكي نباشر التطبيق الفعلي والتعرف على ميزات وامكانيات angularjs

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

 

المصدر:

https://docs.angularjs.org/tutorial

 

المصطلح الترجمة
Data Binding ربط المعطيات
Data Model نموذج المعطيات
Controller متحكم
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 مدونون معجبون بهذه: