تعلم تطوير الويب البدء باستخدام إطار عمل Angular

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

• المتطلبات الأساسية: يوصَى على الأقل بأن تكون على دراية بأساسيات لغات HTML وCSS وجافاسكربت JavaScript، ومعرفة باستخدام سطر الأوامر أو الطرفية.
• الهدف: إعداد بيئة تطوير Angular محلية وإنشاء تطبيق البداية وفهم أساسيات كيفية عمله.

ما هو إطار Angular؟

يُعَدّ إطار عمل Angular منصة تطوير مبنية على لغة TypeScript، ويشمل Angular بوصفه منصةً ما يلي:

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

إذا أنشأت تطبيقات باستخدام إطار عمل Angular، فستستفيد من المنصة التي يمكنها التوسع من مشاريع مطور واحد إلى تطبيقات على مستوى المؤسسة، وقد صُمِّم إطار عمل Angular لتسهيل عملية التحديث قدر الإمكان، بحيث يمكنك الاستفادة من أحدث التطورات بأقل جهد ممكن، وأفضل ما في الأمر هو أنّ نظام Angular البيئي يتكون من مجموعة متنوعة تضم أكثر من 1.7 مليون مطور ومؤلف مكتبات ومنشئ محتوى.

يجب أن تكون على دراية بواجهة CLI الخاصة بإطار عمل Angular قبل أن تبدأ في استكشاف منصة Angular، إذ تُعَدّ Angular CLI الطريقة الأسرع والأسهل والموصَى بها لتطوير تطبيقات Angular، وتسهّل عددًا من المهام، وإليك بعض الأمثلة عن هذه الأوامر:

• ‎ng build: يصرّف تطبيق Angular في مجلد الخرج.
• ‎ng serve: يبني تطبيقك ويشغّله ويعيد بناءه عند حدوث تغييرات في الملف.
• ‎ng generate: يولّد أو يعدّل الملفات على أساس تخطيطي.
• ‎ng test: يشغّل اختبارات الوحدة على مشروع معيّن.
• ‎ng e2e: يبني تطبيق Angular ويشغّله ثم يجري اختبارات شاملة.

ستجد أنّ واجهة سطر الأوامر CLI في Angular أداة قيّمة لبناء تطبيقاتك.

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

المتطلبات المسبقة

تحتاج إلى ما يلي لتثبيت Angular على نظامك المحلي:

• بيئة Node.js الخاصة بإطار عمل Angular التي تتطلب الإصدار الحالي أو الإصدار النشط للدعم طويل الأمد LTS أو إصدار الصيانة للدعم طويل الأمد من Node.js، ويمكنك الحصول على معلومات حول متطلبات الإصدار المحددة من خلال الاطلاع مفتاح engines في الملف package.json، كما يمكنك الحصول على مزيد من المعلومات حول تثبيت Node.js من خلال زيارة موقع nodejs.org، فإذا لم تكن متأكدًا من إصدار Node.js الذي يعمل على نظامك، فشغّل الأمر node -v في نافذة الطرفية.
• يعتمد مدير الحزم npm الخاص بإطار Angular وواجهة Angular CLI وتطبيقات Angular على حزم npm في العديد من الميزات والدوال، ويمكنك تنزيل حزم npm وتثبيتها باستخدام مدير حزم npm، كما سنستخدِم في هذا المقال واجهة سطر أوامر العميل في npm التي تُثبَّت افتراضيًا مع Node.js، وشغّل الأمر node -v في نافذة الطرفية للتحقق من تثبيت عميل npm.

إعداد التطبيق

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

npm install -g @angular/cli

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

ng new todo --routing=false --style=css

ينشئ الأمر ng new تطبيق Angular صغير على سطح المكتب، إذ تحدد الرايات الإضافية ‎--routing و ‎--style كيفية التعامل مع التنقل والتنسيقات في التطبيق، وسنشرح هذه الميزات بمزيد من التفصيل لاحقًا، فإذا ظهرت رسالة تطالبك بفرض فحص أنواع أكثر صرامة، فيمكنك الرد بنعم.

انتقل إلى مشروعك الجديد باستخدام أمر cd التالي:

cd todo

