Angular 9 للمبتدئين - كيفية تثبيت تطبيقك الأول باستخدام Angular CLI

Angular هو أحد أكثر أطر عمل JavaScript شيوعًا التي أنشأتها Google وطورتها. في العامين الماضيين ، اكتسبت ReactJS الكثير من الاهتمام وأصبحت أشهر مكتبة JS حديثة في الصناعة. لكن هذا لا يعني أن Angular لم يعد مهمًا بعد الآن.

على العكس من ذلك ، Angular هو ثاني أكثر إطار عمل شيوعًا بعد React وفقًا لـ Google Trends (على مستوى العالم):

بصفتي مطورًا للواجهة الأمامية ، عملت مع Angular. الآن أود تغطية بعض الميزات الهامة لـ Angular في مقالاتي القادمة:

  • الجزء 1: كيفية تثبيت تطبيقك الأول باستخدام Angular CLI (أنت هنا حاليًا)
  • الجزء 2: مكونات الزاوي وسلسلة الاستيفاء
  • الجزء 3 : التوجيهات الزاوية والأنابيب
  • الجزء 4: ربط البيانات أحادي الاتجاه في الزاوية
  • الجزء 5: ربط البيانات الزاوي ثنائي الاتجاه بنموذج ngModel

في الجزء الأول من سلسلة Angular for Beginners الخاصة بي ، ستتعلم ماهية Angular & Angular CLI وكيفية تثبيت تطبيق Angular الأول الخاص بك باستخدام CLI.

المتطلبات الأساسية

قبل البدء في تعلم Angular ، أوصي بأن تتعرف على اللغات التالية إذا لم تكن كذلك بالفعل:

  • HTML ، CSS
  • جافا سكريبت / ES6
  • تيبسكريبت

إذا كنت تفضل ذلك ، يمكنك مشاهدة الفيديو التعليمي أدناه:

ما هو الزاوي؟

Angular هو إطار عمل JavaScript تم تطويره وصيانته بواسطة Google لبناء تطبيقات الواجهة الأمامية. اسمحوا لي أن أبدأ أولاً بشرح ماهية الإطار ...

ما هو الإطار؟

الإطار هو حزمة كاملة مع وظائفها ومكتباتها الخاصة. يحتوي الإطار على قواعده الخاصة ، وليس لديك الكثير من المرونة ويعتمد المشروع على الإطار الذي تستخدمه. الزاوي هو مثال على الإطار.

تم إصدار Angular في عام 2016 ولكن قبل Angular ، كان هناك AngularJS. من أكثر الأسئلة شيوعًا حول Angular هو ما الفرق بين AngularJS و Angular؟

AngularJS مقابل Angular

هذان الإصداران من Angular يربكان العديد من المطورين. AngularJS و Angular إطاران مختلفان تمامًا. تسمى الإصدارات Angular (مثل 1 ، 1.2 ، 1.5 ، إلخ) Angular JS وتطلق من الإصدار 2 وما فوقها Angular.

  • Angular JS → إصدارات من 1.x
  • Angular → الإصدار 2 وما فوق

لذا فإن Angular الإصدار 2 عبارة عن إعادة كتابة كاملة لإطار AngularJS والإصدارات الأحدث (مثل 4،5،6 وما إلى ذلك) هي تغييرات طفيفة في الإصدار 2 من Angular.

في سلسلة المقالات هذه ، ستتعلم Angular 2+.

ما هو Angular CLI؟

CLI تعني واجهة سطر الأوامر. لدى Angular CLI الرسمية الخاصة بها والتي تساعدنا في الكثير من الأشياء أثناء عملية التطوير.

يتم استخدام Angular CLI لأتمتة العمليات في مشاريع Angular بدلاً من القيام بها يدويًا. تدعم CLI ، نحن المطورين ، في مشروع Angular من البداية إلى النهاية.

على سبيل المثال ، يمكن استخدام Angular CLI من أجل:

  • التكوينات وإعداد البيئة
  • مكونات البناء والخدمات ونظام التوجيه
  • بدء واختبار ونشر المشروع
  • تثبيت مكتبات الطرف الثالث (مثل Bootstrap و Sass وما إلى ذلك)

وأكثر بكثير. لنرى الآن كيفية تثبيت تطبيق Angular الأول لدينا باستخدام CLI خطوة بخطوة.

الخطوة 1: تثبيت NPM (مدير حزمة العقدة)

بادئ ذي بدء ، سنحتاج إلى Node js. NPM (مدير حزمة العقدة ، هو جزء من node js) هي أداة لتثبيت مكتبات الطرف الثالث والاعتمادية على مشروعنا. إذا لم يكن لديك حتى الآن ، يمكنك تنزيله وتثبيته من هنا. لقد شرحت ذلك أيضًا خطوة بخطوة في مقطع الفيديو التعليمي.

الخطوة 2: تثبيت Angular CLI

إذا كان لديك عقدة js مثبتة ، فإن الخطوة التالية هي تثبيت Angular CLI نفسه على جهاز الكمبيوتر الخاص بك:

npm install -g @angular/cli

g لتقف على التثبيت العالمي . إذا كنت تستخدم -g لاحقًا ، فيمكنك استخدام CLI في أي مشروع Angular على جهاز الكمبيوتر الخاص بك.

نصيحة : اكتب ng vإلى واجهة سطر الأوامر (أو المحطة الطرفية) للتحقق من إصدار Angular الخاص بك.

الخطوة 3: إنشاء مشروع Angular جديد

بعد اكتمال التثبيت ، يمكنك استخدام Angular CLI لإنشاء مشروع Angular جديد باستخدام الأمر التالي:

ng new my-first-app

ينشئ هذا الأمر مشروع Angular جديدًا (يسمى my-first-app ، يمكنك استخدام أي اسم) مع جميع التبعيات والملفات اللازمة. لا داعي للقلق بشأن أي شيء لأن CLI يقوم بذلك تلقائيًا نيابة عنك.

الخطوة 4: قم بتشغيل التطبيق

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

ng serve -- open

تفتح علامة "فتح" نافذة المتصفح المحلي تلقائيًا.

يدعم Angular الخادم المباشر ، حتى تتمكن من رؤية التغييرات في موقعك المحلي دون تحديث صفحة المستعرض الخاص بك. لمزيد من التفاصيل والتحديثات ، تحقق أيضًا من الوثائق الرسمية.

استنتاج

لذا في الجزء الأول ، قدمنا ​​مقدمة إلى Angular ، ما هو CLI وكيفية تثبيت تطبيق Angular الأول. في المنشور الثاني ، ستتعرف على المكونات الزاويّة و String Interpolation. ترقب :)

إذا كنت تريد معرفة المزيد عن تطوير الويب ، فلا تتردد في متابعتي على Youtube !

شكرا لقرائتك!