Posts Tagged AngularJs

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/

 

, , , , , , , ,

أضف تعليق

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/

, , , , , , ,

أضف تعليق

3: Angular2 – Hello World

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

كما تذكرون فقد قمنا بالحلقة السابقة باعداد بيئة العمل المناسبة لبرمجة angular 2

اما الان فسنتابع بتطبيق عملي وبرنامج بسيط باستخدام angular 2
hello world

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

  • الطريقة الأولى تتمثل ببناء التطبيق من الصفر, وتعتبر اصعب طريقة, وليست محبذة.
  • الطريقة الثانية تتمثل باستخدام كود جاهز لتسهيل الانطلاق ببرمجة angular 2 موجود على ال github.
    يحوي هذا الكود على الاكواد الضرورية اللازمة لكي نبدأ البرمجة ب angular 2 بسهولة.
    تعتبر هذه الطريقة هي الطريقة المفضلة لدى اغلب المبرمجين, وهي الطريقة التي سنتبعها ضمن هذه الحلقة.
  • الطريقة الاخيرة تتمثل باستخدام Angular CLI. سنناقض هذه الطريقة بالتفصيل ضمن الحلقات القادمة.

فيما يلي الخطوات اللازمة للحصول على تطبيق صغير جاهز من ال Github.

  1. اذهب الى الرابط التالي:
    https://github.com/angular/quickstart
    1 github. quick start
  2. افتح سطر الاوامر command prompt وقم بإنشاء مجلد خاص للمشروع.
    عبارة عن مجلد فارغ. ضمن مثالنا سنقوم بإنشاء مجلد يدعى “Project”.
  3. ضمن سطر الاوامر. انتقل إلى داخل المجلد الذي قمت بإنشاءه للتو, ومن ثم نفذ الامر التالي الذي سيقوم بدوره بتحميل المثال المطلوب الى داخل المجلد.
    git clone https://github.com/angular/quickstart Demo
    3 - command download quickstart.jpg.png
  4. افتح الملفات – التي قمت بتحميلها للتو – باستخدام visual studio code
    4 - vs open_code.jpg.png
  5. عد الى سطر الاوامر, ثم انتقل الى داخل مجلد “Demo” واكتب الامر التالي
    npm install
    5 npm_install.jpg.png
    ستقوم هذه التعليمة بتحميل الملفات الضرورية المطلوبة من قبل تطبيق angular js لكي يعمل
    ما ان يتم تنفيذ هذه التعليمة حتى تظهر لك بنية شجرية tree structure تظهر لك فيها كافة المتعلقات التي قمت بتحميلها
    5-1 tree_structure.jpg.png
  6. اذهب الان الى المسار التالي:
    Demo -> src -> app -> app.component.js
    ستجد بداخل هذه الملف الكود التالي:
    6 app.component.js 1.JPG
    استبدل كلمة “Angular” بجملة “Hello World” كما هو مبين بالصورة ادناه
    6 app.component.js 2.JPG
    ستجد هنالك العديد من الملفات, وهي جزء من الملفات الاساسية للمشروع, لا تكترث بها حاليا لانه لاتوجد حاليا حاجة لتعديل اي منها في مثالنا الحالي, وسنقوم بمناقشتها بالتفصيل ضمن حلقات قادمة ان شاء الله.
    ملاحظة:
    في حال لم تجد الملف السابق ووجدت بدلا منه component.ts استخدمه وقم بالتبديل المطلوب. ستجد محتوى مكافئ سنشرحه فيما بعد
  7. اذهب الى سطر الاوامر ونفذ الامر التالي:
    npm start
    7 npm start angular_application.jpg.png
    7 - 1 lite_server.jpg.png
    ستشغل هذه التعليمة Node package manager والتي بدورها سوف تشغل تطبيق angular على مخدم الويب web server.
    في هذه اللحظة سوف يعمل تطبيق angular js على المتصفح وسوف تظهر لك عبارة “Hello World”  التي قمت بتعديلها منذ قليل كما هو موضح ضمن الشكل ادناه:
    8 hello_world.jpg.png

 

النشر Deployment

بما ان التطبيق عبارة عن تطبيق angular js, لذلك فإنه من الممكن نشره على اي منصة عمل platform. وكذلك فإن بيئة التطوير ممكن ان تكون بدورها اي منصة عملplatform .

