ما هو AngularJS؟ Archiالبنية والميزات والمزايا

ما هو AngularJS؟

AngularJS هو إطار عمل مفتوح المصدر يعتمد على نموذج العرض والتحكم، مكتوب بلغة Javaسيناريوكان AngularJS أحد أشهر أطر عمل الويب في العقد الثاني من الألفية الثانية، ويُستخدم لتطوير...ping معظمها تطبيقات صفحة واحدة. تم تطوير هذا الإطار بواسطة مجموعة من المطورين من Google نفسها.

بفضل الدعم الكبير من Google وبفضل الأفكار الواردة من منتدى مجتمعي واسع، تم تحديث الإطار باستمرار طوال فترة استخدامه. كما أنه استوعب أبرز اتجاهات التطوير في تلك الفترة، ولهذا السبب لا يزال الكثير من برامج الإنتاج يعمل عليه حتى اليوم.

من المهم توضيح نقطة مصطلحية واحدة مبكراً. يُوصف AngularJS على نطاق واسع بأنه إطار عمل MVC، وهو ما يُعد نقطة انطلاق مفيدة. مع ذلك، فضّل فريق AngularJS نفسه هذا التصنيف. MVW (عرض النموذج - أيًا كان)لأن وقت التشغيل يتصرف بشكل أقرب إلى نمط Model-View-ViewModel منه إلى نمط MVC الكلاسيكي. توثيق AngularJS يُطلق عليه اسم إطار هيكلي لتطبيقات الويب الديناميكية. بعد توضيح ذلك، إليك كيفية ترابط الأجزاء معًا.

AngularJS Architecture

تتبع AngularJS بنية MVC. يظهر مخطط إطار عمل MVC أدناه:

AngularJS Archiمخطط فني

لكل طبقة من الطبقات الثلاث مهمة واضحة:

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

عمليًا، نادرًا ما يقوم المتحكم بإدخال البيانات إلى العرض يدويًا. يراقب AngularJS النموذج ويُحدّث العرض تلقائيًا، وتعتمد هذه المزامنة التلقائية على مجموعة الميزات الموضحة لاحقًا.

مميزات AngularJS

يتميز AngularJS بالميزات الرئيسية التالية التي تجعله أحد أقوى أطر العمل في السوق:

1. MVC - الإطار مبني على المفهوم الشهير لـ MVC (وحدة تحكم عرض النموذج). هذا هو نمط التصميم المستخدم في جميع تطبيقات الويب الحديثة. يعتمد هذا النمط على تقسيم طبقة منطق الأعمال وطبقة البيانات وطبقة العرض إلى أقسام منفصلة. يتم التقسيم إلى أقسام مختلفة بحيث يمكن إدارة كل قسم بسهولة أكبر.
2. ربط نموذج البيانات – لستَ بحاجة لكتابة أكواد خاصة لربط البيانات بعناصر تحكم HTML. يُمكنك فعل ذلك باستخدام AngularJS بمجرد إضافة بضعة أسطر من الأكواد.
3. كتابة كود أقل – عند إجراء الكثير من عمليات التلاعب بـ DOM Javaسيناريو كان من الضروري كتابة كود برمجي لتصميم أي تطبيق. لكن مع AngularJS، ستندهش من قلة الكود الذي ستحتاج لكتابته لمعالجة DOM.
4. وحدة الاختبار جاهزون – المصممون في Google لم يقتصر الأمر على تطوير AngularJS فحسب، بل قام أيضًا بتطوير إطار عمل للاختبار يسمى "Karma" والذي يساعد في تصميم اختبارات الوحدة لتطبيقات AngularJS.
5. تعليمات – علامات مثل ng-app، ng-model و ng-repeat إضافة سلوك إلى عناصر HTML العادية.

يسهل فهم هذه الميزات بمجرد تشغيلها، لذا فإن القسم التالي يبني صفحة عاملة من الصفر.

كيفية إعداد AngularJS وبناء تطبيقك الأول

إنّ قراءة معلومات حول ربط البيانات شيء، ومشاهدتها وهي تعمل شيء آخر. لا يحتاج AngularJS إلى مدير حزم، ولا إلى مُجمِّع، ولا إلى مُصرِّف، لذا فإنّ تطبيقك الأول عبارة عن ملف HTML واحد يعمل مباشرةً من القرص الصلب.

الخطوة 1) أضف مكتبة AngularJS

قم بتحميل المكتبة من شبكة توصيل المحتوى (CDN) باستخدام وسم برمجي واحد. الإصدار 1.8.3 هو الإصدار النهائي من AngularJS، لذا ثبّت صفحتك على هذا الإصدار تحديدًا بدلاً من إصدار متغير.

الخطوة الثانية) حدد جذر التطبيق باستخدام ng-app

يُحدد توجيه ng-app لمُترجم AngularJS الجزء الذي يملكه من الصفحة. يؤدي وضعه على وسم html إلى تسليم المستند بأكمله إلى إطار العمل، والقيمة التي تُحددها له تُشير إلى اسم الوحدة التي ستُنشئها.

الخطوة 3) ربط البيانات باستخدام ng-model وتعبير

يربط توجيه ng-model عنصر إدخال بخاصية في النطاق، ويقوم تعبير بين قوسين مزدوجين بطباعة نفس الخاصية في مكان آخر على الصفحة. ولأن الربط ثنائي الاتجاه، typing يقوم مربع الحوار بتحديث العنوان فورًا، دون الحاجة إلى معالج أحداث خاص بك.

الخطوة الرابعة) أضف وحدة تحكم للمنطق

