دليل المبتدئين إلى Angular 9: تثبيت أول تطبيق لك باستخدام Angular CLI

يُعد Angular أحد أبرز أطر عمل JavaScript وأكثرها شعبية، وقد تم تطويره وصيانته بواسطة شركة Google العملاقة. على الرغم من الاهتمام المتزايد الذي حظي به إطار ReactJS في السنوات الأخيرة، ليصبح المكتبة الأكثر انتشارًا في صناعة تطوير الويب الحديثة، إلا أن هذا لا يقلل من أهمية Angular. بل على العكس تمامًا، يظل Angular ثاني أكثر أطر العمل شعبية بعد React، وفقًا لبيانات Google Trends العالمية:

تُظهر الصورة أعلاه ReactJS باللون الأزرق و Angular باللون الأحمر، مما يعكس الانتشار العالمي لكل منهما.

بصفتي مطور واجهات أمامية، عملتُ سابقًا مع Angular، ويسرني الآن أن أقدم سلسلة مقالات تغطي أهم ميزاته. هذه السلسلة ستكون دليلاً شاملاً للمبتدئين:

• الجزء الأول: كيفية تثبيت أول تطبيق لك باستخدام Angular CLI (المقال الحالي).
• الجزء الثاني: مكونات Angular واستيفاء السلاسل النصية (String Interpolation).
• الجزء الثالث: التوجيهات (Directives) والفلاتر (Pipes) في Angular.
• الجزء الرابع: ربط البيانات أحادي الاتجاه (One-Way Data Binding) في Angular.
• الجزء الخامس: ربط البيانات ثنائي الاتجاه (Two-Way Data Binding) في Angular باستخدام ngModel.

في هذا الجزء الأول من سلسلة “Angular للمبتدئين”، ستتعرف على مفهوم Angular و Angular CLI، وكيفية تثبيت أول تطبيق Angular لك باستخدام واجهة سطر الأوامر (CLI).

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

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

• HTML
• CSS
• JavaScript / ES6
• TypeScript

ما هو Angular؟

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

ما هو الإطار البرمجي (Framework)؟

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

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

AngularJS مقابل Angular

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

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

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

ما هو Angular CLI؟

يشير اختصار CLI إلى Command Line Interface، أي واجهة سطر الأوامر. يمتلك Angular واجهة سطر أوامر رسمية خاصة به تساعدنا في العديد من المهام أثناء عملية التطوير. تُستخدم Angular CLI لأتمتة العمليات في مشاريع Angular بدلاً من القيام بها يدويًا. تدعم CLI المطورين في مشروع Angular من البداية إلى النهاية. على سبيل المثال، يمكن استخدام Angular CLI من أجل:

• تكوينات المشروع (Configurations) وإعداد البيئة (Environment Setup).
• بناء المكونات (components)، الخدمات (services)، ونظام التوجيه (routing system).
• بدء (Starting)، اختبار (testing)، ونشر (deploying) المشروع.
• تثبيت المكتبات الخارجية (3rd party libraries) مثل Bootstrap و Sass، وغير ذلك الكثير.

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

خطوات تثبيت أول تطبيق Angular لك

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

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

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

إذا كان لديك Node.js مثبتًا، فإن الخطوة التالية هي تثبيت Angular CLI نفسه على جهاز الكمبيوتر الخاص بك. افتح سطر الأوامر أو الطرفية (terminal) ونفذ الأمر التالي:

npm install -g @angular/cli

يشير الحرف g- إلى التثبيت العام (global installation). إذا استخدمت 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

تفتح علامة open-- نافذة متصفحك المحلي تلقائيًا. يدعم Angular خادمًا مباشرًا (live server)، لذا يمكنك رؤية التغييرات في بيئتك المحلية دون الحاجة إلى تحديث صفحة المتصفح. لمزيد من التفاصيل والتحديثات، يمكنك مراجعة الوثائق الرسمية.

الخاتمة

في هذا الجزء الأول، قدمنا مقدمة شاملة عن Angular، وشرحنا ماهية CLI، وكيفية تثبيت أول تطبيق Angular لك بنجاح. في المقال القادم، ستتعرف على مكونات Angular (Angular Components) واستيفاء السلاسل النصية (String Interpolation). ترقبوا المزيد!

الخلاصة التقنية

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