في حالتنا هذه فإن منصة التطوير الحالية هي عبارة عن نظام ويندوز windows  باستخدام Visual Studio Code.

اما بالنسبة لخيارات النشر deployment options فإن هنالك عدة خيارات, ولكننا سوف نتطرق الى احدها فقط الا وهو التالي:

 

Deployment on NGNIX Servers On Windows

النشر على سيرفر NGINX ضمن نظام تشغيل ويندوز

ملاحظة: بالامكان استخدام اي مخدم ويب Web server على اي منصة عمل platform من اجل تطبيقات angular js, ولكن في حالتنا هذه سنتطرق لمثال يستخدم مخدم NGNIX server على نظام ويندوز.

خطوات النشر هي التالية: Deployment Steps

  1. تحميل مخدم الويب الشهير NGINX من الرابط التالي
    http://nginx.org/en/download.html
    1- Deployment nginx.jpg.png
  2. بعد فك ضغط الملفات, قم بتشغل الملف exe الذي بدوره سيقوم بتشغيل مخدم الويب بالخلفية.
    من ثم سيكون بامكانك الذهاب الى الرابط التالي ضمن المتصفح:
    http://localhost
    2- deployemnt.png
  3. اذهب الى مجلد المشروع
  4. انسخ المجلد التالي: Project -> Demo -> node-modules
    والصقها ضمن المسار المجلد التالي:
    nginx/html
    4 deploymentdemo.jpg
    6 deployemnt html_folder.jpg.png
  5. انسخ ايضا كافة الملفات الموجودة ضمن مجلد
    project -> Demo -> src
    والصقها ضمن المسار المجلد التالي:
    nginx/html
    5 deployemnt src_folder.jpg.png
  6. الآن اذهب اكتب الرابط التالي ضمن المتصفح
    http://localhost
    ستظهر عندها عبارة “Hello World” كما هو ظاهر في الشكل ادناه
    6-1 deployemnt hello_world_application.jpg

وبذلك نكون بهذه الخطوات البسيطة قد قمنا بنشر deploy تطبيق angular js  على مخدم nginx بمنصة عمل ويندوز

 

من الطرق الاخرى للنشر deployment عملية النشر على نظام Ubuntu مذكورة ضمن المرجع ادناه, لم نتطرق اليها بالامكان الرجوع اليها عبر الرابط.

وبهذه نكون قد انهينا ضمن هذه الحلقة وعبر خطوات بسيطة وسهلة عملية تشتغل اول تطبيق angular js

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

 

الترجمة المصطلح
مفتوح المصدر Open source
اطار عمل framework
تطبيق application
واجهات العرض Views
النشر Deployment
مخدم الويب Web server
منصة عمل Platform

 

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

 

 

, , , , ,

أضف تعليق

3 : اعداد بيئة العمل الازمة لبرمجة Angular2

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

نتابع معكم ضمن سلسلة angular 2 لنتعلم ضمن هذه الحلقة كيف نعد البيئة المحيطة اللازمة لعمل angular 2.

حيث سنقوم ضمن هذه الحلقة بشرح طريقة تنصيب البرامج اللازمة لتسهيل العمل والبرمجة مع angular 2

ثم سنتتطرق ضمن الحلقات التالية الى تطبيقات عملية يتم ضمنها الاستفادة من البرامج التي سيتم تنصيبها ضمن هذه الحلقة.

ملاحظة:

سنقوم بشرح كافة الخطوات الازمة لاعداد بيئة العمل لبرمجة angular 2 ضمن windows

 

اعداد بيئة العمل مع Angular 2

لكي تبدأ بالعمل مع angular 2 يتوجب عليك القيام تنصيب المكونات التالية:

  • Npm– ويعرف ب node package manager
    angularJs عبارة عن اطار عمل لدية مكونات وملفات متعلقة به. وبالامكان استخدام npm بهدف تحميل تلك الملفات المتعلقة وربطها بمشروعك.
  • Git– برنامج كود المصدر source code software, وسنتسخدمه بهدف تحميل التطبيق الذي سنعمل عليه من github.
  • Editor– محرر النصوص: هنالك الكثير من محررات النصوص التي يمكن استخدامها من اجل تطوير Angular Js, على سبيل المثال, يمكن استخدام فيجوال استيديو Visual Studio وهو ما سوف نستخدمه ضمن مثالنا هذا.

 

