5. إنشاء وتشغيل أول تطبيق Angular

يشرح هذا الدرس كيفية استخدام Angular CLI لإنشاء وخدمة مشروع جديد.

1. إنشاء مشروع جديد

استخدم الأمر ng new، متبوعاً باسم مشروعك. سنسمي مشروعنا angular-course-app.

bash ng new angular-course-app

سيطلب منك CLI سؤالين:

1. هل ترغب في إضافة توجيه Angular (Angular routing)؟ (الإجابة: نعم، سنتناول هذا قريباً)
2. ما هو تنسيق ورقة الأنماط (stylesheet format) الذي تود استخدامه؟ (اختر CSS للتبسيط)

سيقوم CLI بإنشاء مجلد المشروع، وإعداد جميع الملفات الضرورية، وتثبيت تبعيات npm، وتهيئة المشروع.

2. التنقل وتشغيل التطبيق

انتقل إلى الدليل الذي تم إنشاؤه حديثاً:

bash cd angular-course-app

لتجميع التطبيق وتشغيل خادم التطوير، استخدم ng serve.

bash ng serve --open

• ng serve: يقوم بتجميع التطبيق ويراقب التغييرات.
• --open (-o): يفتح التطبيق تلقائياً في متصفحك الافتراضي (عادةً على http://localhost:4200/).

3. إجراء تغيير بسيط

افتح المشروع في محرر التعليمات البرمجية الخاص بك. انتقل إلى src/app/app.component.ts وقم بتغيير الخاصية title:

typescript // app.component.ts export class AppComponent { title = 'My First Angular App!'; // غيّر هذا السطر }

افتح src/app/app.component.html وقم بتعديل القالب لعرض عنوانك الجديد:

html

{{ title }}

Application successfully started!

احفظ الملفات. سيقوم الأمر ng serve بإعادة تجميع التغييرات تلقائياً، وسيتم تحديث متصفحك (Hot Module Replacement)، ليظهر العنوان المحدث.