وحدة التحكم هي سطح مستوٍ Javaدالة برمجية تستقبل كائن $scope وتُعيّن له قيمًا أولية. تسجيلها في الوحدة يجعلها متاحة لتوجيه ng-controller.

<!DOCTYPE html>
<html ng-app="helloApp">
<head>
  <meta charset="UTF-8">
  <title>AngularJS Hello World</title>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.3/angular.min.js"></script>
</head>
<body>

  <div ng-controller="GreetController">
    <input type="text" ng-model="name" placeholder="Enter your name">
    <h3>Hello {{ name }}!</h3>
  </div>

  <script>
    // Step 1: create the module named in ng-app
    angular.module("helloApp", [])
      // Step 2: register a controller on that module
      .controller("GreetController", function ($scope) {
        $scope.name = "World";
      });
  </script>
</body>
</html>

الخطوة 5) شغّل الصفحة وتحقق من النتيجة

احفظ الملف باسم index.html وافتحه في أي متصفح. سيظهر العنوان "Hello World!" في البداية، ثم يُعاد كتابته مع كل ضغطة مفتاح. لا يتطلب الأمر خادم ويب أو عملية بناء.

إذا لم يظهر شيء، فافتح وحدة تحكم المتصفح وتأكد من تحميل سكربت CDN وأن اسم الوحدة داخل ng-app يطابق تمامًا الاسم المُمرر إلى angular.module، لأن عدم التطابق سيؤدي إلى فشل العملية دون تنبيه. تُظهر هذه الصفحة الصغيرة بالفعل المزايا المذكورة لاحقًا.

مزايا AngularJS

فيما يلي مزايا AngularJS:

• بما أنه إطار عمل مفتوح المصدر، يمكنك توقع أن يكون عدد الأخطاء أو المشكلات ضئيلاً.
• الربط ثنائي الاتجاه – يحافظ AngularJS على تزامن طبقة البيانات وطبقة العرض. لست بحاجة إلى كتابة أي شيء إضافي Javaاستخدم كود البرمجة النصية للحفاظ على تزامن البيانات في كود HTML وطبقة البيانات. سيقوم AngularJS بذلك تلقائيًا. ما عليك سوى تحديد عنصر التحكم المرتبط بكل جزء من النموذج.
• التوجيه – يمكن لـ AngularJS إدارة التوجيه، أي الانتقال من صفحة إلى أخرى. هذا هو الأساس الرئيسي لتطبيقات الصفحة الواحدة؛ حيث يمكنك الانتقال إلى وظائف مختلفة في تطبيق الويب الخاص بك بناءً على تفاعل المستخدم، مع البقاء ضمن نفس الصفحة.
• يدعم AngularJS الاختبار، كلاهما وحدة التجاربو اختبار التكامل.
• يُوسّع AngularJS لغة HTML من خلال توفير عناصر خاصة به تُسمى التوجيهات. التوجيهات، بشكل عام، عبارة عن علامات على عنصر DOM (مثل سمة، اسم عنصر، تعليق، أو فئة CSS) تُخبر مُصرّف HTML الخاص بـ AngularJS بربط سلوك مُحدد بهذا العنصر. تُساعد هذه التوجيهات في توسيع وظائف عناصر HTML الموجودة، مما يُعطي تطبيق الويب الخاص بك مزيدًا من الإمكانيات.

مميزات AngularJS

إن النظرة المتوازنة لا تقل أهمية، لذا سيتم توضيح المقايضات لاحقًا.

عيوب وقيود AngularJS

كل إطار عمل يقدم بعض التنازلات، وAngularJS ليس استثناءً. هذه هي القيود الأكثر شيوعًا التي تُبلغ عنها الفرق التي تُدير تطبيقات AngularJS:

• لا يوجد طبقة أمان خاصة به – لا يوفر AngularJS المصادقة ولا الترخيص، لذلك يجب فرض كليهما على الخادم.
• الاعتماد الكلي على Javaسيناريو – إذا قام الزائر بتعطيل Javaفي حالة البرمجة النصية، تعود الصفحة إلى ترميزها الأساسي ولا يتم عرضها.
• أداء دورة الهضم – يتم اكتشاف التغييرات من خلال مقارنة القيم المراقبة بشكل متكرر، لذلك قد تبدو الصفحات التي تحتوي على عدة آلاف من الروابط بطيئة.
• منحنى التعلم حاد – تتداخل النطاقات والتوجيهات والمصانع والخدمات ومقدمي الخدمات، وغالبًا ما توجد عدة طرق لتحقيق نفس النتيجة.
• محرك بحث الرؤية – يتم تجميع طرق العرض في المتصفح، لذلك يلزم القيام بعمل إضافي مثل المعالجة المسبقة قبل أن تقوم برامج الزحف بفهرسة الصفحات بشكل موثوق.
• لا توجد تحديثات أخرى – منذ 31 ديسمبر 2021، لم تعد هناك أي تصحيحات رسمية، لذلك تظل الثغرة الأمنية المكتشفة حديثًا دون إصلاح ما لم يقدم بائع تجاري حلاً لها.

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

AngularJS مقابل Angular: ما الفرق؟

كثيرًا ما يُخلط بين AngularJS وAngular لتشابه اسميهما، لكنهما إطاران عمل منفصلان بلغات وهياكل وإصدارات مختلفة. يشير AngularJS فقط إلى سلسلة الإصدارات 1.x الموضحة في هذه الصفحة. أما Angular فيشير إلى الإصدار 2 وكل إصدار لاحق، وهو إعادة كتابة كاملة صدرت عام 2016 ولا تزال قيد التطوير النشط. Code لا ينتقل بينهما دون عملية هجرة متعمدة.

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

الأسئلة الشائعة