تنصيب install npmnpm logo.png

الموقع الرسمي ل Npm:

https://www.npmjs.com/
npm site

  1. نفتح صفحة الموقع ومن ثم نذهب الى قسم “get started with npm”
    get_started npm
  2. ضمن الصفحة التالية التي ستظهر امامك قم باختيار المنصب installer الذي ترغب بتحميله وذلك اعتمادا على نظام التشغيل الخاص بك.
    choose_installer npm
    على سبيل المثال سوف نقوم بتحميل نسخة الخاصة ب windows 64
  3. شغل ال installer بعد تحميله. ضمن الشاشة الاولى التي ستظهر لك قم بالضغط على زر التالي “Next”
    launch.next
  4. في الشاشة التالية اضغط على زر الموافقة على اتفاقية اللايسنز ومن ثم اضغط زر التالي “Next”
    accept aggreement npm
  5. في الشاشة التالية, حدد المجلد الذي ترغب بأن تخزن به الملفات واضغط التالي “Next”
    destination_folder.npm
  6. في الشاشة التالية, قم باختيار المكونات ثم اضغط زر التالي “Next” . بامكانك الموافقة على كافة المكونات المعروضة ضمن
    الالحالة الافتراضية
    default_installation.component npm
  7. في الشاشة التالية اضغط على زر تنصيب “Install”
    click_install npm
  8. ماان ينتهي التنصيب حتى تظهر لك شاشة اضغط فيها على زر انتهاء “Finish”
    finish_button.npm
  9. لكي تتحقق من ان عملية التنصيب قد تمت بنجاح, اذهب الى سطر الاوامر command line , ثم اكتب الامر التالي:
    ‘npm version’
    سيظهر لك عندها تاريخ اصدار npm كما هو واضح في الصورة ادناه وذلك في حال كانت عملية النتصيب قد تمت بنجاح
    command line np

 

 

تنصيب فيجوال ستيديو كود Visual Studio Code Installationmstile-310x310.png

الموقع الرسمي

https://code.visualstudio.com/
visualstudio.jpg.png

  • الرجاء بعد تحميل download فيجوال استيديو اتباع خطوات التنصيب.
    في الشاشة الاولى اضغط على زر التالي.
    initial_screen.jpg.png
  • في الشاشة التالية اضغط على الموافقة على اتفاقية اللايستنز ومن ثم اضغط التالي.
    next. vs install
  • في الشاشة التالية, قم باختيار المجلد الذي سيتم فيه تنصيب وتخزين الملفات ثم اضغط التالية
    destination_location.vs.png
  • في الشاشة التالية, حدد الاسم المختصر للبرنامج ومن ثم اضغط التالي
    program_shortcut.vs.png
  • في الشاشة التالية, اقبل الاعدادات الافتراضية كما هي ومن ثم اضغط التالي.
    1 default setting
  • في الشاشة التالية, اضغط على زر تنصيب “Install”
    setup.install vs
  • في الشاشة الاخيرة اضغط على زر الانتهاء “Finish” ليعمل فيجوال استيديو كود
    final_screen.vs

 

Installing Gitgit logo.png

الموقع الرسمي

https://git-scm.com/
gitSite.png

  • بعد ان تنتهي من تحميله اتبع الخطوات التالية: في الشاشة الاولى اضغط على زر التالي
    gnu_licence.git.png
  • حدد المكونات التي تحتاج الى تحميلها. بامكانك القبول بكافة المكونات التي تم تحديدها بشكل افتراضي
    default_components.git
  • في الخطوة التالية قم باختيار اسم المختصر الذي سوف يظهر للبرنامج ومن ثم اضغط التالي
    git_shortcut git.png
  • في الشاشة التالية قم بتحديد خيار “Use OpenSSH” ومن ثم اضغط التالي
    default_ssh git.png
  • وافق على الخيارات الافتراضية الخاصة ب “Checkout Windows Style, commit Unix style endings” ومن ثم اضغط التالي
    default_setting.git.png
  • وافق على الاعدادات الافتراضية “use MinTTY(the default terminal of MSYS2)” ومن ثم اضغط التالي
    terminal GIT.png
  • وافق ايضا على الاعدادات الافتراضية ومن ثم اضغط التالي
    accept_default_settings.git
  • تجاوز خيار “Enable experimental, builtin difftool” ومن ثم اضغط على زر التنصيب “Install”
    experimental_options.git.png
  • في الشاشة النهائية اضغط على زر الانتهاء لتتم بذلك عملية التنصيب
    complete_installation_process. git.png

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

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

 

