تعبيرات AngularJS: ARRAY، الكائنات، $eval، السلاسل [أمثلة]

ما هي تعبيرات Angular JS؟

التعبيرات هي متغيرات تم تعريفها بين الأقواس المزدوجة {{ }}. وهي مستخدمة بشكل شائع في Angular JS، ويمكنك رؤيتها في دروسنا السابقة.

اشرح تعبيرات Angular.js بمثال

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

بناء الجملة:

مثال بسيط للتعبير هو {{5 + 6}}.

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

دعونا نلقي نظرة على مثال لتعبيرات Angular.JS.

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

Angular.js التعبيرات

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

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

</body>
</html>

شرح الكود:

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

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

Angular.js التعبيرات

من الإخراج،

  • يمكننا أن نرى أن عملية جمع الرقمين 9 و 6 تتم ويتم عرض القيمة المضافة وهي 15.

الزاوي Numbers

يمكن استخدام التعبيرات للتعامل مع الأرقام أيضًا. دعنا نلقي نظرة على مثال لتعبيرات Angular.JS مع الأرقام.

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

الزاوي Numbers

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

    <script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
    <script src="https://code.angularjs.org/1.6.9/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>

شرح الكود:

  1. يتم استخدام التوجيه ng-init في angular.js لتحديد المتغيرات والقيم المقابلة لها في العرض نفسه. إنه يشبه إلى حد ما تحديد المتغيرات المحلية للتشفير في أي منها لغة برمجة. في هذه الحالة، نقوم بتعريف متغيرين يسمى الهامش والربح ونقوم بتعيين قيم لهما.
  2. نحن بعد ذلك نستخدم المتغيرين المحليين ونضرب قيمهما.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

الزاوي Numbers

من الإخراج،

  • ومن الواضح أن عملية ضرب الرقمين 2 و2 تتم، ويتم عرض القيمة المضروبة في 200.

سلاسل AngularJS

يمكن استخدام التعبيرات للعمل مع السلاسل أيضًا. دعونا نلقي نظرة على مثال لتعبيرات Angular JS ذات السلاسل.

في هذا المثال، سنقوم بتعريف سلسلتين من "الاسم الأول" و"اسم العائلة" وعرضهما باستخدام التعبيرات وفقًا لذلك.

سلاسل AngularJS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

    <h1> Guru99 Global Event</h1>

    <div ng-app="" ng-init="firstName='Guru';lastName='99'">

        &nbsp;&nbsp;&nbsp;
        First Name : {{firstName}}<br>&nbsp;&nbsp;&nbsp;
        last Name : {{lastName}}

    </div>

</body>
</html>

شرح الكود:

  1. يتم استخدام التوجيه ng-init لتحديد المتغيرات firstName بقيمة "Guru" والمتغير lastName بقيمة "99".
  2. نستخدم بعد ذلك تعبيرات {{firstName}} و{{lastName}} للوصول إلى قيمة هذه المتغيرات وعرضها في العرض وفقًا لذلك.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

سلاسل AngularJS

من الإخراج، يمكن أن نرى بوضوح أن قيم firstName وlastName معروضة على الشاشة.

كائنات Angular.JS

يمكن استخدام التعبيرات للعمل معها Javaسيناريو الكائنات كذلك.

دعونا نلقي نظرة على مثال لتعبيرات Angular.JS مع كائنات جافا سكريبت. يتكون كائن جافا سكريبت من زوج من الاسم والقيمة.

يوجد أدناه مثال على بناء جملة كائن جافا سكريبت.

بناء الجملة:

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

في هذا المثال، سنقوم بتعريف كائن واحد على أنه كائن شخص والذي سيحتوي على زوجين من القيم الأساسية "الاسم الأول" و"اسم العائلة".

كائنات Angular.JS

<!DOCTYPE html>
<html>
<head>
    <meta chrset="UTF 8">
    <title>Event Registration</title>

</head>
<body>

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="person={firstName:'Guru',lastName:'99'}">

    &nbsp;&nbsp;&nbsp;
    First Name : {{person.firstName}}<br>&nbsp;&nbsp;&nbsp;
    Last Name : {{person.lastName}}

</div>

</body>
</html>

