Skip to content

مدخل إلى المكونات في إطار العمل أنجولار (Angular)

مدخل إلى المكونات في إطار العمل أنجولار (Angular)

11 فبراير 2018 | 00:00

يعتبر أنجولار من بين أشهر إطارات عمل الجافاسكريبت في السوق حاليا. كانت بداياته في عام 2009 مع إصدار AngularJs 1.x، وبعد سنوات عديدة من النجاح والهيمنة، رأى مطورو شركة غوغل القائمين عليه بأنه قد حان الوقت للإنتقال لمستويات أخرى لضمان الحفاظ على حصة Angular في السوق ومنافسة عدد من اللاعبين الذي دخلوا بقوة في هذه الصناعة، نخص منهم بالذكر React.js التابع لشركة فيسبوك.

إحدى أهم النقاط التي جذبت اهتمام المطورين ل React.js هو اعتمادها منذ البداية على مفهوم **المكونات **أو Components في إنشاء تطبيقات ويب أحادية الصفحة، وقد بدا واضحا للجميع أن هذه هي الموضة القادمة التي ستسيطر على عالم إطارات عمل الجافاسكريبت.

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

بعد ذلك، خرجت إلى النور إصدارات عديدة، كان آخرها Angular 5، ولكنها لم تحمل معها أي تغييرات جذرية، بل فقط تحسينات جديدة وتصحيح للأخطاء (Bugs) التي ظهرت في النسخ السابقة. لهذا عندما نقرأ Angular فإنها تعني جميع الإصدارات منذ Angular 2 حتى الآن.

ما هو المكون في أنجولار ؟

المكونات هي اللبنات الأساسية في واجهات المستخدم لتطبيقات أنجولار. كل تطبيق أنجولار هو عبارة عن شجرة من المكونات.

وإذا أردتم تعريفا أدق، فلن نجد أفضل من التوثيق الرسمي لأنجولار الذي يقول :

Components are the most basic building block of an UI in an Angular application. An Angular application is a tree of Angular components. Angular components are a subset of directives. Unlike directives, components always have a template and only one component can be instantiated per an element in a template.

A component must belong to an NgModule in order for it to be usable by another component or application. To specify that a component is a member of an NgModule, you should list it in the declarations field of that NgModule.

فوائد الإعتماد على مقاربة المكونات في تطبيقات الويب

هناك عدد كبير من الفوائد التي نجنيها من الإعتماد على مقاربة المكونات في تصميم وتطوير تطبيقات الويب الحديثة، منها على سبيل المثال :

أفضل وسيلة للفهم هي التطبيق :)

لكي نفهم جيدا ما هي المكونات في إطار العمل أنجولار، سنقوم بإنشاء تطبيق بسيط يقوم بحساب مجموع عددين.

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

npm install -g @angular/cli

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

ng new calculator

calculator هو اسم المجلد الرئيسي للمشروع، وسنقوم بالدخول إليه، بعد انتهاء عملية الإعداد التي بدأناها بواسطة ng new، ثم نقوم بتنفيذ الأمر ng serve من أجل بدء تشغيل التطبيق على الخادم المحلي :

cd calculator
ng serve

قم بفتح الرابط http://localhost:4200/ على المتصفح، وستجد نفسك أمام الصفحة الرئسية للتطبيق الإفتراضي الذي تم إنشاؤه بواسطة ng new.

Angular app default homepage

بنية تطبيق أنجولار

لنقم بفتح المشروع (المجلد calculator) على المحرر، ونلاحظ بنية المجلدات المكونة لمشروعنا الذي قمنا بتوليده:

بنية تطبيق أنغولار

كل تطبيق أنغولار يتكون من وحدة (Module) واحدة على الأقل، وما يهمنا في البنية في الصورة أعلاه هو الملف app.module.ts. هذا الملف هو المكان الذي نقوم فيه بالتصريح بالوحدة الخاصة بتطبيقنا مع كافة الملحقات اللازمة لها، ومنها على سبيل المثال المكون AppComponent الذي يتم التصريح به على أنه المكون الإفتراضي لهذه الوحدة عن طريق الخاصية bootstrap وهو الذي يتم عرضه أولا على صفحة index.html الرئيسية للتطبيق*.* أما الخاصية declarations فتمثل المصفوفة التي تضم كافة المكونات التي تتبع لهذه الوحدة.