الترجمة المصطلح
مفتوح المصدر Open source
جافا سكريبت Java script
اطار عمل framework
تطبيقات الصفحة الواحدة Single page application
المكونات Components
المتحكمات Controllers
الخدمات services
تطبيق application
واجهات العرض Views
برنامج كود المصدر source code software
تنصيب install
نظام التشغيل Operating system
سطر الاوامر Command line

 

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

 

 

, , , , , ,

أضف تعليق

1: مقدمة Angular2

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

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

وكبداية ستكون السلسلة الاولى متعلقة بAngularJs2

نعم قد طرحنا فيما سبق سلسلة عن angularJs فما الاختلاف الآن!

الفارق هو اننا سنتكلم ضمن هذه السلسلة عن اصدار جديد من angular الا وهو الاصدار الثاني angularJs2

ماهو Angular 2 ؟

angular2

عبارة عن اطار عمل جافا سكريبت مفتوح المصدر open source   يستخدم لبناء تطبيقات الويب باستخدام HTML & JS.

تم بناء angular 2  من قبل مبرمجي غوغل.

الهدف من بناء اطار العمل هذا هو التغلب على التحديات التي تواجه المبرمج عند برمجة تطبيقات الصفحة الواحدة Single page applications.

تم اصدار النسخة الاولية من اطار العمل في تشرين الاول 2010

سنتطرق ضمن هذه السلسلة التعليمية الى عدة جوانب مختلفة من اطار عمل Angular 2 التي تتضمن مايلي:

  • اساسيات اطار العمل basics of the framework
  • الاعدادات Setup of Angular 2
  • التعامل مع الجوانب المختلفة الموجودة في اطار العمل
  • امثلة تطبيقية مختلفة
  • في حلقات متقدمة سيتم الحديث عن
    • الواجهات Interfaces
    • المكونات المتداخلة nested components
    • الخدمات services
    • التوجيه routing
    • Modules
    • المصفوفات arrays

ملاحظة:

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

المتطلبات

لكي تستطيع المتابعة معنا والاستفادة من هذه السلسلة, يتوجب عليك ان يكون لديك المام باساسيات تطوير الويب وجافا سكريبت, وذلك لكون اطار عمل angular 2  مبني على اساس اطار عمل javascript.poc-checklist-blog

ميزات Angular 2

فيما يلي سندرج اهم الميزات الموجودة ضمن Angular 2

  • Components – المكونات: ركزت النسخ الاولية من angular على المتحكمات controllers, ولكن الان مع النسخة الجديدة من angular قد تحول التركيز الى المكونات components بدلا من المتحكمات controllers.
    كما سنرى فيما بعد فإن ال components تساعد على بناء تطبيقات سهلة الصيانة والتعديل على مر الزمن
  • TypeScipt: تم بناء النسخة الحديثة من angular على اساس typescript.
  • Services – الخدمات: عبارة عن مجموعة من الاكواد البرمجية التي يمكن مشاركتها عبر عدة مكونات components ضمن الطبيق application.
    على سبيل المثال: في حال كان لديك مكون خاص بالمعطيات data components يستخدم لاحضار المعطيات من قاعدة المعطيات, عندها بإمكانك تحويله الى خدمة مشتركة shared service التي بالامكان استخدامها عبر عدة تطبيقات.
  • بالاضافة إلى ان angular 2 تتمتع بإمكانيات افضل من اصداراتها السابقة من حيث معالجة الاحداث event-handling, وتتميز بدعم افضل لاجهزة الموبايل.

image why angular 2

مم يتألف angular 2

