تعابير AngularJS: المصفوفات، الكائنات، $eval، السلاسل النصية

ما هي تعابير AngularJS؟

التعبيرات هي متغيرات مكتوبة داخل أقواس مزدوجة. {{ }}. يتم استخدامها بشكل شائع جدًا داخل AngularJS، وتظهر في جميع الدروس السابقة في هذه السلسلة.

⚠️ إشعار الدعم: وصل AngularJS نهاية الحياة في 31 ديسمبر 2021 ولا يتلقى أي تحديثات أو إصلاحات أمنية إضافية. يبقى بناء الجملة أدناه دقيقًا لصيانة تطبيقات AngularJS 1.x الحالية؛ أما المشاريع الجديدة فينبغي أن تستخدم الإصدارات الحديثة. زاوي، حيث لا تزال أقواس الاستيفاء موجودة ولكن ng-init و $eval لا.

شرح تعابير AngularJS مع مثال

تُكتب تعابير AngularJS داخل أقواس مزدوجة، كما في {{expression}}.

بناء الجملة: مثال بسيط على التعبير هو {{5 + 6}}.

تقوم تعبيرات AngularJS بربط البيانات بـ HTML بنفس طريقة توجيه ng-bind، ويعرض AngularJS البيانات بالضبط في المكان الذي تم وضع التعبير فيه.

في هذا المثال، نعرض عملية جمع بسيطة للأرقام كتعبير.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="">
        Addition : {{6+9}}
    </div>

</body>
</html>

Code التفسير:

1. توجيه ng-app فارغ، مما يعني عدم وجود وحدة نمطية توفر وحدات التحكم. توجيهاتأو الخدمات المتعلقة بهذه الصفحة.
2. عبارة بسيطة تجمع عددين.

الإخراج:

تتم عملية الجمع بين 9 و 6 ويتم عرض النتيجة، وهي 15.

AngularJS Numbers

تتعامل التعابير مع الأرقام. هذا المثال يضرب متغيرين عدديين. margin و profitويعرض المنتج.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

Code التفسير:

1. يُعرّف توجيه ng-init المتغيرات وقيمها في العرض نفسه، تمامًا مثل المتغيرات المحلية في أي لغة برمجة. هنا margin و profit يتم الإعلان عنها وتخصيصها.
2. ثم يقوم التعبير بضرب هذين المتغيرين المحليين.

الإخراج:

تتم عملية ضرب العددين 2 و 200، ويتم عرض الناتج وهو 400.

سلاسل AngularJS

يمكن استخدام التعابير أيضًا مع السلاسل النصية. يوضح هذا المثال تعريفًا firstName و lastName ويعرض كليهما.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

    <script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

    <h1>Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">
        First Name : {{firstName}}<br>
        Last Name : {{lastName}}
    </div>

</body>
</html>

Code التفسير:

1. يُعرّف التوجيه ng-init firstName بقيمة "Guru"و" lastName بقيمة "99".
2. التعبيرات {{firstName}} و {{lastName}} اقرأ تلك المتغيرات واعرضها في العرض.

الإخراج:

تظهر القيمتان على الشاشة.

كائنات AngularJS

تعمل التعبيرات مع Javaسيناريو الكائنات، التي تتكون من أزواج اسم-قيمة. صيغة a Javaيبدو كائن البرنامج النصي كالتالي:

var car = {type: "Ford", model: "Explorer", color: "White"};

هذا المثال يحدد person كائن يحتوي على زوجين من المفاتيح والقيم، firstName و lastName.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">
    First Name : {{person.firstName}}<br>
    Last Name : {{person.lastName}}
</div>

</body>
</html>

Code التفسير:

1. يُعرّف التوجيه ng-init الكائن person باستخدام أزواج المفتاح والقيمة firstName ضبط ل "Guru"و" lastName تم ضبطه على "99".
2. التعبيرات {{person.firstName}} و {{person.lastName}} اقرأ تلك العناصر. ولأنها تنتمي إلى الكائن، فإن استخدام صيغة النقطة ضروري للوصول إلى قيمها.

الإخراج:

قيم firstName و lastName تظهر على الشاشة.

مصفوفات AngularJS

