القراء مثلك يساعدون في دعم MUO. عند إجراء عملية شراء باستخدام الروابط الموجودة على موقعنا ، فقد نربح عمولة تابعة.

Angular هو إطار عمل JavaScript قوي لبناء تطبيقات من صفحة واحدة. طورت Google البرنامج وتحتفظ به جنبًا إلى جنب مع المساهمين في جميع أنحاء العالم.

مثل React ، يمكنك استخدام Angular لإنشاء مجموعة متنوعة من التطبيقات الأمامية ، بما في ذلك أنظمة الويب والجوال وسطح المكتب. تفضل بعض الصناعات Angular لأنها شاملة ومستقرة.

دعنا نتعلم المزيد عن Angular عن طريق استنساخ مشروع من GitHub وتشغيله محليًا.

شروط الاستنساخ

بخلاف الأطر الأخرى ، يعد استنساخ تطبيق Angular وتشغيله أمرًا سهلاً. سوف تقوم باستنساخ مشروع جيثب. قبل أن تبدأ ، تأكد من تلبية المتطلبات التالية:

  • يجب أن يكون لديك إصدار ثابت من Node.js مثبتًا. إذا لم يكن كذلك ، تعلم كيفية تثبيت Nodejs على أوبونتو أو قم بتثبيت Nodejs على نظام Windows.
  • يجب لديك Git مثبتة.
  • يجب أن يكون لديك حساب جيثب.

1. تثبيت مدير حزمة العقدة

مدير حزمة العقدة (npm) هو مستودع برامج لحزم JavaScript. يحتوي npm على CLI (واجهة سطر الأوامر) التي تؤدي مهام مختلفة. يمكنك استخدام CLI لتنزيل البرامج وتثبيتها ونشرها.

instagram viewer

عندما تقوم بتثبيت Node.js ، فإنه يأتي مع حزمة npm. للتحقق من إصدارات حزمتي Node.js و npm ، قم بتشغيل ما يلي على الجهاز:

للتحقق من إصدار Node.js المثبت ، اطبع الإصدار باستخدام الأمر التالي:

العقدة --إصدار

يمكنك التحقق من إصدار npm باستخدام نفس الخيار:

npm --إصدار

2. قم بتثبيت Angular CLI

يمكنك استخدام Angular CLI لأداء مهام التطوير المختلفة. تشمل المهام إنشاء التطبيقات والاختبار والنشر. لتثبيت Angular CLI ، قم بتشغيل الأمر التالي:

$ npm install -g @ مستطيل/cli

للتحقق من إصدار Angular CLI ، قم بتشغيل الأمر:

نسخة $ ng

3. ابحث عن مشروع على GitHub

سوف تقوم باستنساخ ملف Giphy- طبق الاصل مشروع من جيثب:

انتقل إلى الزر الأخضر المسمى شفرة. اضغط عليها لتكشف عن قائمة منسدلة. انسخ ارتباط HTTP أو SSH. كلاهما سيفي بالغرض.

4. استنساخ المشروع محليًا

أولاً ، قم بإنشاء مجلد وقم بتسميته Angular-Clone. تذكر أن تذهب إلى المجلد بالأمر التالي:

الزاوي cd-استنساخ

ثم قم بتشغيل ملف استنساخ بوابة الأمر لنسخ المشروع إلى مجلدك.

شخص سخيف استنساخ https://github.com/Reuben-Kipkemboi/Giphy-Replica.git

بعد ذلك ، تحقق من مجلد Angular-Clone لمعرفة ما إذا كان استنساخ Giphy-Replica بالداخل. يجري ls لعرض محتويات المجلد:

ls

انتقل إلى المجلد:

قرص مضغوط Giphy- طبق الاصل

في هذه المرحلة ، يمكنك فحص ملفات المشروع في محرر كود من اختيارك أو عرضها عبر واجهة الويب GitHub.

5. قم بتثبيت حزم npm

تحتاج إلى تثبيت جميع الحزم والتبعيات من المشروع المستنسخ لتشغيله. لتثبيت الحزم ، قم بتشغيل:

npm ثَبَّتَ

إذا واجهت أي تقارير عن الثغرات الأمنية ، فقم بإصلاحها باستخدام:

إصلاح تدقيق npm

6. افتح المشروع في المستعرض

الآن لديك جميع المتطلبات لتشغيل المشروع ، يمكنك تشغيله وفتحه في متصفح. ابدأ ببناء وخدمة المشروع:

يخدم ng

ثم افتح http://localhost: 4200/ في متصفح لعرض المشروع.

يمكنك استخدام Angular CLI لفتح المشروع تلقائيًا في المستعرض:

خدمة $ ng -o

يقوم هذا الأمر ببناء التطبيق وتشغيل الخادم ومراقبة الملفات من أجل التحديثات.

في متصفحك ، يجب أن ترى موقع Giphy-Replica على الويب:

لماذا استنساخ Angular Project؟

بدلاً من بدء مشروع من البداية ، يمكنك استنساخ واحد من GitHub. يؤدي استنساخ مشروع مفتوح المصدر وتعديله لاستخدامك الشخصي إلى توفير الوقت في بدء المشروع من البداية. يمكنك أيضًا المساهمة بأي تغييرات مفيدة تعود إلى المشروع الأولي إذا كان ذلك مناسبًا.

تم التصويت عليه باعتباره رابع أكثر إطار عمل للواجهة الأمامية شيوعًا في عام 2021 ، ولا يزال Angular يذهل مع كل إصدار. يأتي مع حزم رائعة تدعم تطوير التطبيقات ذات الصفحة الواحدة. استخدم هذا الإطار الممتاز لبناء تطبيقات ذات مستوى عالمي.