يـتألف من المركبات التالية:

  • Modules: وتستخدم لتقسيم التطبيق الى عدة قطع برمجية. كل قطعة برمجية – او module– الهدف منه انجاز مهمة محددة.
  • Components: تستخدم بهدف تجميع ال modules مع بعضها البعض.
  • Templates– القوالب : تستخدم لتحديد واجهات العرض views ضمن تطبيق angular js
  • Metadata: تستخدم لاضافة المزيد من المعطيات الى angular class– سنطرق لشرحها فيما بعد
  • Service: تستخدم لبناء مكونات يمكن مشاركتها عبر التطبيق ككل.

سنتحدث بالتفصيل عن كل مركب من مركبات angular 2 في الحلقات القادمة من هذه السلسلة التعليمية7things2angular2

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

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

 

الترجمة المصطلح
مفتوح المصدر Open source
جافا سكريبت Java script
اطار عمل framework
تطبيقات الصفحة الواحدة Single page application
المكونات Components
المتحكمات Controllers
الخدمات services
تطبيق application
واجهات العرض Views

المراجع:

  1. https://www.tutorialspoint.com/angular2/index.htm
  2. الموقع الرسمي https://angular.io/

, , , ,

أضف تعليق

5: ربط المعطيات باتجاهين AngularJs -Two way binding

السلام عليكم ورحمة الله وبركاته
سنتابع اليوم العمل على تطبيق angularJs لنستعرض المزيد من الميزات الرائعة التي يقدمها لنا اطار عمل AngularJs
سنضيف ضمن هذه الحلقة بعض الميزات التي تتيح للمستخدم ان يتحكم بترتيب العناصر ضمن قائمة الهواتف.Two_Way_Data_Binding
يتم تحقيق عملية الترتيب الديناميكي عبر اضافة خاصية جديدة لنموذج المعطيات, وربطها مع موجه التكرار angularJs Repeater directive, ونترك باقي المهمة للسحر الذي تتميز به عملية ربط المعطيات ضمن angularJs لتقوم بالمطلوب.

بالاضافة إلى صندوق البحث, سنضيف في اعلى التطبيق قائمة منسدلة drop down menu تسمح للمستخدم بأن يتحكم بترتيب العناصر المعروضة ضمن قائمة الهواتف
تذكير:
لتشغيل المشروع ضمن المتصفح اتبع الخطوات التالية:
• عن طريق سطر الأوامر cmd ننتقل إلى المجلد الذي يحوي المشروع
• ثم نكتب التعليمة التي تقوم بتشغيل السيرفر
Npm start
• ما ان يتم تنفيذ التعليمة حتى يعمل السيرفر على البورت 8000
http://localhost:8000/app/
• ويصبح بإمكاننا استعراض التطبيق عن طريق المتصفح

لتحميل تعديلات كود هذا الدرس من ال GIT ادخل التعليمة التالية ضمن سطر الاوامر الخاص ب git كما اشرنا في الدروس السابقة
Git checkout –f step-4
سيتم ادراج التعديلات المهمة على الكود ادناه. بإمكانك ان ترى الفروقات الكاملة بالكود من الرابط التالي على GIT GitHub.

القالب Template
App/index.html

index.PNG

اجرينا التعديلات التالية على ملف index.html

في البداية, اضفنا عنصر <select> باسم orderProp, وبالتالي يستطيع المستخدم ان يختار قيمة من القيمتين المحددتين للترتيب.

illustration.PNG

ومن ثم اضفنا إلى عملية الفلترة على العنصر الذي يحوي موجه التكرار الفلترة وفق العنصر المسمى ngProp.
يقوم في هذه الحالة Angular بإنشاء ربط معطيات باتجاهين بين العنصر الذي تم اختياره وبين نموذج المعطيات المسمى orderProp.
ومن ثم يتم استخدام orderProp كدخل للفلتر orderBy.
وكما ناقشنا ضمن مقطع ربط المعطيات سابقا, فإن اي تغير على نموذج المعطيات سوف يؤدي إلى تغير البينات التابعة له والتي يتم عرضها على الواجهة مباشرة.
عملية الفلترة تتم بهذه البساطة!! دون الحاجة إلى اضافة اي كود اخر.

المتحكم Controller

app/js/controller.js

controller

  • كما نلاحظ, فإننا قد قمنا بتعديل نموذج المعطيات phones باضافة خاصية جديدة تدعى age إلى معلومات كل هاتف من الهواتف, تستخدم هذه الميزة لترتيب الهواتف بحسب العمر age – الخاصية التي تمت اضافتها.
  • كما اننا اضفنا سطر آخر إلى كود المتحكم, والذي نحدد عبره القيمة الافتراضيية ل orderProp لتكون في البداية مساوية لage – اي الترتيب بحسب خاصة age.

