تطوير تطبيقات الويب باستخدام Angular


الدرس: هيكلة الوثيقة بالتوجيهات Directives


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

التوجيهات الهيكلية


هذه توجيهات ، كما يوحي اسمها ، تعدل هيكل الوثيقة. في هذا الفصل ، سوف تكتشف اثنين (هناك أخرى)   *ngIf  : لعرض البيانات بشكل مشروط ،   *ngFor  ولتكرار البيانات في صفيف ، على سبيل المثال.
* ngIf
لن    يتم عرض المكون الذي تمت إضافة التوجيه *ngIf="condition" إليه   إلا إذا كان الشرط "صحيحا" (يُرجع القيمة   true  حيث يتم تعريف المتغير المذكور وغير فارغة (null)) ، مثل العبارة   if  الكلاسيكية.
لعرض توضيحي بسيط ، أضف ذات  <div>  لون الأحمر الذي سيظهر فقط إذا تم إيقاف تشغيل الجهاز:

<li class="list-group-item">
  <div style="width:20px;height:20px;background-color:red;" 
       *ngIf="appareilStatus === 'éteint'"></div>
  <h4>Appareil : { { appareilName }} -- Statut : { { getStatus() }}</h4>
  <input type="text" class="form-control" [(ngModel)]="appareilName">
</li>
Angular web site
*ngFor
عند إضافة التوجيه   *ngFor="let obj of myArray"  إلى أحد المكونات ، ستقوم Angular بتكرار الصفيف   myArray  وعرض مكون واحد لكل كائن   obj  . لفهم استخدامه ، أقترح عليك تعديل طريقة إنشاء تطبيقك للأجهزة الكهربائية.
يمكننا أن نتصور أن تطبيقك يسترد ، من خادم ، صفيف يحتوي على جميع الأجهزة وحالاتها. الآن ، قم بإنشاء هذا الصفيف مباشرة في   AppComponent  :

export class AppComponent {
  isAuth = false;

  appareils = [
    {
      name: 'Machine à laver',
      status: 'éteint'
    },
    {
      name: 'Frigo',
      status: 'allumé'
    },
    {
      name: 'Ordinateur',
      status: 'éteint'
    }
  ];

  constructor() {
لديك صفيف بثلاثة كائنات ، ولكل كائن خاصية   name  وخاصية   status  . يمكنك أيضًا إنشاء واجهة أو فئة TypeScript    Appareil  ، ولكن في هذه الحالة البسيطة ، لا يلزم ذلك.
الآن السحر   *ngFor  :

<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <h2>Mes appareils</h2>
      <ul class="list-group">
        <app-appareil  *ngFor="let appareil of appareils"
                       [appareilName]="appareil.name"
                       [appareilStatus]="appareil.status"></app-appareil>
      </ul>
      <button class="btn btn-success"
              [disabled]="!isAuth"
              (click)="onAllumer()">Tout allumer</button>
    </div>
  </div>
</div>
 يتكرر البيان  let appareil of appareils ، كما في الحلقة الكلاسيكية ، لكل عنصر   appareil  (اسم تعسفي) للصفيف   appareils  . بعد هذا التوجيه ، يمكنك الآن استخدام الكائن   appareil ، الذي تعرف شكله ، داخل علامة HTML هذه. يمكنك استخدام الخاصية ملزمة، وقضاء خصائص   name  و   status  الكائن.
لا تنس العلامة النجمية أمام هذه التوجيهات ، مما يدل على Angular لمعاملتها كتوجيهات هيكلية!

التوجيهات حسب السمة


على عكس التوجيهات الهيكلية ، تعدل توجيهات السمات سلوك كائن موجود بالفعل. لقد استخدمت بالفعل توجيهًا من هذا النوع دون معرفته: التوجيه   ngModel  الذي استخدمته للربط ثنائي الاتجاه ، والذي يعدل قيمة   <input>  ويستجيب لأي تغيير يتم إجراؤه عليه. سأعرض لك مثالين آخرين مفيدين للغاية:    ngStyle  و   ngClass ، مما يسمح لك بتعيين الأنماط أو الفئات بشكل ديناميكي.
ngStyle
يسمح لك هذا التوجيه بتطبيق الأنماط على كائن DOM بشكل ديناميكي. تخيل أنه بالنسبة لتطبيق الأجهزة الكهربائية ، فأنت تريد تغيير لون النص اعتمادًا على ما إذا كان الجهاز قيد التشغيل أم لا ، دعنا نقول اللون الأخضر للتشغيل ، والأحمر للإيقاف.   ngStyle  يسمح لك بالقيام بذلك:
الآن السحر   *ngFor  :

<h4 [ngStyle]="{color: getColor()}">Appareil : { { appareilName }} -- Statut : { { getStatus() }}</h4>
ngStyle يأخذ كائن JS من نوع مفتاح-القيمة ، مع النمط الذي يجب تعديله كمفتاح ، وقيمة القيمة المطلوبة لهذا النمط كمفتاح. هنا، يمكنك استخدام وظيفة getColor() في AppareilComponent الذي سيخلق الآن:

getColor() {
    if(this.appareilStatus === 'allumé') {
      return 'green';
    } else if(this.appareilStatus === 'éteint') {
      return 'red';
    }
}
تُرجع هذه الوظيفة القيمة   'green'  إذا كان الجهاز قيد التشغيل ، و  'red'   إذا كان في وضع إيقاف التشغيل ، وبالتالي تغيير لون النص في القالب.
ngClass
بعد تعديل الأنماط مباشرةً ، قد يكون من المفيد جدًا إضافة فئات CSS إلى عنصر ديناميكيًا . مثل   ngStyle ،   ngClass   يأخذ كائن قيمة المفتاح ، ولكن هذه المرة مع الفئة لتطبيق كمفتاح ، والشرط كقيمة.
في هذا المثال ، أقترح عليك تطبيق فئات Bootstrap على العلامة   <li>  اعتمادًا على حالة الجهاز:

<li [ngClass]="{'list-group-item': true,
                'list-group-item-success': appareilStatus === 'allumé',
                'list-group-item-danger': appareilStatus === 'éteint'}">
  <div style="width:20px;height:20px;background-color:red;"
       *ngIf="appareilStatus === 'éteint'"></div>
  <h4 [ngStyle]="{color: getColor()}">Appareil : { { appareilName }} -- Statut : { { getStatus() }}</h4>
  <input type="text" class="form-control" [(ngModel)]="appareilName">
</li>
وبالتالي ستطبق Angular الفئة بشكل منهجي   list-group-item ، واعتمادًا على محتوى المتغير   appareilStatus ، ستطبق واحدة أو أخرى من الفئتين الأخريين. يمكنك بالطبع إنشاء الفئات الخاصة بك واستخدامها ؛ لقد اخترت للتو دروس Bootstrap لتبسيط التفسير.
سواء   ngStyle  أو   ngClass يمكن،لكائنات JS ان تكون متغيرات صالحة في TypeScript  والتي يمكن الرجوع إليها من قبل التوجيه، على سبيل المثال   [ngClass]="myClassObject"  .