AngularJS

AngularJS (المعروف أيضًا باسم Angular 1 ) هو إطار عمل ويب مجاني ومفتوح المصدر قائم على JavaScript، تم إيقاف تطويره، وكان يُستخدم لتطوير تطبيقات الصفحة الواحدة . كانت شركة جوجل ومجتمع من الأفراد والشركات تتولى صيانته بشكل أساسي. كان الهدف منه تبسيط كل من تطوير واختبار هذه التطبيقات من خلال توفير إطار عمل لهياكل MVC و MVVM من جانب العميل، بالإضافة إلى المكونات الشائعة الاستخدام في تطبيقات الويب وتطبيقات الويب التقدمية .

تم استخدام AngularJS كواجهة أمامية لمجموعة MEAN ، والتي تتكون من قاعدة بيانات MongoDB ، وإطار عمل خادم تطبيقات الويب Express.js ، وAngularJS نفسه (أو Angular )، وبيئة تشغيل خادم Node.js.

اعتبارًا من 1 يناير 2022، توقفت جوجل عن تحديث AngularJS لمعالجة مشكلات الأمان، أو توافق المتصفحات، أو jQuery . ^{[ 3 ] [ 4 ] [ 5 ]} يوصي فريق Angular بالترقية إلى Angular (الإصدار 2+) كأفضل خيار، لكنهم قدموا أيضًا بعض الخيارات الأخرى. ^{[ 6 ]}

يعمل إطار عمل AngularJS عن طريق قراءة صفحة لغة ترميز النص التشعبي (HTML) أولاً، والتي تحتوي على سمات HTML مخصصة إضافية مضمنة فيها. يفسر Angular هذه السمات على أنها توجيهات لربط أجزاء الإدخال أو الإخراج من الصفحة بنموذج ممثل بمتغيرات JavaScript قياسية . يمكن تعيين قيم متغيرات JavaScript هذه يدويًا داخل الكود أو استردادها من موارد JSON ثابتة أو ديناميكية.

بُنيَ AngularJS على أساس الاعتقاد بأن البرمجة التصريحية هي الأنسب لإنشاء واجهات المستخدم وربط مكونات البرمجيات ، بينما تُعدّ البرمجة الإجرائية أكثر ملاءمةً لتحديد منطق العمل للتطبيق . ^{[ 7 ]} وقد قام هذا الإطار بتكييف وتوسيع لغة HTML التقليدية لعرض محتوى ديناميكي من خلال ربط البيانات ثنائي الاتجاه، مما أتاح المزامنة التلقائية للنماذج والعروض. ونتيجةً لذلك، قلّل AngularJS من أهمية التلاعب الصريح بنموذج كائن المستند (DOM) بهدف تحسين قابلية الاختبار والأداء.

تضمنت أهداف تصميم AngularJS ما يلي:

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

طبّقت AngularJS نمط MVC لفصل مكونات العرض والبيانات والمنطق. ^{[ 8 ]} وباستخدام حقن التبعية ، نقلت Angular الخدمات التي كانت تُقدّم تقليديًا من جانب الخادم ، مثل وحدات التحكم المعتمدة على العرض، إلى تطبيقات الويب من جانب العميل. ونتيجةً لذلك، أمكن تقليل العبء على الخادم بشكل كبير.

استخدمت AngularJS مصطلح "النطاق" بطريقة تشبه أساسيات علوم الحاسوب.

يُشير مصطلح "النطاق" في علوم الحاسوب إلى الفترة الزمنية التي يكون فيها ربطٌ مُعينٌ صالحًا في البرنامج . وتُعرّف مواصفة ECMA-262 النطاق على أنه: بيئة معجمية يتم فيها تنفيذ كائن دالة في نصوص الويب من جانب العميل؛ ^{[ 9 ]} على غرار كيفية تعريف النطاق في حساب لامدا . ^{[ 10 ]}

كجزء من بنية "MVC"، يشكل النطاق "النموذج"، ويمكن الوصول إلى جميع المتغيرات المُعرّفة في النطاق من قِبل "العرض" و"المتحكم". يعمل النطاق كحلقة وصل تربط "العرض" و"المتحكم".

تتم المهمة التي يقوم بها برنامج AngularJS bootstrapper في ثلاث مراحل ^{[ 11 ]} بعد تحميل DOM:

1. إنشاء حاقن جديد
2. مجموعة من التوجيهات التي تُزيّن نموذج كائن المستند (DOM).
3. ربط جميع التوجيهات بالنطاق

تتيح توجيهات AngularJS للمطور تحديد عناصر وسمات مخصصة وقابلة لإعادة الاستخدام تشبه عناصر HTML، والتي تحدد روابط البيانات وسلوك مكونات العرض. ومن بين التوجيهات الأكثر استخدامًا:

ng-animate

توفر الوحدة دعمًا لـ JavaScript و CSS3 transition و CSS3 keyframe animation hooks ضمن التوجيهات الأساسية والمخصصة الحالية.

ng-app

يُعلن عن العنصر الجذر لتطبيق AngularJS، والذي يمكن استخدام التوجيهات تحته للإعلان عن الروابط وتحديد السلوك.

ng-aria

وحدة لدعم إمكانية الوصول لسمات ARIA الشائعة .

ng-bind

يُعيّن هذا الأمر نص عنصر DOM بقيمة تعبير مُحدد. على سبيل المثال، <span ng-bind="name"></span>يعرض قيمة 'name' داخل عنصر span. أي تغيير في المتغير 'name' ضمن نطاق التطبيق ينعكس فورًا في DOM.

ng-class

قم بتطبيق فئة بشكل مشروط، اعتمادًا على قيمة تعبير منطقي.

ng-controller

يحدد فئة تحكم JavaScript التي تقوم بتقييم تعبيرات HTML.

ng-if

توجيه شرطي أساسي يُنشئ العنصر التالي إذا كانت الشروط صحيحة. عندما يكون الشرط خاطئًا، يُزال العنصر من DOM. وعندما يكون صحيحًا، تُعاد نسخة من العنصر المُجمّع إلى مكانه.

ng-init

يتم استدعاؤها مرة واحدة عند تهيئة العنصر.

ng-model

يشبه ذلك ng-bind، ولكنه يُنشئ ربطًا ثنائي الاتجاه للبيانات بين العرض والنطاق.

ng-model-options

يوفر إمكانية ضبط كيفية إجراء تحديثات النموذج.

ng-repeat

قم بإنشاء عنصر واحد لكل عنصر من عناصر المجموعة.

ng-showوng-hide

يمكنك إظهار أو إخفاء عنصر ما بناءً على قيمة تعبير منطقي. ويتم ذلك عن طريق ضبط نمط العرض في CSS.

ng-switch

قم بإنشاء قالب واحد بشكل مشروط من مجموعة من الخيارات، وذلك بناءً على قيمة تعبير الاختيار.

ng-view

التوجيه الأساسي المسؤول عن معالجة المسارات ^{[ 12 ]} التي تحل JSON قبل عرض القوالب التي يتم تشغيلها بواسطة وحدات التحكم المحددة.

بما أن ng-*السمات غير صالحة في مواصفات HTML، data-ng-*يمكن استخدامها أيضًا كبادئة. على سبيل المثال، كل من ng-appو data-ng-appصالحان في AngularJS.

كان أبرز ما يميز ربط البيانات ثنائي الاتجاه في AngularJS هو تخفيف عبء إنشاء القوالب عن خادم الواجهة الخلفية بشكل كبير. فبدلاً من ذلك، تُعرض القوالب بلغة HTML عادية بناءً على البيانات الموجودة في نطاق مُحدد في النموذج. $scopeيكتشف النظام في Angular التغييرات التي تطرأ على قسم النموذج ويُعدّل تعبيرات HTML في العرض عبر وحدة تحكم. وبالمثل، تنعكس أي تغييرات في العرض على النموذج. وقد أدى ذلك إلى تجنب الحاجة إلى التلاعب النشط بـ DOM، وشجع على بدء التشغيل السريع وإنشاء النماذج الأولية لتطبيقات الويب. ^{[ 13 ]} يكتشف AngularJS التغييرات في النماذج من خلال مقارنة القيم الحالية بالقيم المخزنة سابقًا في عملية فحص التغييرات، على عكس Ember.js و Backbone.js اللذين يُفعّلان مستمعين عند تغيير قيم النموذج. ^{[ 14 ]}

$watch

هي طريقة Angular تُستخدم للتحقق من التغييرات. أي متغير أو تعبير مُسند إلى `$scope` يُنشئ تلقائيًا ` $watchExpression` في Angular. لذا، فإن إسناد متغير إلى `$scope` أو استخدام توجيهات مثل `ng-if` و`ng-show` و`ng-repeat`، إلخ، يُنشئ مراقبات في نطاق Angular تلقائيًا. يحتفظ Angular بمصفوفة بسيطة من `$$watchers` في كائنات `$scope` .

طرق مختلفة لتعريف المراقب في AngularJS.

• قم بمراقبة سمة بشكل صريح على النطاق $scope .

  $scope.$watch('person.username', validateUnique);

• ضع عملية الاستيفاء في القالب الخاص بك (سيتم إنشاء مراقب لك على النطاق الحالي $scope).
• اطلب من توجيه مثل ng-model أن يحدد المراقب نيابةً عنك.

  <input ng-model="person.username" />