في الوقت الحالي، لدينا في التطبيق مكون واحد فقط وهو AppComponent المعرف داخل الملف app.component.ts. ستلاحظون عند فتح هذا الملف أنه يتم تعريف المكون باستخدام ما يعرف في الجافاسكريبت الحديثة بالمصمم أو decorator. اسم المصمم الذي يستخدم في هذه الحالة هو Component@، بداخله توجد العديد من المعلومات الخاصة بهذا المكون مثل :

[alert type=“info” icon-size=“normal”]ميزة المصممات (Decorators) مازالت قيد التجربة في لغة البرمجة جافاسكريبت وليست مدعومة بعد في الوقت الحالي. وإنما يتم استخدامها في أنجولار لأن الأخير يعتمد على لغة TypeScript في كتابة أكواد جافاسكريبت متقدمة وتحويلها بعد ذلك في مرحلة Transpiling لأكواد جافاسكريبت اعتيادية تفهمها المتصفحات. لذلك نرى أن امتداد الملفات في المشروع هو ts. وليس js. كما جرت العادة في كتابة أكواد جافاسكريبت. [/alert]

إنشاء مكوننا الخاص لحساب جمع عددين

يمكننا التعديل على المكون الإفتراضي AppComponent وجعله يقوم بحساب مجموع العددين، ولكن من أجل الغرض التعليمي لهذا الدرس سنقوم بإنشاء مكون جديد نسميه Calculator.

أولا، لننشئ مجلد جديد اسمه calculator في المسار src/app وندخل إليه انطلاقا من نافذة الأوامر السطرية، ثم نقوم بتنفيذ الأمر التالي من أجل توليد المكون الجديد :

ng generate component calculator

بعد إنتهاء العملية، سنلاحظ أنه تم توليد أربع ملفات داخل المجلد src/app/calculator مع تحديث الملف app.module.ts الذي تكلمنا عليه في السابق.

توليد المكون في تطبيق أنجولار

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
 
import { AppComponent } from "./app.component";
import { CalculatorComponent } from "./calculator/calculator.component";
 
