كيفية تشغيل مشروع Angular [شرح خطوة بخطوة]

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

Angular CLI: مقدمة موجزة

إذا كنت ترغب في العمل في مشاريع Angular ، فيجب أن يكون لديك Angular CLI. إنها أداة Angular الرسمية للعمل على مشاريع Angular وتهيئتها. يعمل Angular CLI على تقليل الكثير من المتاعب الناتجة عن عملية التهيئة. لا يتعين عليك إجراء تكوينات متعددة وأدوات إنشاء لبدء مشروع إذا كنت تستخدم Angular CLI.

يسمح لك Angular CLI ببدء مشروع بأمر واحد فقط. باستخدام أمر آخر ، يمكنك خدمة المشروع باستخدام خادم تطوير محلي. يعمل Angular CLI على Node.js. لذلك ، لتشغيل Angular CLI على نظامك ، يجب أن يكون لديك Node.js في نظامك أولاً.

Node.js مخصص للخوادم ولتطوير التطبيقات من جانب الخادم ، بينما Angular هو حل أمامي. يساعدك Node.js في Angular CLI فقط.

كيفية تثبيت Angular؟

الخطوة الأولى

قبل تثبيت Angular في نظامك ، يجب أن يكون لديك Node و npm في نظامك. يمكنك استخدام Node Version Manager لتثبيته ، أو يمكنك استخدام مدير الحزم الرسمي لنظام التشغيل الخاص بك. لديك أيضًا خيار تثبيت Node من موقعه على الويب. نوصي بتثبيته من موقع الويب لأنه سريع ومباشر. ما عليك سوى التوجه إلى صفحة التنزيل الخاصة بـ node.js.

الخطوة الثانية

بمجرد وصولك إلى صفحة التنزيل الخاصة بـ node.js ، حدد الإصدار الذي تريده وفقًا لنظام التشغيل الخاص بك ، ثم اتبع الخطوات المحددة في معالج التثبيت. إذا كنت قد قمت بالفعل بتثبيت node.js في نظامك من قبل ، فيمكنك تخطي هذه الخطوة (والخطوة السابقة).

خطوة ثالثة:

للتحقق مما إذا كانت Node مثبتة في جهازك أم لا ، افتح موجه الأوامر وقم بتشغيل الأمر التالي:

عقدة $ -v

سيعرض الإصدار المثبت حاليًا من Node في نظامك.

خطوة ثالثة

بعد التحقق مما إذا كان لديك Node مثبتًا في نظامك ، يمكنك تثبيت Angular في جهازك عن طريق تشغيل الأمر التالي لموجه الأوامر:

$ npm install @ angular / cli

بعد تشغيل الأمر أعلاه ، سيتم تثبيت Angular CLI في جهازك. لقد أكملت جزء "كيفية تثبيت Angular".

تعلم: راتب المطور الزاوي في الهند: للطلاب الجدد وذوي الخبرة

كيف تدير مشروع Angular؟

نظرًا لأننا قمنا بتثبيت Angular في نظامنا ، فإننا نركز الآن على بدء مشروع جديد.

الخطوة الأولى

سننشئ مساحة عمل وتطبيق المبتدئين عن طريق تشغيل الأمر التالي:

ng جولة الزاوي الجديدة للأبطال

لقد أضفنا Angular-tour-of-heroes كاسم لمساحة العمل لدينا. سيطالبك الأمر "ng new" بالميزات التي تريد إضافتها في تطبيق المبتدئين. نظرًا لأنه برنامج تعليمي ، سنحدد الإعدادات الافتراضية ونتابع بالضغط على Return أو Enter.

الخطوة الثانية

الآن ، قام Angular CLI بتثبيت حزم npm والتبعيات المطلوبة. سيكون لديك استعداد لاستخدام "تطبيق ترحيب" ومساحة عمل جديدة. سيكون لديك أيضًا مجلد جذر يحمل نفس اسم التطبيق (angular-tour-of-heroes) ، ومشروع تطبيق هيكلي.

في هذه الخطوة ، علينا أن نخدم التطبيق. سنفعل ذلك من خلال التوجه إلى دليل مساحة العمل وتشغيل التطبيق:

cd الزاوي جولة الأبطال

ng يخدم - مفتوح

يقوم الأمر "ng serve" بإنشاء التطبيق ، وبدء خادم التطوير ، والعناية بملفات مصدر مشروعك ، وإعادة إنشاء تطبيقك أثناء تعديل الملفات الضرورية.

خطوة ثالثة

إذا كنت ترغب في تعديل التطبيق ، فسيتعين عليك التوجه إلى مجلد src / app في IDE أو المحرر. سنقوم بتحرير تطبيقنا من خلال تغيير مكونات هذا المشروع. المكونات هي اللبنات الأساسية لتطبيقات Angular. إنهم يتعاملون مع جميع الوظائف الأساسية تقريبًا لمشروع Angular ، مثل عرض البيانات والاستجابة للمدخلات وما إلى ذلك.

في هذه الخطوة ، افتح IDE الخاص بك وتوجه إلى دليل المشروع وابحث عن الملفات المكونة لمشروعك:

• app.component.ts
• app.component.html
• app.component.css

الملف الأول هو رمز الفصل ويستند إلى TypeScript ، والملف الثاني هو القالب في HTML ، والملف الأخير يحتوي على أنماط CSS الخاصة.

الخطوة الرابعة

تم إعداد مشروعنا ، ولدينا جميع الملفات جاهزة. في هذه الخطوة ، سنخصصها بإضافة عنوان لها. لتغيير عنوان مشروع Angular الخاص بك ، انتقل إلى ملف app.component.ts واحذف النموذج الافتراضي الموجود. يُنشئ Angular CLI قالبًا يتم إنشاؤه تلقائيًا. يمكنك استبداله بما يلي:

<h1> {{your title}} </h1>

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

الخطوة الخامسة

سيكون تخصيص التطبيق غير مكتمل بدون أي تصميم. لذلك ، في هذه الخطوة ، سنقوم بتعديل نمط تطبيق Angular الخاص بنا. يقوم Angular CLI بإنشاء ملف styles.css فارغ لتطبيقك عند إنشاء مشروع جديد. يمكنك إدخال الأنماط التي تريدها هنا.

افتح ملف src / styles.css في IDE وابدأ في تعديل نمط التطبيق. قم بتعديل أنماط التطبيق وحفظ التغييرات. عندما تقوم بتحديث المتصفح ، سترى التغييرات في تطبيقك.

الخروج: كيفية تنفيذ ترقيم الصفحات في Angular JS؟

تعرف على المزيد حول التطوير الزاوي والمكدس الكامل

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

إذا كنت مهتمًا بمعرفة المزيد حول تطوير الويب Angular والواجهة الأمامية ، فإليك بعض الموارد الإضافية:

• دليل استئناف المطور الأمامي
• أفضل 10 مهارات لتصبح مطورًا أماميًا
• أفكار المشروع الأمامية

من ناحية أخرى ، يمكنك الحصول على دورة تطوير متكاملة والتعلم من خبراء الصناعة من خلال مقاطع الفيديو والمشاريع والاختبارات.

إذا كنت مهتمًا بمعرفة المزيد حول تطوير البرامج كاملة المكدس ، فراجع دبلوم PG upGrad & IIIT-B في تطوير البرامج الكامل المكدس المصمم للمهنيين العاملين ويقدم أكثر من 500 ساعة من التدريب الصارم ، وأكثر من 9 مشاريع ومهام ، وحالة خريجي IIIT-B ، ومشاريع التخرج العملية العملية والمساعدة في العمل مع الشركات الكبرى.