| الأمر | الوظيفة | ملاحظات هامة |
|---|---|---|
| ng new my-app | إنشاء مجلد مشروع جديد يحتوي على كافة الملفات والإعدادات الأساسية | سيطلب منك اختيار بعض الإعدادات مثل ملفات التنسيق (CSS/SCSS) |
| cd my-app | الانتقال داخل مجلد المشروع الذي تم إنشاؤه للبدء في التعامل معه | يجب تنفيذ هذا الأمر قبل تشغيل أي أوامر أخرى خاصة بالمشروع |
| ng serve | تشغيل خادم التطوير المحلي وفتح التطبيق على المنفذ الافتراضي | يبقى قيد التشغيل لتحديث المتصفح تلقائياً عند تعديل أي ملف |
بعد أن أتممنا تجهيز بيئة العمل بالكامل، وتثبيت سطر الأوامر (Angular CLI) ومحرر الأكواد (VS Code)، حان الوقت لتطبيق ما تعلمناه عملياً. في هذا الدرس، سنقوم بإنشاء أول مشروع حقيقي باستخدام أداة سطر الأوامر، ونتعرف على كيفية تشغيل خادم التطوير المحلي (Local Development Server) لفتح التطبيق ورؤيته مباشرة على المتصفح الخاص بك.
إنشاء مشروع جديد لا يتطلب سوى سطر برمجي واحد عبر واجهة سطر الأوامر. افتح موجه الأوامر في المجلد الذي ترغب في حفظ مشروعك فيه، ثم اتبع الخطوات التالية:
قم بكتابة الأمر التالي مع تغيير my-app إلى الاسم الذي تفضله لمشروعك:
| 1 | ng new my-app |
ℹ️ معلومة
(أثناء التثبيت، قد يسألك سطر الأوامر عن تفضيلاتك مثل استخدام نظام التنسيق CSS العادي أو SCSS، يمكنك الضغط على Enter لاختيار الإعدادات الافتراضية).
| 1 | cd my-app |
بعد اكتمال عملية التحميل وإنشاء الملفات، أصبح المشروع جاهزاً للتشغيل المحلي على جهازك.
نفذ الأمر التالي داخل مجلد المشروع لبدء تجميع الأكواد وتشغيل السيرفر:
| 1 | ng serve |
ℹ️ معلومة
(بعد نجاح التشغيل، سيظهر لك في سطر الأوامر رابط محلي افتراضي وغالباً يكون http://localhost:4200/)
إذا كنت تريد من سطر الأوامر فتح المتصفح وتوجيهك للصفحة فوراً، يمكنك إضافة خيار --open:
| 1 | ng serve --open |
ℹ️ معلومة
(بمجرد فتح الرابط في المتصفح، سترى الصفحة الافتراضية الترحيبية الخاصة بـ Angular والتي تأكيد نجاح عملية التثبيت والتشغيل بنجاح).