@NgModule({
  declarations: [AppComponent, CalculatorComponent],
  imports: [BrowserModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

محتوى ملف calculator.component.ts هو على الشكل الآتي:

import { Component, OnInit } from "@angular/core";
 
@Component({
  selector: "app-calculator",
  templateUrl: "./calculator.component.html",
  styleUrls: ["./calculator.component.css"],
})
export class CalculatorComponent implements OnInit {
  constructor() {}
 
  ngOnInit() {}
}

لاحظوا الخاصيات (تعرف ب Metadatas) بداخل المصمم Component@ التي تكلمنا عليها في السابق، وتحديدا selector الذي نستخدمه من أجل استدعاء المكون في القوالب الخارجية. وبما أن المكون الرئيسي لتطبيقنا هو AppComponent، فإننا سنقوم بفتح القالب الخاص به app.component.html ونضيف إليه المكون CalculatorComponent بهذا الطريقة :

<div style="text-align:center">
  <app-calculator></app-calculator>
</div>

يمكننا بطبيعة الحال تغيير اسم المحدد app-calculator ونضع الإسم الذي يناسبنا.

والآن بالعودة إلى المتصفح سنرى في الصفحة الرئيسية هذه الرسالة :

Calculator Works!

وهي الرسالة التي نجدها في القالب calculator.component.html الخاص بالمكون CalculatorComponent.

حتى لا تضطر لإعادة تنفيذ الأمر ng serve بعد كل عملية تعديل على الملفات، استخدم بدلا عنه ng serve --watch الذي يقوم بإعادة جمع الأكواد البرمجية (Bundling) بعد كل عملية حفظ وبعدها إعادة تحميل المتصفح آليا.

إذن ما يجب علينا فعله الآن، هو التعديل على هذا القالب وتعويضه بما يمكننا من حساب مجموع عددين. سنضع قالبا بسيطا لهذا الغرض، عبارة عن حقلين من نوع number لإدخال قيمة العددين وزر يقوم بحساب المجموع عند النقر عليه.

<h1>Calculator Component</h1>
<input [(ngModel)]="number1" type="number" name="" placeholder="العدد الأول" />
<input [(ngModel)]="number2" type="number" name="" placeholder="العدد الثاني" />
<button>حساب الجمع</button>

يمكنكم تحسين الشكل والتصميم بإضافة بعض من CSS في ملف calculator.component.css.

الخاصية [(ngModel)] تمكننا من ربط الحقلين بالمنطق الموجود داخل الملف calculator.component.ts والعكس صحيح، هذا ما يعرف ب Two-way data binding وقد تطرقنا إليه في مقال سابق. بغير هذه الخاصية لن نتمكن من الوصول لقيمة الحقلين انطلاقا من الكلاس CalculatorComponent.

حتى نقوم باستخدام [(ngModel)] يجب استيراد وحدة خاصة اسمها FormsModule في ملف app.mdoule.ts وإضافتها للخاصية imports داخل المصمم NgModule@ :

import { BrowserModule } from "@angular/platform-browser";
import { NgModule } from "@angular/core";
import { FormsModule } from "@angular/forms";
 
import { AppComponent } from "./app.component";
import { CalculatorComponent } from "./calculator/calculator.component";
 
@NgModule({
  declarations: [AppComponent, CalculatorComponent],
  imports: [BrowserModule, FormsModule],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

الخطوة القادمة هي أن نقوم بتعريف المتغيرين number1 و number2 في الكلاس CalculatorComponent حتى يتم استقبال قيمة الحقلين فيهما. وإضافة إليهما، نقوم بالتصريح كذلك بمتغير ثالث اسمه *result *لاستخدامه لاحقا في عرض النتيجة.

import { Component, OnInit } from "@angular/core";
 
@Component({
  selector: "app-calculator",
  templateUrl: "./calculator.component.html",
  styleUrls: ["./calculator.component.css"],
})
export class CalculatorComponent implements OnInit {
  public number1: number;
  public number2: number;
  public result: number;
  constructor() {}
 
  ngOnInit() {}
}

من مزايا TypeScript أنه يمكننا من تحديد نوع المتغيرات، وهي number في هذه الحالة بالنسبة للثلاثة.

الآن سنضيف إلى الكلاس دالة جديدة اسمها add()  على سبيل المثال، بداخلها سنقوم بحساب المجموع وإعطائه للمتغير result.

import { Component, OnInit } from "@angular/core";
 
@Component({
  selector: "app-calculator",
  templateUrl: "./calculator.component.html",
  styleUrls: ["./calculator.component.css"],
})
export class CalculatorComponent implements OnInit {
  public number1: number;
  public number2: number;
  public result: number;
 
  constructor() {}
 
  ngOnInit() {}
 
  public add() {
    this.result = this.number1 + this.number2;
  }
}

لم يتبقى لنا الآن سوى استدعاء هذه الدالة عند النقر على الزر button في قالب HTML الخاص بالمكون.

لنفتح ملف calculator.component.html ونقوم بذلك :

<h1>Calculator Component</h1>
<input [(ngModel)]="number1" type="number" name="" placeholder="العدد الأول" />
<input [(ngModel)]="number2" type="number" name="" placeholder="العدد الثاني" />
 
<button (click)="add()">حساب الجمع</button>
 
<h2>النتيجة : {{result}}</h2>

لاحظوا بأننا استخدمنا الخاصية (click) للإستماع لحدث النقر على الزر button وعند وقوع الحدث نقوم بتنفيذ الدالة add().

وكما ترون، أضفنا كذلك العنصر <h2> لعرض المجموع باستخدام التعبير {{result}} ، وهو ما يعني قيمة المتغير result الذي عرفناه بداخل الكلاس CalculatorComponent.

تطبيق أنجولار

النهاية

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

هذا وسأسعد كثيرا بالرد على جميع استفساراتكم حول الدرس في صندوق التعليقات.

أوقاتا ممتعة مع أنجولار :)

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