ما هي Angular؟

سيساعدك هذا المقال على فهم إطار العمل Angular -والذي ينطق أنجولار- كما سيجاوب على الأسئلة التالية: ما هي منصة Angular؟ وما هي الميزات التي تقدمها؟ وما الذي تأمل أن تبنيه عندما تبدأ بناء تطبيقاتك باستخدام Angular؟

تُعَدّ Angular منصة تطوير مبنية على لغة TypeScript وتتضمن ما يلي:

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

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

اقتباس

يمكنك الاطلاع على المثال في بيئة تجريبية/ أو تنزيله لتحصل على شيفرة تعمل وتحوي جميع مقتطفات الشيفرة الموجودة ضمن هذا المقال.

تطبيقات Angular: الأساسيات

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

المكونات

تُعَدّ المكوِّنات أحجار البناء الأساسية التي تكوِّن التطبيق، فيحتوي المكوِّن على صنف TypeScript مع مزخرِف ‎@Component()‎ وقالب HTML وملف التنسيقات، حيث يعرِّف مزخرِف ‎@Component()‎ المعلومات التالية في Angular:

• محدِّد CSS الذي يعرِّف الطريقة التي سيُستخدَم بها المكوِّن ضمن قالب ما، حيث تصبح عناصر HTML التي تستخدمها ضمن القالب الخاص بك والتي تطابق هذا المحدِّد نسخةً من هذا المكوِّن.
• قالب HTML الذي يوجّه Angular إلى كيفية إخراج هذا المكوِّن.
• مجموعة اختيارية من تنسيقات CSS التي تعرِّف المظهر الخاص بعناصر قالب HTML.

يُعَدّ الكود التالي أبسط صورة لمكوِّن Angular:

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

@Component({
  selector: 'hello-world',
  template: `
    <h2>Hello World</h2>
    <p>This is my first component!</p>
    `
})
export class HelloWorldComponent {
  // تقود الشيفرة الموجودة في هذا الصنف السلوك الخاص بالمكوِّن
}

يجب كتابة الشيفرة التالية ضمن قالب HTML الخاص بك من أجل استخدام هذا المكوِّن:

<hello-world></hello-world>

سيكون ناتج شجرة DOM عندما يقوم Angular بإخراج هذا المكوِّن وتصييره على الصورة التالية:

<hello-world>
    <h2>Hello World</h2>
    <p>This is my first component!</p>
</hello-world>

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

القوالب

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

<p>{{ message }}</p>

تأتي القيمة المرتبطة بالرسالة عن طريق صنف المكوِّن:

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

@Component ({
  selector: 'hello-world-interpolation',
  templateUrl: './hello-world-interpolation.component.html'
})
export class HelloWorldInterpolationComponent {
    message = 'Hello, World!';
}

تكون النتيجة التي يراها المستخدِم عندما يحمِّل التطبيق المكوِّن وقالبه كما يلي:

<p>Hello, World!</p>

يُخبر استخدام الأقواس المعقوصة بأنه يجب على Angular استبدال القيمة الموجودة ضمنها بالقيمة المقابلة لها والموجودة ضمن صنف المكوِّن، كما يدعم Angular عملية التربيط بين الخاصيات property bindings من أجل مساعدتك على ضبط القيم لكل من الخصائص والسمات لعناصر HTML وتمرير هذه القيم إلى قسم العرض الخاص بتطبيقك.

<p [id]="sayHelloId" [style.color]="fontColor">You can set my color in the component!</p>

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

<button (click)="sayMessage()" [disabled]="canClick">Trigger alert message</button>

يستدعي المثال السابق تابعًا والذي عُرِّف ضمن صنف المكوِّن:

sayMessage() {
    alert(this.message);
}

يُعَدّ المثال التالي مثالًا شاملًا لتوضيح كل من عمليات التبديل والتربيط بين الخاصيات والتربيط مع الحدث ضمن قالب Angular:

• الملف hello-world-bindings.component.ts:

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

@Component ({
  selector: 'hello-world-bindings',
  templateUrl: './hello-world-bindings.component.html'
})
export class HelloWorldBindingsComponent {
    fontColor = 'blue';
    sayHelloId = 1;
    canClick = false;
    message = 'Hello, World';
    sayMessage() {
        alert(this.message);
    }
}

• الملف hello-world-bindings.component.html:

<button
  [disabled]="canClick"
  (click)="sayMessage()">
  Trigger alert message
</button>
<p
  [id]="sayHelloId"
  [style.color]="fontColor">
  You can set my color in the component!
</p>
<p>My color is {{ fontColor }}</p>

