كيفية إعداد Angular في VS Code [الدليل]

Angular هو إطار تطبيق ويب مفتوح المصدر يستخدم JavaScript. على عكس بعض أطر العمل أو لغات البرمجة الأخرى، تحتاج إلى إعداد متغير البيئة في Windows حتى يعمل هذا الإطار. ولذلك، يجب علينا أن نتعلم كيفية قم بإعداد Angular في VS Code واكتب رمزًا تجريبيًا، وهذا ما سنفعله.

كيفية إعداد Angular في VS Code

لإعداد Angular في VS Code على جهاز الكمبيوتر الذي يعمل بنظام Windows، يتعين عليك اتباع الخطوات المذكورة أدناه.

نوافذ 8 الاغلاق الكامل

قم بتثبيت كود Visual Studio
قم بإعداد NodeJS
إعداد متغير البيئة
تثبيت الزاوي

دعونا نتحدث عنهم بالتفصيل.

1] قم بتثبيت كود Visual Studio

للبدء في رحلتنا للبرمجة في عالم Angular، نحتاج إلى تثبيت Visual Studio Code. للقيام بنفس الشيء، عليك الذهاب إلى code.visualstudio.com وقم بتنزيل التطبيق المناسب لبيئتك. بعد التحميل اذهب الى تحميل المجلد، قم بتشغيل وسائط التثبيت، ثم قم بتثبيت التطبيق.

2] قم بإعداد NodeJS

من المهم ملاحظة أنه على الرغم من أنه يمكنك استخدام VSCode لتحرير Angular، إلا أنه لا يمكنك تشغيله مباشرة داخل المحرر. يتم تنفيذ Angular فعليًا داخل NodeJS، وهي بيئة JavaScript تمثل جزءًا من إعداد تطوير الويب المحلي لديك. باستخدام NodeJS، يمكنك تشغيل Angular على مضيفك المحلي في متصفح الويب. في كل مرة تقوم فيها بإجراء تغييرات على كود Angular الخاص بك في VSCode، سيتم إعادة تحميله تلقائيًا في المتصفح، وهو ما يُعرف باسم 'إعادة التحميل السريع'. ومع ذلك، نظرًا لأن Angular يعمل في NodeJS، فستحتاج إلى تثبيت NodeJS أولاً. يمكنك القيام بذلك عن طريق الذهاب إلى nodejs.org .

0x80070079

عند تثبيت Node JS لتشغيل Angular، اختر موقعًا يسهل تذكره، مثل مسار بسيط وقصير. سيكون هذا مفيدًا إذا كنت بحاجة إلى استخدام NodeJS لاحقًا. لذلك، بدلاً من تثبيت التطبيق في ملفات البرنامج، قم بتثبيته في D:\NodeJS، وإن كان ذلك لا يهم.

3] قم بإعداد متغير البيئة

بعد ذلك، نحتاج إلى إعداد متغير البيئة لـ NodeJs قبل المضي قدمًا وتثبيت Angular. للقيام بنفس الشيء، اتبع الخطوات التالية.

اضغط على Win + S، اكتب 'متغيرات البيئة' ومن ثم فتحه.
بمجرد الانتهاء من ذلك، تحتاج إلى نسخ موقع NodeJS. للإشارة فقط، بلدنا هو D:\NodeJS.
انقر على متغير البيئة.
الآن، حدد المسار في قسم متغير النظام وانقر على 'تحرير'.
انقر على جديد، والصق الموقع، ثم انقر على موافق.

بهذه الطريقة تكون قد أدخلت متغير بيئة NodeJS. للتحقق مما إذا كان يعمل، افتح موجه الأمر ومن ثم تشغيل العقدة - الإصدار. إذا أعطاك إصدارًا، فمن الجيد تثبيت Angular.

4] تثبيت الزاوي

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

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

لتثبيت angular في المجلد، نحتاج إلى تشغيل الأمر التالي.
```
npm install -g @angular/cli
```
ثم قم بتشغيل الأمر التالي لإنشاء مشروع جديد.
```
ng new foldername
```
الآن، ادخل إلى هذا المجلد باستخدام 'cd Foldername' وقم بتشغيل الخادم باستخدامه من الخدمة.

نأمل أن تتمكن الآن من تشغيل Angular دون أي مشاكل.

يقرأ: كيفية تثبيت جافا سكريبت في VSCode ؟

لا يتوفر هذا الأمر عند تشغيل Angular CLI خارج مساحة العمل

عندما قمت بتشغيل الأمر 'ngserv' ظهرت لي رسالة خطأ تفيد بأن الأمر غير متاح. يشك العديد من الأشخاص في أن Angular لم يتم تثبيته على نظامهم، في حين أن المشكلة الوحيدة في الواقع هي أنك لست في الدليل الصحيح. لحل هذه المشكلة، ما عليك سوى إدخال 'قرص مضغوط' في الدليل الذي يقع فيه المشروع، وليس موقع الجذر ولكن موقع المشروع الفعلي. لذلك، في البداية، عندما قمت بتشغيل الأمر، كنت في AngularProject، وهو المجلد الجذر الخاص بي، لذلك لم يعمل. ومع ذلك، فقد عمل بسلاسة عندما قمت بتغيير الدليل إلى SampleFolder وقمت بتشغيل نفس الأمر.

شركة inktomi peerblock

الحل البديل الذي نوصيك به هو فتح File Explorer، والانتقال إلى الموقع حيث تم تخزين مشروعك، والنقر بزر الماوس الأيمن على الشاشة الفارغة، وتحديد المحطة الطرفية> موجه الأوامر . ومن ثم تشغيل من الخدمة.

يقرأ: كيفية تنزيل وتثبيت Java JDK على نظام التشغيل Windows ؟

كيفية إعداد مشروع Angular في Visual Studio Code؟

من أجل إعداد مشروع Angular، تحتاج أولاً إلى تثبيت NodeJS على جهاز الكمبيوتر الخاص بك. بمجرد الانتهاء من ذلك، تحتاج إلى تكوين متغير البيئة وتثبيت Angular باستخدام ملف تثبيت npm -g @angular/cli يأمر. الآن، قم بإنشاء دليل جديد باستخدام من اسم المجلد الجديد الأمر، لمعرفة المزيد، راجع الخطوات المذكورة سابقًا.

يقرأ: كيفية تكوين VS Code لـ Microsoft C++

كيفية إنشاء Angular VSCode؟

يعد Angular File Generator امتدادًا مفيدًا لبرنامج Visual Studio Code الذي يمكّنك من إنشاء ملفات Angular ببضع نقرات فقط. إنه مبني على Angular CLI ويستخدم نفس المخططات مثل CLI. بالإضافة إلى ذلك، فهو يوفر خيارًا لإنشاء الملفات مباشرة من الوحدة الطرفية.

إقرأ أيضاً: كيفية تثبيت بايثون في VS Code .