• Home
  • Courses
  • Portfolio
  • Contact
    Tiger 4 CodeTiger 4 Code
    • Home
    • Courses
    • Portfolio
    • Contact

      Angular 2

      • Home
      • Blog
      • Angular 2
      • 3 : اعداد بيئة العمل الازمة لبرمجة Angular2

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

      • Posted by Schwarztiger
      • Categories Angular 2
      • Date July 16, 2017
      • Comments 0 comment

      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/

       

       

      Tag:Angular environment setup, AngularJs, mobile development, npm, Web Development, تطوير الويب

      • Share:
      author avatar
      Schwarztiger

      Previous post

      1: مقدمة Angular2
      July 16, 2017

      Next post

      3: Angular2 - Hello World
      July 17, 2017

      You may also like

      demo_image
      12 : Angular2 – Forms النماذج
      18 August, 2017
      demo_image
      11 : Angular2 – Routing التوجيه
      8 August, 2017
      demo_image
      10 : Angular2 – Error Handling معالجة الأخطاء
      8 August, 2017

      Leave A Reply Cancel reply

      Your email address will not be published. Required fields are marked *

      Search

      Latest Courses

      Android Development

      Android Development

      $950.00
      HTML Tutorial: HTML & CSS for Beginners

      HTML Tutorial: HTML & CSS for Beginners

      $800.00
      Learn WordPress Content Management System

      Learn WordPress Content Management System

      Coming soon
      logo-eduma-the-best-lms-wordpress-theme

      info@tiger4code.com

      Links

      • Courses
      • Portfolio

      Copyright 2019 | Educational, Web & Mobile Development Platform By Tiger 4 Code