استخدم الأمر التالي لتشغيل التطبيق todo:

ng serve

إذا أظهرت واجهة CLI رسالةً تطالبك بالتحليلات، فأجب بلا.

انتقل إلى المضيف المحلي http://localhost:4200/‎ في متصفحك لرؤية تطبيق البدء الجديد، فإذا عدّلتَ أيًا من ملفات المصدر، فسيُعاد تحميل التطبيق تلقائيًا.

يمكن أن ترغب في فتح تبويب أو نافذة طرفية ثانية لتشغيل الأوامر أثناء تشغيل الأمر ng serve، فإذا أردت في أيّ وقت التوقف عن تشغيل تطبيقك، فاضغط على الاختصار Ctrl+c في الطرفية.

تعرف على تطبيق Angular

توجد ملفات التطبيق التي سنركّز عليها في هذا المقال في المجلد src/app، إذ تتضمن الملفات الأساسية التي تنشئها واجهة CLI تلقائيًا ما يلي:

1. app.module.ts: يحدّد الملفات التي يستخدمها التطبيق، ويعمل هذا الملف على أساس موزّع مركزي للملفات الأخرى في تطبيقك.
2. app.component.ts: المعروف بوصفه صنفًا، ويحتوي على شيفرة صفحة التطبيق الرئيسية.
3. app.component.html: يحتوي على شيفرة HTML الخاصة بالمكوِّن AppComponent، وتُعرَف محتويات هذا الملف بوصفها قالبًا، إذ يحدد القالب العرض أو ما تراه في المتصفح.
4. app.component.css: يحتوي على تنسيق المكوِّن AppComponent، إذ يمكنك استخدام هذا الملف عندما تريد تعريف التنسيق الذي ينطبق على مكوِّن معيّن فقط وليس على تطبيقك الكامل.

يتكون المكوِّن في إطار عمل Angular من ثلاثة أجزاء رئيسية هي القالب والتنسيق والصنف، إذ تشكّل جميع الملفات app.component.ts و app.component.html و app.component.css مثلًا المكوِّن AppComponent، كما تفصل هذه البنية بين الشيفرة البرمجية والعرض والتنسيق بحيث يكون التطبيق أكثر قابلية للصيانة والتوسع، وبالتالي ستستخدِم أفضل الممارسات منذ البداية باستخدام هذه الطريقة.

كما تنشئ واجهة Angular CLI ملفًا لاختبار المكوِّن بالاسم app.component.spec.ts، ولكننا لن نتطرق للاختبار، لذا يمكنك تجاهل هذا الملف.

تنشئ واجهة CLI هذه الملفات الأربعة في مجلد بالاسم الذي تحدده عندما تنشئ مكوِّنًا.

بنية تطبيق Angular

إطار عمل Angular مبني باستخدام لغة TypeScript والتي تُعَدّ مشتقة من لغة جافاسكربت ومُوسِّعة لها، مما يعني أنّ أيّ شيفرة جافاسكربت صالحة هي شيفرة TypeScript صالحة، كما توفر لغة TypeScript أنواعًا وصيغةً أكثر إيجازًا من التي توفرها لغة جافاسكربت، مما يمنحك أداةً لإنشاء شيفرة برمجية أكثر قابليةً للصيانة مع أخطاء أقل.

تُعَدّ المكونات اللبنات الأساسية لتطبيق Angular، إذ يشتمل المكوِّن على صنف TypeScript الذي يحتوي على عنصر التصميم ‎@Component()‎ الذي يحدد البيانات الوصفية له مثل قالب HTML وملف التنسيق.

الصنف

يُعَدّ الصنف المكان الذي تضع فيه أيّ شيفرة برمجية أو منطقًا يحتاجه المكوِّن، ويمكن أن تتضمن هذه الشيفرة دوالًا ومستمعي أحداث وخاصيات ومراجع للخدمات على سبيل المثال. يوجد الصنف في ملف باسم مثل الاسم feature.component.ts، حيث feature هو اسم مكونك، لذا يمكن أن يكون لديك ملفات بأسماء مثل header.component.ts أو signup.component.ts أو feed.component.ts، ويمكنك إنشاء مكوِّن باستخدام عنصر التصميم ‎@Component()‎ الذي يحتوي على بيانات وصفية تخبر إطار Angular بمكان العثور على ملفات HTML وCSS.