أضف وظائف أخرى إلى القوالب الخاصة بك من خلال استخدام الموجِّهات directives، وأكثر الموجِّهات شهرةً في Angular هي الموجه ‎*ngIf والموجه ‎*ngFor، حيث تستطيع الموجّهات أداء العديد من المهام المتنوعة مثل تعديل البنية الخاصة بشجرة DOM بصورة آلية وإنشاء الموجِّه الخاص بك من أجل خلق تجربة مستخدِم جيدة، وتُعَدّ الشيفرة التالية مثالًا عن استخدام الموجِّه ngIf*:

• الملف hello-world-ngif.component.ts:

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

@Component({
    selector: 'hello-world-ngif',
    templateUrl: './hello-world-ngif.component.html'
  })
export class HelloWorldNgIfComponent {
  message = 'I\'m read only!';
  canEdit = false;

  onEditClick() {
    this.canEdit = !this.canEdit;
    if (this.canEdit) {
      this.message = 'You can edit me!';
    } else {
      this.message = 'I\'m read only!';
    }
  }
}

• الملف hello-world-ngif.component.html

<h2>Hello World: ngIf!</h2>
<button (click)="onEditClick()">Make text editable!</button>
<div *ngIf="canEdit; else noEdit">
    <p>You can edit the following paragraph.</p>
</div>
<ng-template #noEdit>
    <p>The following paragraph is read only. Try clicking the button!</p>
</ng-template>
<p [contentEditable]="canEdit">{{ message }}</p>

تسمح لك القوالب التصريحية declarative templates في Angular بفصل منطق التطبيق الخاص بك عن طريقة العرض، كما تستند القوالب إلى لغة HTML القياسية لسهولة البناء والصيانة والتحديث.

حقن التبعية

يتيح لك حقن التبعية Dependency injection تعريف التبعيات الخاصة بأصناف TypeScript الخاصة بك دون الاهتمام باستنساخها، إذ تقوم Angular بعملية الاستنساخ عوضًا عن ذلك، كما يوفِّر لك نمط التصميم بهذه الطريقة إمكانية كتابة شيفرة مرنة وسهلة الاختبار، فعلى الرغم من أن فهم مصطلح حقن التبعية ليس بهذا الأمر الجلل للبدء باستخدام Angular، إلا أننا نوصي به من أجل ممارسة أفضل، كما تستفيد العديد من الجوانب في Angular من ميزاته إلى حد ما، وإليك المثال التالي لتوضيح عملية حقن التبعية، حيث يعرِّف الملف الأول logger.service.ts صنف Logger، إذ يحتوي هذا الصنف على دالة writeCount والتي تطبع عددًا ضمن الطرفية:

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

@Injectable({providedIn: 'root'})
export class Logger {
  writeCount(count: number) {
    console.warn(count);
  }
}

تاليًا، يُعرِّف ملف hello- world- di.component.ts مكوِّن Angular، حيث يحتوي هذا المكوِّن على زر يستخدِم دالة writeCount من صنف Logger، كما حُقِنت خدمة Logger في صنف HelloWorldDI من أجل استخدام هذه الدالة من خلال إضافة private logger: Logger إلى الباني.

import { Component } from '@angular/core';
import { Logger } from '../logger.service';

@Component({
  selector: 'hello-world-di',
  templateUrl: './hello-world-di.component.html'
})
export class HelloWorldDependencyInjectionComponent  {
  count = 0;

  constructor(private logger: Logger) {
  }

  onLogMe() {
    this.logger.writeCount(this.count);
    this.count++;
  }
}

واجهة سطر أوامر Angular

تُعَدّ Angular CLI من أسرع الطرق المباشرة والمحبّذة لبناء تطبيقات Angular، إذ يقلل استخدام Angular CLI من حدوث المشاكل عند تشغيل المهام، وهنا نورد بعض الأمثلة:

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

المكتبات الداخلية

قدَّم قسم "تطبيقات Angular: الأساسيات" في الأعلى لمحةً مختصرةً عن اثنين من العناصر الهرمية الرئيسية التي ستستخدمها عند إنشاء تطبيقات Angular، لكن تصبح الفوائد العديدة لـ Angular أكثر وضوحًا عندما ينمو تطبيقك وتود إضافة وظائف إضافية عليه مثل التنقل في الموقع أو إدخالات المستخدِم، لذا استخدِم منصة Angular لتدمج إحدى مكتبات Angular الداخلية العديدة، وتوجد بعض المكتبات المتاحة لك إضافتها كما يلي:

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

الخطوات التالية

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

ترجمة -وبتصرف- للمقال What is Angular?‎ من موقع angular.io الرسمي.

اقرأ أيضًا

• مدخل إلى تعلم AngularJS
• تعلم البرمجة