$digest

هي دالة Angular يتم استدعاؤها داخليًا بواسطة AngularJS على فترات متقاربة. في دالة $digest ، يقوم Angular بالتكرار على جميع $watches في نطاقه/نطاقاته الفرعية.

$apply

هي دالة في Angular تستدعي داخليًا $digest . تُستخدم هذه الدالة عندما تريد إخبار Angular ببدء فحص التغييرات يدويًا (تنفيذ جميع عمليات المراقبة $watches ).

$destroy

يُعدّ $destroy() في AngularJS بمثابة دالة وحدث في آنٍ واحد. تقوم الدالة $destroy() بإزالة نطاق وجميع عناصره الفرعية من عملية التحقق من التغييرات. ويتم استدعاء حدث $destroy بواسطة Angular عند تدمير أي نطاق أو وحدة تحكم.

طُوِّرَت AngularJS في الأصل عام 2009 على يد ميشكو هيفري ^{[ 15 ]} في شركة برات تك ^{[ 16 ]} كبرنامجٍ لخدمة تخزين JSON عبر الإنترنت ، تُسعَّر بالميغابايت، لتسهيل إنشاء تطبيقاتٍ للمؤسسات. كان هذا المشروع مُتاحًا على نطاق الويب "GetAngular.com" ^{[ 16 ]} ، وكان لديه عددٌ قليلٌ من المشتركين، قبل أن يقرر المؤسسان التخلي عن فكرة العمل وإطلاق Angular كمكتبةٍ مفتوحة المصدر.

أضاف الإصدار 1.6 العديد من مفاهيم Angular إلى AngularJS، بما في ذلك مفهوم بنية التطبيق القائمة على المكونات. ^{[ 17 ]} وقد أزال هذا الإصدار، من بين أمور أخرى، ميزة Sandbox، التي اعتقد العديد من المطورين أنها توفر أمانًا إضافيًا، على الرغم من اكتشاف العديد من الثغرات الأمنية التي تتجاوز هذه الميزة. ^{[ 18 ]} الإصدار المستقر الحالي (حتى نوفمبر 2023) من AngularJS هو 1.8.3. ^{[ 19 ]}

في يناير 2018، أُعلن عن جدول زمني للتخلص التدريجي من AngularJS: بعد إصدار النسخة 1.7.0، سيستمر التطوير النشط لـ AngularJS حتى 30 يونيو 2018. بعد ذلك، استمر دعم النسخة 1.7 حتى 31 ديسمبر 2021 كدعم طويل الأمد . ^{[ 4 ] [ 5 ]}

في يوليو 2012، طوّر فريق Angular إضافةً لمتصفح جوجل كروم تُدعى Batarang، ^{[ 33 ]} لتحسين تجربة تصحيح أخطاء تطبيقات الويب المبنية باستخدام Angular. هدفت الإضافة إلى تسهيل اكتشاف مواطن الخلل في الأداء، ووفرت واجهة رسومية لتصحيح الأخطاء. ^{[ 34 ]} لفترةٍ ما بين أواخر عام 2014 وأوائل عام 2015، لم تكن الإضافة متوافقة مع الإصدارات الحديثة من Angular (بعد الإصدار 1.2.x). ^{[ 35 ]} كان آخر تحديث لهذه الإضافة في 4 أبريل 2017. إضافةً إلى ذلك، أُزيلت الإضافة من متجر Chrome الإلكتروني في 1 يونيو 2022، بسبب نقص التحديثات ومخاوف أمنية محتملة، مثل طلبها أذونات حساسة.

وضع AngularJS نموذجًا لدورة التحديث . يمكن اعتبار هذه الدورة حلقة تكرارية، يتحقق خلالها AngularJS من وجود أي تغييرات في جميع المتغيرات التي يراقبها جميع عناصر التحكم $scopes. إذا $scope.myVarتم تعريف متغير في وحدة تحكم وتم وضع علامة عليه للمراقبة، فسيراقب Angular التغييرات التي تطرأ على myVar في كل تكرار من تكرارات الحلقة.

قد يؤدي هذا النهج إلى بطء عملية العرض عندما يتحقق AngularJS من عدد كبير جدًا من المتغيرات في $scopeكل دورة. اقترح ميشكو هيفري الاحتفاظ بأقل من 2000 مراقب على أي صفحة. ^{[ 14 ]}

• React.js
• Vue.js
• مكتبة البوليمرات
• مقارنة أطر عمل جافا سكريبت
• تايب سكريبت

• الموقع الرسمي
• هاني بوت (2025-02-04). أنجولار: الفيلم الوثائقي | قصة البداية . تم الاطلاع عليه بتاريخ 2025-02-05 – عبر يوتيوب.