إليك المكوِّن التالي:

import { Component } from '@angular/core';

@Component({
  selector: 'app-item',
    // تحدّد البيانات الوصفية التالية موقع الأجزاء الأخرى من المكون
  templateUrl: './item.component.html',
  styleUrls: ['./item.component.css']
})

export class ItemComponent {
// ضع شيفرتك البرمجية هنا
}

يسمى هذا المكوِّن بالاسم ItemComponent ومحدّده selector بالاسم app-item، إذ يمكنك استخدام المحددات مثل وسوم HTML العادية من خلال وضعها ضمن قوالب أخرى، ويصيّر Render المتصفحُ قالب ذلك المكوِّن عندما يكون المحدِّد ضمن قالب، كما سنرشدك في المقالات اللاحقة لإنشاء مكوِّنين واستخدام أحدهما ضمن الآخر.

ملاحظة: لاحظ أن اسم المكون في الأعلى ItemComponent هو نفسه اسم الصنف فما السبب؟ ببساطة الاسمان متماثلان لأن المكون ما هو إلا صنف يصفه المزخرف ‎@Component. يوفر نموذج مكونات Angular تغليفًا قويًا وبنية تطبيق سهلة الاستخدام، وتعمل المكونات على تسهيل اختبار الوحدة الخاصة بتطبيقك ويمكنها تحسين قابلية قراءة شيفرتك البرمجية الكلية.

قالب HTML

يحتوي كل مكوِّن على قالب HTML يوضح كيفية تصيير هذا المكوِّن، ويمكنك تعريف هذا القالب إما بطريقة مضمَّنة أو باستخدام مسار ملف.

استخدم الخاصية templateUrl للإشارة إلى ملف HTML خارجي كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})

export class AppComponent {
}

استخدم الخاصية template واكتب شيفرة HTML بين فواصل عليا مائلة Backticks لكتابة شيفرة HTML مضمّنة كما يلي:

@Component({
  selector: 'app-root',
  template: `<h1>Hi!</h1>`,
})

export class AppComponent {
}

يوسّع إطار عمل Angular لغة HTML باستخدام صيغة إضافية تتيح إدراج قيم ديناميكية من مكونك، كما يحدّث تلقائيًا نموذج DOM المصيَّر عندما تتغير حالة المكون، وأحد استخدامات هذه الميزة هو إدراج نص ديناميكي كما هو موضح في المثال التالي:

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

توجّه الأقواس المزدوجة المعقوصة إطار عمل Angular لإدخال المحتويات ضمنها، وتأتي قيمة title من صنف المكوِّن:

import { Component } from '@angular/core';

@Component ({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {
    title = 'To do application';
}

يرى المتصفح ما يلي عندما يحمّل التطبيقُ المكوِّنَ وقالبه:

<h1>To do application</h1>

التنسيق

يمكن للمكوِّن أن يرث التنسيق العام من الملف styles.css الخاص بالتطبيق ثم يعدّل أو يعيد كتابته باستخدام تنسيقه الخاص، ويمكنك كتابة تنسيق خاص بالمكوِّن مباشرةً في عنصر التصميم ‎@Component()‎ أو تحديد المسار إلى ملف CSS.

استخدِم الخاصية styles لتضمين التنسيق مباشرةً في عنصر التصميم كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styles: ['h1 { color: red; }']
})

يستخدِم المكوِّن عادةً تنسيقًا موجودًا ضمن ملف منفصل باستخدام الخاصية styleUrls كما يلي:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

يمكنك تنظيم ملف CSS بحيث يسهل صيانته ونقله باستخدام التنسيق الخاص بالمكونات.

الخلاصة

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

ترجمة -وبتصرُّف- للمقال Getting started with Angular.

اقرأ أيضًا

• مبادئ AngularJS
• مقدمة في بناء تطبيقات الويب باستخدام إطار العمل Angular وقاعدة بيانات Firestore
• بناء مدونة باستخدام إطار العمل Angular وقاعدة بيانات Firestore - إضافة التدوينات وعرضها