التوجيهات (Directives) في AngularJS: البنية التأسيسية لتطوير تطبيقات ديناميكية

AngularJS هو إطار عمل JavaScript مفتوح المصدر تم تطويره بواسطة Google ويهدف إلى تسهيل تطوير تطبيقات الويب الديناميكية. من أبرز مكوناته الأساسية التي تميز بنيته عن غيرها من الأطر هي “التوجيهات” (Directives). تُعد التوجيهات من الأدوات القوية التي تقدمها AngularJS لبناء واجهات مستخدم تفاعلية وقابلة لإعادة الاستخدام، حيث تسمح للمطورين بتوسيع لغة HTML بإضافة عناصر وسلوكيات مخصصة.

مفهوم التوجيهات (Directives)

التوجيهات في AngularJS هي سمات (Attributes) أو عناصر (Elements) تُستخدم لتعليم المتصفح بتنفيذ سلوك معين أو لربط DOM بسلوك معين في التطبيق. بعبارات أكثر دقة، فإن التوجيهات عبارة عن تعليمات مخصصة لـ AngularJS يتم إدخالها في عناصر HTML لإجراء عمليات مثل التكرار، الربط بالبيانات، التعامل مع الأحداث، أو حتى إنشاء مكونات UI جديدة.

أنواع التوجيهات الأساسية في AngularJS

توجد أنواع متعددة من التوجيهات في AngularJS، والتي يمكن تصنيفها إلى الفئات التالية:

1. التوجيهات المدمجة (Built-in Directives)

AngularJS يأتي مزودًا بمجموعة من التوجيهات الجاهزة التي تُستخدم بشكل شائع في بناء التطبيقات. من بين هذه التوجيهات:

ng-bind

يُستخدم لربط البيانات بين النموذج (Model) والعرض (View)، بحيث يتم عرض قيمة المتغير مباشرة داخل العنصر دون الحاجة إلى استخدام الأقواس المزدوجة {{}}.

html
CopyEdit
<span ng-bind="message">span>

ng-model

يُستخدم لربط عناصر النموذج (مثل مدخلات النصوص) مع متغيرات في النموذج.

html
CopyEdit
<input type="text" ng-model="username">

ng-repeat

يُستخدم لتكرار عنصر معين بعدد عناصر مجموعة بيانات.

html
CopyEdit
<ul>
  <li ng-repeat="item in items">{{ item }}li>
ul>

ng-if

يُستخدم لإظهار أو إخفاء عنصر DOM بناءً على شرط معين.

html
CopyEdit
<div ng-if="isVisible">هذا العنصر مرئيdiv>

ng-show / ng-hide

تُستخدم لإظهار أو إخفاء عنصر DOM عن طريق التلاعب بالـ CSS بدلًا من حذفه من DOM.

html
CopyEdit
<p ng-show="isVisible">مرئي فقط عند تحقق الشرطp>

ng-click

يُستخدم لمعالجة أحداث النقر.

html
CopyEdit
<button ng-click="doSomething()">انقر هناbutton>

2. التوجيهات المخصصة (Custom Directives)

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

يُنشأ التوجيه المخصص باستخدام directive داخل وحدة AngularJS على الشكل التالي:

javascript
CopyEdit
app.directive('myDirective', function() {
  return {
    restrict: 'E',
    template: '
محتوى التوجيه المخصص
'
  };
});

ثم يُستخدم في HTML كما يلي:

html
CopyEdit
<my-directive>my-directive>

خصائص إنشاء التوجيهات المخصصة

عند إنشاء توجيه مخصص، هناك عدد من الخصائص التي يمكن استخدامها لتعريف كيفية تفاعله مع DOM وسلوكه العام:

نطاق التوجيهات (Directive Scope)

تتعامل التوجيهات في AngularJS مع النطاق (Scope) من خلال ثلاثة أنواع رئيسية:

1. النطاق المشترك (Shared Scope): التوجيه يستخدم نفس النطاق الخاص بالمجال الأب.

2. نطاق جديد (New Scope): يتم إنشاء نسخة جديدة من النطاق الذي يرث من النطاق الأب.

3. النطاق المعزول (Isolated Scope): يُستخدم عندما نريد أن يكون للتوجيه مجال خاص ومستقل، ويكون أكثر أمانًا ومرونة عند إنشاء مكونات قابلة لإعادة الاستخدام.

مثال على نطاق معزول:

javascript
CopyEdit
app.directive('userProfile', function() {
  return {
    restrict: 'E',
    scope: {
      user: '='
    },
    template: '
{{ user.name }}
'
  };
});

الفرق بين link و controller في التوجيهات

• link: يُستخدم للوصول إلى عناصر DOM والتلاعب بها. يتم تنفيذه بعد أن يتم تجميع عناصر DOM.

• controller: يُستخدم لإدارة منطق العمل والوظائف الداخلية للتوجيه. يمكن مشاركة منطق التحكم مع توجيهات أخرى باستخدام require.

مثال:

javascript
CopyEdit
app.directive('myDirective', function() {
  return {
    restrict: 'A',
    controller: function($scope) {
      $scope.message = 'مرحبًا';
    },
    link: function(scope, element, attrs) {
      element.on('click', function() {
        alert(scope.message);
      });
    }
  };
});

النقل (Transclusion)

التوجيهات التي تستخدم transclude تسمح للمطور بنقل محتوى من مكان الاستدعاء إلى داخل قالب التوجيه.

مثال:

javascript
CopyEdit
app.directive('panel', function() {
  return {
    restrict: 'E',
    transclude: true,
    template: '
'
  };
});

ثم في HTML:

html
CopyEdit
<panel>
  <p>هذا المحتوى سيتم نقله داخل القالبp>
panel>

الاستخدامات المتقدمة للتوجيهات

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

مثال على توجيه مخصص لعنصر تحكم إدخال:

javascript
CopyEdit
app.directive('customInput', function() {
  return {
    restrict: 'E',
    scope: {
      model: '='
    },
    template: ''
  };
});

المقارنة بين التوجيهات والعناصر المكونة (Components)

مع تطور Angular إلى Angular 2 وما بعده، تم تقديم مفهوم المكونات (Components) الذي يشبه التوجيهات المعزولة. في AngularJS، يمكن اعتبار التوجيهات المعزولة ذات template و controller كمعادل للمكونات في Angular 2+.

جدول موجز لأشهر توجيهات AngularJS واستخدامها

أهمية التوجيهات في بناء تطبيقات AngularJS

التوجيهات تمنح AngularJS القدرة على توسيع لغة HTML، مما يجعلها مناسبة لبناء تطبيقات قوية ومنظمة. بفضل التوجيهات، يصبح من الممكن:

• إعادة استخدام العناصر والسلوكيات.

• تقليل التكرار في الكود.

• تعزيز الفصل بين واجهة المستخدم والمنطق البرمجي.

• تحسين إمكانية صيانة الكود مع نمو التطبيق.

التحديات المرتبطة باستخدام التوجيهات

رغم قوتها، إلا أن التوجيهات في AngularJS قد تطرح بعض التحديات، خصوصًا للمطورين الجدد:

• فهم آلية عمل scope وكيفية التفاعل بين النطاقات المختلفة.

• استخدام link وcontroller بطريقة صحيحة لتجنب التعقيد الزائد.

• إدارة الأداء عند استخدام ng-repeat أو التوجيهات الثقيلة.

• التناسق في التسمية واستعمال التوجيهات المخصصة بشكل منظم.

المصادر والمراجع

1. AngularJS Official Documentation – Directives

2. Todd Motto – AngularJS Best Practices