تحليل موجز لكيفية تطوير Angular في IDEA

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

مشروع جديد

=> جديد => المشروع => JavaScript => Angular CLI

بعد تحديد الخطوة التالية، يمكننا تكوين مشروعنا فيه. إذا تابعتني من البداية إلى هذه الخطوة، فستجد أن IDEA قامت تلقائيًا بتكوين كل من مترجم Node وAngular CLI، ولا نحتاج سوى إلى تعيين اسم مشروعنا. [البرامج التعليمية الموصى بها: "البرنامج التعليمي الزاوي"]

بعد النقر فوق "إنهاء"، انتظر حتى يكتمل الإنشاء. عندما تقوم وحدة التحكم بإخراج المحتوى التالي، فهذا يعني أن الإنشاء كان ناجحًا.

سيكون للملف نهايات الأسطر الأصلية في دليل العمل الخاص بك
    تمت تهيئة git بنجاح.
تم

تشغيل المشروع في IDEA

1. إظهار npm Script

ابحث عن ملف pachage.json في الدليل الجذر للمشروع، وانقر بزر الماوس الأيمن وحدد Show npm Script وستظهر نافذة جديدة

في هذه النافذة، هناك بعض الأوامر شائعة الاستخدام. أمر البدء يعادل أمر ngserv. انقر نقرًا مزدوجًا فوق ابدأ، وسيبدأ المشروع في التجميع والبدء، وستخرج وحدة التحكم المعلومات التالية

*. * يستمع Angular Live Development Server إلى المضيف المحلي: 4200، افتح متصفحك على http://localhost:4200/ **

√ تم التجميع بنجاح

في هذا الوقت، قم بزيارة http://localhost:4200/.

الأوامر الموجودة في npm محددة بالفعل في package.json، ويمكننا أيضًا تخصيص الأوامر.

"إصدار العقدة": "node -v"

ضمن عقدة البرامج النصية لـ package.json

ثم نقوم بتحديث واجهة npm. يمكنك أن ترى أنه تمت إضافة أمر إصدار عقدة جديد، وسيكون للنقر المزدوج عليه نفس التأثير تنفيذ الأمر العقدة -v .