Posts Tagged Web Development

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/

, , , ,

أضف تعليق