تتعامل التعابير مع المصفوفات. يُعرّف هذا المثال مصفوفة تحتوي على علامات الطالب في ثلاث مواد ويعرض كل قيمة منها.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<h1>Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">
    Student Marks<br>
    Subject1 : {{marks[0]}}<br>
    Subject2 : {{marks[1]}}<br>
    Subject3 : {{marks[2]}}
</div>

</body>
</html>

Code التفسير:

1. يُحدد توجيه ng-init المصفوفة marks مع القيم الثلاث 1 و 15 و 19.
2. تعابير من الشكل marks[index] اقرأ كل عنصر.

الإخراج:

يتم عرض العلامات المحددة في المصفوفة.

قدرات وقيود التعبير AngularJS

القدرات

1. تشبه تعابير AngularJS Javaتتشارك تعابير النصوص البرمجية في الكثير من نفس القوة والمرونة.
2. في Javaيُثير البرنامج النصي خطأ ReferenceError أو TypeError عند وجود خاصية غير مُعرّفة، بينما يكون تقييم AngularJS متسامحًا وينتج عنه قيمة غير مُعرّفة أو فارغة.
3. يمكن تطبيق عوامل التصفية داخل التعبير لتنسيق البيانات قبل عرضها.
4. يتم دعم عامل الشرط الثلاثي، لذا {{ isReady ? 'Yes' : 'No' }} صالح.

القيود

1. لا يمكن استخدام الحلقات ومعالجة الاستثناءات داخل تعبير AngularJS. يقتصر المنطق الشرطي على عامل التشغيل الثلاثي؛ if البيانات غير متوفرة.
2. لا يمكن تعريف الدوال في تعبير، ولا حتى داخل توجيه ng-init.
3. لا يمكن إنشاء التعابير النمطية داخل تعبير. التعبير النمطي هو مزيج من الرموز والأحرف المستخدمة لمطابقة السلاسل النصية، مثل .*\.txt$ويتم رفض هذه التفسيرات الحرفية.
4. عامل الفاصلة (,) و void لا يُسمح للمشغلين بالدخول.

ng-bind مقابل أقواس التعبير: أيهما تستخدم؟

Double تُنتج الأقواس وتوجيه ng-bind نفس المخرجات المعروضة، لذا يبدو الاختيار بينهما عشوائيًا. لكنه ليس كذلك. يتصرف كلاهما بشكل مختلف في اللحظة التي تسبق اكتمال تحميل AngularJS، وهذا الاختلاف واضح للمستخدم.

يُعرف الظهور الوجيز للأقواس غير المُدمجة بـ"وميض المحتوى غير المُدمج"، ويحدث ذلك لأن المتصفح يعرض الترميز قبل أن يقوم AngularJS بتجميعه. استخدم ng-bind، أو أضف توجيه ng-cloak، للمحتوى المرئي أعلى الصفحة. تبقى الأقواس الخيار الأوضح والأكثر قابلية للقراءة في أي مكان آخر، خاصةً عندما تظهر عدة قيم داخل عنصر واحد.

الفرق بين التعبير وقيمة $

استخدم $eval تقوم الدالة بتقييم التعبيرات من داخل وحدة التحكم. يتم تقييم التعبيرات في العرض، بينما $eval يتم التقييم في كود وحدة التحكم.

يستخدم هذا المثال $eval لجمع رقمين ووضع النتيجة على كائن النطاق حتى يتمكن العرض من عرضها.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Event Registration</title>
</head>
<body>

<script src="https://code.angularjs.org/1.8.3/angular.min.js"></script>

<div ng-app="sampleApp" ng-controller="AngularController">
    <h1>Guru99 Global Event</h1>
    {{value}}
</div>

<script>
    var sampleApp = angular.module('sampleApp', []);
    sampleApp.controller('AngularController', function($scope) {
        $scope.a = 1;
        $scope.b = 1;

        $scope.value = $scope.$eval('a+b');
    });
</script>

</body>
</html>

Code التفسير:

1. متغيران للنطاق، a و b، كل منها يحمل القيمة 1.
2. $scope.$eval يقوم بتقييم عملية الجمع وتعيين النتيجة لمتغير النطاق value.
3. ثم يتم عرض المشهد value.

الإخراج:

تُظهر المخرجات التعبير الذي تم تقييمه داخل مراقب ، مع إرسال مجموع متغيري النطاق وعرضهما في العرض.

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