الفرصة الآن سانحة للحديث عن ربط المعطيات ثنائي الاتجاهtwo-way data-binding .
لاحظ بأنه عند تحميل التطبيق ضمن المتصفح, فإن العنصر “Newest” من القائمة المنسدلة يتم اختياره بشكل تلقائي.
ويعود لذلك بسبب اسنادنا القيمة age إل orderProp ضمن المتحكم.
وبالتالي فإن عملية الربط تتم بالاتجاه من نموذج المعطيات model إلى واجهة المستخدم UI.
الآن, في حال قمت باختيار “Alphabetically” من القائمة المنسدلة, سيتم عندها تحديث النموذج بالاضافة إلى تحديث قائمة الهواتف المعروضة. هذا يعني بأن ربط المعطيات يتم بهذا الاتجاه الآخر ايضا – من واجهة المستخدم UI إلى نموذج المعطيات model.

تجارب

  • سنقوم هنا بإزالة العبارة التي تحدد القيمة الافتراضية لترتيب العناصر orderProp 359796918من المتحكم, سنلاحظ تغيرترتيب العناصر
  • سوف نضيف ايضا الربط {{orderProp}} إلى الصفحة Index.html لنلاحظ القيمة الحالية للترتيب.
  • نعكس ترتيب العناصر عبد اضافة رمز “-“ قبل قيمة الفرز, ايلقد تعلمنا ضمن هذه الحلقة بعض المميزات المهمة والرائعة ضمن angularJs التي تختصر لنا الكثير من الوقت والكود, لننتقل إلى درس قادم نتحدث عبره عن dependency Injection. وإلى
  • ذلك الحين استودعكم الله والسلام عليكم ورحمة الله وبركاته

 المصدر

https://docs.angularjs.org/tutorial

الترجمة المصطلح
الموجه Directive
تعبير Expression
الربط Binding
سياق Context
نطاق Scope
موديول – وهو ما يشبه الحزمة Module
ربط المعطيات ثنائي الاتجاه two-way data-binding

 

,

أضف تعليق

4: الفلترة مع AngularJs

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

نتابع ضمن هذه الحلقة التعرف على المزيد من الميزات الخاصة بAngularJsfilter_data.png

قمنا بالكثير من التعديلات على تطبيقنا خلال الخطوة السابقة – الدرس السابق – لذا سيكون درسنا الحالي مختصرا مفيدا.

سوف نضيف امكانية بحث نصي كامل full text search, وسنرى سوية كم العملية بسيطة جدا.

ضمن هذا الدرس, سيحوي التطبيق على حقل للبحث search box. وسنلاحظ بأن محتوى قائمة الهواتف سوف يتغير بحسب القيم المدخلة ضمن حقل البحث.

تذكير

لتشغيل المشروع ضمن المتصفح اتبع الخطوات التالية:

  • عن طريق سطر الأوامر cmd ننتقل إلى المجلد الذي يحوي المشروع
  • ثم نكتب التعليمة التي تقوم بتشغيل السيرفر
    npm start
  • ما ان يتم تنفيذ التعليمة حتى يعمل السيرفر على البورت 8000
    http://localhost:8000/app/
  • ويصبح بإمكاننا استعراض التطبيق عن طريق المتصفح

site

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

Git checkout –f step-3

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

المتحكم Controller

لا يوجد أي تعديلات على المتحكم

القالب Template

App/index.html

template

كما تلاحظون, فإننا اضفنا تاغ لعنصر الادخال <input> واستخدمنا وظيفة خاصة بالفلترة جاهزة ضمن angularJs تدعى filter الهدف منها معالجة وفلترة النصوص المتولدة ضمن موجه التكرار ngRepeat وفلترتها بحسب النص المدخل ضمن الحقل النصي الذي تمت اضافته.

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

يوضح لنا الكود السابق مايلي:

  • ربط المعطيات data-binding : ويعتبر اهم ميزة من ميزات angular. عندما يتم تحميل الصفحة, يربط angular اسم الحقل النصي بمتحول variable يحمل نفس الاسم ضمن نموذج المعطيات data model ويحافظ عليهما متزامنان معنا.