شرح الكود:

  1. يتم استخدام التوجيه ng-init لتعريف كائن الشخص الذي يمتلك بدوره أزواج قيمة رئيسية من الاسم الأول بقيمة "Guru" والمتغير lastName بقيمة "99".
  2. نستخدم بعد ذلك تعبيرات {{person.firstName}} و{{person. SecondName}} للوصول إلى قيمة هذه المتغيرات وعرضها في العرض وفقًا لذلك. نظرًا لأن متغيرات الأعضاء الفعلية هي جزء من كائن الشخص، فيجب عليهم الوصول إليه باستخدام علامة النقطة (.) للوصول إلى قيمتها الفعلية.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

كائنات Angular.JS

من الإخراج،

  • يمكنك أن ترى بوضوح أن قيم "firstName" و"secondName" معروضة على الشاشة.

مصفوفات AngularJS

يمكن استخدام التعبيرات للعمل مع المصفوفات أيضًا. دعونا نلقي نظرة على مثال لتعبيرات Angular JS ذات المصفوفات.

في هذا المثال، سنقوم بتعريف المصفوفة التي ستحتفظ بعلامات الطالب في 3 مواد. في العرض، سنعرض قيمة هذه العلامات وفقًا لذلك.

مصفوفات AngularJS

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

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

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="marks=[1,15,19]">

    Student Marks<br>&nbsp;&nbsp;&nbsp;
    Subject1 : {{marks[0] }}<br>&nbsp;&nbsp;&nbsp;
    Subject2 : {{marks[1] }}<br>&nbsp;&nbsp;&nbsp;
    Subject3 : {{marks[2] }}<br>&nbsp;&nbsp;&nbsp;
</div>

</body>
</html>

شرح الكود:

  1. يتم استخدام التوجيه ng-init لتحديد المصفوفة التي تحمل الاسم "علامات" بثلاث قيم هي 3 و1 و15.
  2. نستخدم بعد ذلك تعبيرات العلامات [الفهرس] للوصول إلى كل عنصر في المصفوفة.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

مصفوفات AngularJS

ومن خلال الإخراج، يمكننا أن نرى بوضوح أن العلامات المعروضة هي تلك المحددة في المصفوفة.

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

قدرات التعبير Angular.JS

  1. التعبيرات الزاوية هي مثل Javaتعبيرات النص، وبالتالي، فهي تتمتع بنفس القوة والمرونة.
  2. In Javaعند محاولة تقييم خصائص غير محددة، يقوم البرنامج النصي بإنشاء ReferenceError أو TypeError. في Angular، يكون تقييم التعبيرات متسامحًا ويولد قيمة غير محددة أو فارغة.
  3. يمكن للمرء استخدام عوامل التصفية داخل التعبيرات لتنسيق البيانات قبل عرضها.

قيود تعبير JS الزاوي

  1. لا يوجد حاليًا أي توفر لاستخدام الشروط أو الحلقات أو الاستثناءات في تعبير Angular
  2. لا يمكنك الإعلان عن وظائف في تعبير Angular، حتى داخل توجيه ng-init.
  3. لا يمكن إنشاء تعبيرات عادية في تعبير Angular. التعبير العادي عبارة عن مجموعة من الرموز والأحرف، والتي يتم استخدامها للبحث عن سلاسل مثل .*\.txt$. لا يمكن استخدام مثل هذه التعبيرات ضمن تعبيرات Angular JS.
  4. أيضًا، لا يمكن للمرء استخدام أو إفراغ التعبير الزاوي.

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

تسمح الدالة $eval بتقييم التعبيرات من داخل وحدة التحكم نفسها. لذا، أثناء استخدام التعبيرات للتقييم في العرض، يتم استخدام $eval في وظيفة وحدة التحكم.

دعونا نلقي نظرة على مثال بسيط على هذا.

في هذا المثال،

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

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

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

<script src="https://code.angularjs.org/1.6.9/angular-route.js"></script>
<script src="https://code.angularjs.org/1.6.9/angular.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.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>

شرح الكود:

  1. نقوم أولاً بتعريف متغيرين "a" و"b"، يحمل كل منهما قيمة 2.
  2. نحن نستخدم الدالة $scope.$eval لتقييم إضافة المتغيرين وتعيينها لمتغير النطاق "القيمة".
  3. نحن بعد ذلك نعرض فقط قيمة المتغير "القيمة" في العرض.

إذا تم تنفيذ الكود بنجاح، سيتم عرض الإخراج التالي عند تشغيل الكود في المتصفح.

الإخراج:

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

يُظهر الإخراج أعلاه إخراج التعبير الذي تم تقييمه في مراقب تظهر النتائج أعلاه أن تعبير $eval تم استخدامه لإجراء إضافة متغيري النطاق "a وb" مع إرسال النتيجة وعرضها في العرض.

الملخص

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