إنشاء وتشغيل مشروع Angular

ما هو Angular؟

Angular هو إطار عمل أمامي مفتوح المصدر تديره Google، ويستخدم لبناء تطبيقات الصفحة الواحدة (SPA) الديناميكية. يعتمد على TypeScript، ويوفر مجموعة واسعة من الأدوات والميزات، مما يسمح للمطورين ببناء تطبيقات معقدة بكفاءة. تعتمد فكرة Angular الأساسية على المكونات والتقسيم إلى وحدات، مما يسهل تنظيم وصيانة الكود.

الميزات الرئيسية والمزايا لـ Angular

• التكويد المكوناتي: بناء واجهة المستخدم عبر المكونات، مما يجعل الكود أكثر تقسيماً ويمكن إعادة استخدامه.
• ربط البيانات ثنائي الاتجاه: مزامنة تلقائية بين نموذج البيانات والعرض، مما يجعل إدارة البيانات أسهل.
• حقن التبعية: تحسين اختبار الكود وصيانته من خلال آلية حقن التبعية.
• أدوات CLI قوية: توفر Angular أدوات سطر أوامر قوية (Angular CLI)، مما يبسط إنشاء المشاريع وتطويرها وبنائها.
• التوجيه ومعالجة النماذج المدمجة: توفر Angular ميزات توجيه ومعالجة نماذج قوية، مما يسهل بناء تطبيقات الصفحة الواحدة.

يمكن أن يساعد Angular المطورين على بناء تطبيقات ويب حديثة وسريعة الاستجابة بكفاءة أكبر.

إنشاء وتشغيل مشروع Angular باستخدام ServBay

في هذه المقالة، سنستخدم بيئة Node.js المقدمة من ServBay لإنشاء وتشغيل مشروع Angular. سنستخدم ميزة 'المضيف' الخاصة بـ ServBay لإعداد خادم الويب، وتحقيق الوصول إلى المشروع من خلال البروكسي العكسي وخدمة الملفات الثابتة.

إنشاء مشروع Angular

1. تكوين المشروع

   أولاً، تأكد من تثبيت بيئة Node.js المقدمة من ServBay. ثم استخدم الأمر التالي لتثبيت Angular CLI عالميًا:

   npm install -g @angular/cli

   في الدليل الجذر للموقع المقترح بواسطة ServBay /Applications/ServBay/www، أنشئ مشروع Angular جديداً:

   cd /Applications/ServBay/www
   ng new servbay-angular-app

   أدخل اسم المشروع كما هو مطلوب (يوصى بتسميته servbay-angular-app)، واختر الخيارات الأخرى حسب الحاجة:

   ? هل ترغب في إضافة التوجيه لـ Angular؟ نعم
   ? ما هو تنسيق ورقة الأنماط الذي تريد استخدامه؟ CSS

2. تثبيت التبعيات

   انتقل إلى دليل المشروع وقم بتثبيت التبعيات:

   cd servbay-angular-app
   npm install

تعديل محتوى إخراج مشروع Angular

1. تعديل ملف src/app/app.component.html

   افتح ملف src/app/app.component.html، وعدل المحتوى ليخرج "Hello ServBay!":

   <div style="text-align:center">
     <h1>Hello ServBay!</h1>
   </div>

الدخول في وضع التطوير

1. تشغيل خادم التطوير

   ابدأ خادم التطوير وحدد منفذ (على سبيل المثال: 8585):

   ng serve --port 8585

   سيفتح هذا خادم تطوير محلي ويعرض المنفذ 8585.

2. تكوين البروكسي العكسي لمضيف ServBay

   باستخدام ميزة 'المضيف' الخاصة بـ ServBay، قم بالوصول إلى خادم التطوير عبر البروكسي العكسي. في إعدادات 'المضيف' في ServBay، أضف بروكسي عكسي جديد:

   • الاسم: موقعي الأول لتطوير Angular
   • النطاق: servbay-angular-test.dev
   • نوع المضيف: بروكسي عكسي
   • IP: 127.0.0.1
   • المنفذ: 8585

   راجع إضافة موقع تطوير Nodejs للخطوات التفصيلية.

3. الوصول إلى وضع التطوير

   افتح المتصفح، واذهب إلى https://servbay-angular-test.dev لمشاهدة المشروع في الوقت الحقيقي. بفضل دعم ServBay لأسماء النطاقات المخصصة والشهادات المجانية لـ SSL، ستتمتع بمستوى أعلى من الأمان.

بناء النسخة الإنتاجية

1. بناء النسخة الإنتاجية

   عند الانتهاء من التطوير، استخدم الأمر التالي لبناء النسخة الإنتاجية:

   ng build --prod

   بعد البناء، ستوجد الملفات الثابتة المولدة في الدليل dist/servbay-angular-app.

2. إعداد خدمة الملفات الثابتة

   باستخدام ميزة 'المضيف' الخاصة بـ ServBay، اضبط الوصول إلى النسخة الإنتاجية عبر خدمة الملفات الثابتة. في إعدادات 'المضيف' في ServBay، أضف موقع ثابت جديد:

   • الاسم: موقعي الأول لإنتاج Angular
   • النطاق: servbay-angular-test.prod
   • نوع المضيف: ثابت
   • الدليل الجذر للموقع: /Applications/ServBay/www/servbay-angular-app/dist/servbay-angular-app

3. الوصول إلى وضع الإنتاج

   افتح المتصفح، واذهب إلى https://servbay-angular-test.prod لمشاهدة النسخة الإنتاجية بعد البناء. بفضل دعم أسماء النطاقات المخصصة وشهادات SSL المجانية من ServBay، سيكون موقعك أكثر أماناً ومصداقية.

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