ضمن الكود الحالي سنلاحظ بأن المعطيات التي يتم ادخالها ضمن الحقل النصي الخاص بالبحث – والمسمى query – سيتم الفلترة بحسبها مباشرة ضمن النصوص المتولدة نتيجة موجه التكرار ng-repeater في القائمة

اي ان الحقل النصي اصبح بمثابة فلتر للقائمة, وهذا ما يقوم به الكود التالي

Phone in phones | filter:query

اي تغيرات على نموذج  المعطيات data model سوف تتسبب بتغيرات محتويات ودخل موجه التكرار, الذي بدوره سوف يعكس وبفعالية هذه التغيرات على ال DOM ليعكس بذلك حالة نموذج المعطيات.

root scop

استخدام الفلتر filter: تستخدم وظيفة الفلتر filter القيمة الموجودة ضمن الحقل الذي يحمل الاسم query لإنشاء مصفوفة جديدة تحوي فقط القيم التي تطابق تلك القيمة – قيمة البحث.

يقوم الموجه ngRepeat بشكل اوتوماتيكي بتحديث صفحة العرض كاستجابة لتغير عدد اجهزة الهاتف التي يتم اعادتها من قبل الفلترfilter.

تجارب

استعراض قيمة البحث الحالية359796918

بإمكاننا استعراض قيمة البحث الحالية المخزنة ضمن النموذج query model عبر اضافة الكود التالي ضمن صفحة Index.html

{{query}}

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

exp 1

استعراض قيمة البحث ضمن عنوان صفحة هتمل HTML 

سنرى سوية الآن كيف بإمكاننا عرض قيمة الحقل المربوط مع نموذج المعطيات ‘query’ ضمن عنوان صفحة هتمل HTML.

سنضيف الكود التالي ضمن تاغ العنوان في صفحة هتمل HTML

<title> Google phone gallery : {{query}} </title>

ثم نقوم باعادة تحميل الصفحة ضمن المتصفح, ونكتب ضمن حقل البحث, ولكن!! نلاحظ عدم تحديث عنوان الصفحة بحسب الكتابة. السبب في ذلك لان ‘query’ model يقع خارج النطاقscope , لأن ng-controller=’PhoneListCtr”  – والتي تحدد نطاق angularjs – تقع ضمن تاغ body وبالتالي لا تشمل ما غير ذلك.

<body ng-controller=PHoneListCtr”>

إذا اردتم ان يتم ربط نموذج الخاص بالمتحول query مع تاغ العنوان <title>, عندها يتوجب تحريك مكان الموجه ngController من موضعه الحالي إلى تاغ <html> ليشمل بذلك كل عناصر الصفحة.

<html ng-app=”phonecatApp” ng-controller=”PhoneListCtrl”>

تأكدوا من اجازة الموجه ng-cntroller من ضمن تاغ <body> بعد نقله إلى موضعه الجديد.

الآن اعيدوا تحميل الصفحة, ولاحظوا تغير عنوان الصفحة كلما تغيرت محتويات حقل البحث المسمى query.

ستلاحظون عند بداية تحميل الصفحة, بأنه ولأجزاء من الثانية يتم اظهار النص {{query}} للمستخدم. لنتجنب هذه المشكلة يوجد هنالك حل أفضل, ويمكن عبر استخدام موجه ngBind أو ngBindTemplate, وهما غير مرئيان للمستخدم عند تحميل الصفحة.

<title ng-bind-template=”Google Phone Gallery: {{query}}” > Google Phone Gallery</title>

 

الآن كل شيء على ما يرام.

سنتوقف في هذا الدرس فقط عند هذه الميزة الرائعة وسهلة الاستخدام ضمن angularJs

وإلى لقاء قريب ضمن الدرس القادم لنتابع ضمنه الحديث عن مزايا angular عبر متابعة الخطوات المتبقة ضمن تطبيقنا الحالي

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

المصدر

https://docs.angularjs.org/tutorial

الترجمة المصطلح
الموجه Directive
تعبير Expression
الربط Binding
سياق Context
نطاق Scope
موديول – وهو ما يشبه الحزمة Module

 

,

أضف تعليق