English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

AngularJS 简介

AngularJS هو إطار عمل تطبيقات الويب المفتوح المصدر. تم تطويره في البداية بواسطة Misko Hevery و Adam Abrons في عام 2009. الآن يتم صيانته بواسطة Google. أحدث إصدار هو 1.2.21.

تعريف AngularJS في الوثائق الرسمية كالتالي -

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

الميزات العامة

الميزات العامة لـ AngularJS كالتالي -

  • AngularJS هو إطار عمل فعال يمكنه إنشاء تطبيقات الإنترنت الغنية (RIA).

  • يقدم AngularJS للمطورين خيارًا لتحرير تطبيقات العملاء باستخدام نموذج Model View Controller (MVC) النظيف بلغة JavaScript.

  • تتطابق التطبيقات المكتوبة باستخدام AngularJS عبر المتصفحات. يقوم AngularJS بمعالجة كود JavaScript المناسب لكل متصفح تلقائيًا.

  • AngularJS مفتوح المصدر و مجاني تمامًا، ويستخدمه الآلاف من المطورين في جميع أنحاء العالم. إنه موافق للنشر تحت رخصة Apache 2.0.

بشكل عام، AngularJS هي إطار عمل用于 بناء تطبيقات الويب الكبيرة، عالية الأداء وسهلة الصيانة.

الميزات الأساسية

الميزات الأساسية لـ AngularJS كالتالي-

  • ترابط البيانات − هذا هو التزامن التلقائي بين مكونات النموذج والعرض.

  • نطاق − هذه هي الأجسام التي تشير إلى النموذج. تتولى هذه الدور الوسيط بين السيطرة والعرض.

  • سيط − هذه هي الدوال الم绑定 إلى نطاق معين.

  • خدمات − يحتوي AngularJS على بعض الخدمات المدمجة مثل $http لإنشاء XMLHttpRequests. هذه هي أغراض وحيدة، وتُقام مرة واحدة فقط في التطبيق.

  • مرشحات − هذه هي اختيار مجموعة فرعية من العناصر من مجموعة وتقديم مجموعة جديدة.

  • تعليمات − التعليمات البرمجية هي علامات على عناصر DOM (مثل العناصر، الخاصيات، CSS، إلخ). يمكن استخدامها لإنشاء علامات HTML مخصصة كقطع مخصصة. يحتوي AngularJS على تعليمات برمجية مدمجة مثل ngBind، ngModel، إلخ.

  • نماذج − هذه هي العروض التي تحتوي على معلومات من السيطرة والنموذج. يمكن أن تكون هذه ملفات واحدة (مثل index.html)، أو باستخدامجزئياتعدة عروض في صفحة واحدة.

  • Routing − هو مفهوم التبديل بين العروض.

  • Model View Whatever − MVW هو نموذج تصميم يستخدم لقسم التطبيق إلى أجزاء مختلفة تسمى نموذج، عرض، وسيط، وكل جزء منه له وظيفة مختلفة. AngularJS لا يحقق MVC التقليدي، بل هو أقرب إلى MVVM (نموذج-عرض-نموذج العرض). Angular يسمي فريق JS ذلك بـ "نموذج عرض".

  • Deep Linking − يسمح الرابط العميق بت编码 حالة التطبيق في URL، مما يمكن إضافة كوسيلة مرجعية. ثم يمكن استعادة التطبيق إلى نفس الحالة من URL.

  • Injection Dependency − يحتوي AngularJS على نظام التدخل الاعتمادي المدمج، مما يساعد المطورين على إنشاء، فهم وتحليل التطبيقات بسهولة.

المفهوم

توضح الشكل التالي بعض الأجزاء المهمة لـ AngularJS، وسنناقش ذلك بشكل مفصل في الفصول القادمة.

مزايا AngularJS

ميزات AngularJS هي-

  • يقدم وظيفة لإنشاء تطبيقات الصفحة الواحدة بطريقة نظيفة قابلة للصيانة.

  • يقدم إلى HTML وظيفة الترابط البياناتية. لذلك، يقدم للمستخدم تجربة غنية ومتسارعة.

  • يمكن اختبار الكود الخاص بـ AngularJS كوحدة.

  • AngularJS يستخدم التدخل الاعتمادي ويستفيد من فصل الاهتمامات.

  • AngularJS يقدم مكونات قابلة للتكرار.

  • باستخدام AngularJS، يمكن للمطورين تحقيق المزيد من الوظائف باستخدام كود قصير.

  • في AngularJS، هيكل العرض هو صفحة HTML نظيفة، وتتم معالجة الأعمال باستخدام التحكم المكتوب بلغة JavaScript.

أهم شيء، يمكن تشغيل تطبيقات AngularJS على جميع المتصفحات الرئيسية والأجهزة المحمولة، بما في ذلك الهواتف المحمولة والأجهزة اللوحية القائمة على Android وiOS.

عيوب AngularJS

على الرغم من أن AngularJS يحتوي على العديد من المزايا، إلا أن هناك بعض النقاط التي يجب الانتباه إليها -

  • الأمان − كإطار برمجي JavaScript نظيف، تطبيقات AngularJS غير آمنة. هوية الخادم وحقوق الوصول هي شرط ضروري لضمان أمان التطبيق.

  • فاشل − إذا قام مستخدمو تطبيقك بإيقاف تشغيل JavaScript، فإن أي محتوى آخر غير الصفحة الأساسية غير مرئي.

تعليمات AngularJS

يمكن تقسيم إطار AngularJS إلى ثلاثة أجزاء رئيسية -

  • ng-app − تعريف هذا التعليمات البرمجية تطبيق AngularJS ويربطه بـ HTML.

  • ng-model − هذا التعليمات البرمجية المزيفة سيربط قيمة بيانات تطبيق AngularJS بسيطرة HTML.

  • ng-bind − هذا التعليمات البرمجية سيربط بيانات تطبيق AngularJS ببطاقات HTML.