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

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

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

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

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

بناء الجملة:

مثال بسيط للتعبير هو {{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. نحن نضيف تعبيرًا بسيطًا يتناول جمع رقمين.

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

الإخراج:

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

من الإخراج،

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

أرقام Angular.JS

يمكن استخدام التعبيرات للعمل مع الأرقام أيضًا. دعونا نلقي نظرة على مثال لتعبيرات 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="" ng-init="margin=2;profit=200">
        Total profit margin

        {{margin*profit}}
    </div>

</body>
</html>

شرح الكود:

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

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

الإخراج:

أرقام Angular.JS

من الإخراج،

  • ويمكن أن نرى بوضوح أن ضرب الرقمين 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}} للوصول إلى قيمة هذه المتغيرات وعرضها في العرض وفقًا لذلك.

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

الإخراج:

سلاسل AngularJS

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

كائنات Angular.JS

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

دعونا نلقي نظرة على مثال لتعبيرات 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}} للوصول إلى قيمة هذه المتغيرات وعرضها في العرض وفقًا لذلك. نظرًا لأن متغيرات الأعضاء الفعلية هي جزء من كائن الشخص، فيجب عليهم الوصول إليه باستخدام علامة النقطة (.) للوصول إلى قيمتها الفعلية.

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

الإخراج:

كائنات Angular.JS

من الإخراج،

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

مصفوفات 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. نستخدم بعد ذلك تعبيرات العلامات [الفهرس] للوصول إلى كل عنصر في المصفوفة.

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

الإخراج:

مصفوفات AngularJS

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

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

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

  1. التعبيرات الزاوية تشبه تعبيرات JavaScript. ومن ثم فهي تتمتع بنفس القوة والمرونة.
  2. في JavaScript، عندما تحاول تقييم خصائص غير محددة، فإنها تقوم بإنشاء 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. نحن بعد ذلك نعرض فقط قيمة المتغير "القيمة" في العرض.

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

الإخراج:

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

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

نبذة عامة

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