Εκφράσεις AngularJS: ARRAY, Objects, $eval, Strings [Παραδείγματα]

Με: Τζέιμς Χάρτμαν Τζέιμς Χάρτμαν
Hours Ενημερώθηκε

Τι είναι οι Angular JS Expressions;

Οι εκφράσεις είναι μεταβλητές που ορίστηκαν στις διπλές αγκύλες {{ }}. Χρησιμοποιούνται πολύ συχνά στο Angular JS και θα τα δείτε στα προηγούμενα σεμινάρια μας.

Εξηγήστε τις εκφράσεις Angular.js με ένα παράδειγμα

Οι εκφράσεις AngularJS είναι εκείνες που είναι γραμμένες μέσα σε διπλές αγκύλες {{έκφραση}}.

Σύνταξη:

Ένα απλό παράδειγμα έκφρασης είναι το {{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. Προσθέτουμε μια απλή έκφραση που εξετάζει την πρόσθεση 2 αριθμών.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Εκφράσεις Angular.js

Από την έξοδο,

  • Φαίνεται ότι γίνεται η πρόσθεση των δύο αριθμών 9 και 6 και εμφανίζεται η προστιθέμενη αξία του 15.

Γωνιακό. JS Numbers

Οι εκφράσεις μπορούν να χρησιμοποιηθούν και για την εργασία με αριθμούς. Ας δούμε ένα παράδειγμα παραστάσεων Angular.JS με αριθμούς.

Σε αυτό το παράδειγμα, θέλουμε απλώς να δείξουμε έναν απλό πολλαπλασιασμό 2 μεταβλητών αριθμών που ονομάζονται περιθώριο και κέρδος και να εμφανίσουμε την πολλαπλασιαζόμενη τιμή τους.

Γωνιακό. 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 μεταβλητές που ονομάζονται περιθώριο και κέρδος και τους εκχωρούμε τιμές.
  2. Στη συνέχεια, χρησιμοποιούμε τις 2 τοπικές μεταβλητές και πολλαπλασιάζουμε τις τιμές τους.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Γωνιακό. JS Numbers

Από την έξοδο,

  • Μπορεί να φανεί καθαρά ότι ο πολλαπλασιασμός των 2 αριθμών 2 και 200 ​​λαμβάνει χώρα και εμφανίζεται η πολλαπλασιασμένη τιμή του 400.

ΣΧΕΤΙΚΑ ΑΡΘΡΑ

AngularJS Strings

Οι εκφράσεις μπορούν επίσης να χρησιμοποιηθούν για εργασία με συμβολοσειρές. Ας δούμε ένα παράδειγμα παραστάσεων Angular JS με συμβολοσειρές.

Σε αυτό το παράδειγμα, πρόκειται να ορίσουμε 2 συμβολοσειρές "firstName" και "lastName" και να τις εμφανίσουμε χρησιμοποιώντας εκφράσεις ανάλογα.

AngularJS Strings

<!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 Strings

Από την έξοδο, μπορεί να φανεί καθαρά ότι οι τιμές του firstName και του lastName εμφανίζονται στην οθόνη.

Angular.JS Objects

Οι εκφράσεις μπορούν να χρησιμοποιηθούν για εργασία JavaΓραφή αντικείμενα επίσης.

Ας δούμε ένα παράδειγμα εκφράσεων Angular.JS με αντικείμενα javascript. Ένα αντικείμενο javascript αποτελείται από ένα ζεύγος ονόματος-τιμής.

Παρακάτω είναι ένα παράδειγμα σύνταξης ενός αντικειμένου javascript.

Σύνταξη:

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

Σε αυτό το παράδειγμα, πρόκειται να ορίσουμε ένα αντικείμενο ως αντικείμενο προσώπου το οποίο θα έχει 2 ζεύγη βασικών τιμών "firstName" και "lastName".

Angular.JS Objects

<!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 χρησιμοποιείται για να ορίσει το πρόσωπο αντικειμένου το οποίο με τη σειρά του έχει ζεύγη βασικών τιμών firstName με την τιμή "Guru" και τη μεταβλητή lastName με την τιμή "99".
  2. Στη συνέχεια, χρησιμοποιούμε εκφράσεις των {{person.firstName}} και {{person.secondName}} για να αποκτήσουμε πρόσβαση στην τιμή αυτών των μεταβλητών και να τις εμφανίσουμε ανάλογα στην προβολή. Εφόσον οι πραγματικές μεταβλητές μέλους είναι μέρος του προσώπου αντικειμένου, πρέπει να έχουν πρόσβαση σε αυτό με τη σημείωση κουκκίδας (.) για να έχουν πρόσβαση στην πραγματική τους τιμή.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Angular.JS Objects

Από την έξοδο,

  • Μπορεί να φανεί καθαρά ότι οι τιμές "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 χρησιμοποιείται για να ορίσετε τον πίνακα με το όνομα "marks" με 3 τιμές 1, 15 και 19.
  2. Στη συνέχεια, χρησιμοποιούμε εκφράσεις σημαδιών [ευρετήριο] για πρόσβαση σε κάθε στοιχείο του πίνακα.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Πίνακες AngularJS

Από την έξοδο, φαίνεται καθαρά ότι τα σημάδια που εμφανίζονται, τα οποία ορίζονται στον πίνακα.

Δυνατότητες και περιορισμοί έκφρασης AngularJS

Δυνατότητες Angular.JS Expression

  1. Οι γωνιακές εκφράσεις είναι σαν JavaΕκφράσεις σεναρίου. Ως εκ τούτου, έχει την ίδια δύναμη και ευελιξία.
  2. In JavaΣενάριο, όταν προσπαθείτε να αξιολογήσετε απροσδιόριστες ιδιότητες, δημιουργεί ένα ReferenceError ή TypeError. Στο Angular, η αξιολόγηση έκφρασης είναι συγχωρητική και δημιουργεί ένα απροσδιόριστο ή μηδενικό.
  3. Κάποιος μπορεί να χρησιμοποιήσει φίλτρα μέσα σε εκφράσεις για να μορφοποιήσει δεδομένα πριν τα εμφανίσει.

Περιορισμοί γωνιακής έκφρασης JS

  1. Προς το παρόν δεν υπάρχει διαθεσιμότητα για χρήση συνθηκών, βρόχων ή εξαιρέσεων σε μια γωνιακή έκφραση
  2. Δεν μπορείτε να δηλώσετε συναρτήσεις σε μια γωνιακή έκφραση, ακόμη και μέσα στην οδηγία ng-init.
  3. Δεν μπορεί κανείς να δημιουργήσει κανονικές εκφράσεις σε μια γωνιακή έκφραση. Μια τυπική έκφραση είναι ένας συνδυασμός συμβόλων και χαρακτήρων, που χρησιμοποιούνται για την εύρεση συμβολοσειρών όπως .*\.txt$. Τέτοιες εκφράσεις δεν μπορούν να χρησιμοποιηθούν σε εκφράσεις Angular JS.
  4. Επίσης, δεν μπορεί κανείς να χρησιμοποιήσει ή να ακυρώσει σε μια γωνιακή έκφραση.

Διαφορά μεταξύ έκφρασης και $eval

Η συνάρτηση $eval επιτρέπει σε κάποιον να αξιολογήσει εκφράσεις μέσα από τον ίδιο τον ελεγκτή. Έτσι, ενώ οι εκφράσεις χρησιμοποιούνται για αξιολόγηση στην προβολή, το $eval χρησιμοποιείται στη συνάρτηση ελεγκτή.

Ας δούμε ένα απλό παράδειγμα σχετικά με αυτό.

Σε αυτό το παράδειγμα,

Απλώς πρόκειται να χρησιμοποιήσουμε τη συνάρτηση $eval για να προσθέσουμε 2 αριθμούς και να την κάνουμε διαθέσιμη στο αντικείμενο πεδίου, ώστε να μπορεί να εμφανιστεί στην προβολή.

Διαφορά μεταξύ έκφρασης και $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. Αρχικά ορίζουμε 2 μεταβλητές 'a' και 'b', καθεμία από τις οποίες έχει τιμή 1.
  2. Χρησιμοποιούμε τη συνάρτηση $scope.$eval για να αξιολογήσουμε την προσθήκη των 2 μεταβλητών και να την αντιστοιχίσουμε στη μεταβλητή scope 'value'.
  3. Τότε απλώς εμφανίζουμε την τιμή της μεταβλητής 'value' στην προβολή.

Εάν ο κώδικας εκτελεστεί με επιτυχία, θα εμφανιστεί η ακόλουθη έξοδος όταν εκτελείτε τον κώδικα στο πρόγραμμα περιήγησης.

Παραγωγή:

Διαφορά μεταξύ έκφρασης και $eval

Η παραπάνω έξοδος δείχνει την έξοδο της έκφρασης που αξιολογήθηκε στο ελεγκτής. Τα παραπάνω αποτελέσματα δείχνουν ότι η έκφραση $eval χρησιμοποιήθηκε για την εκτέλεση της προσθήκης των 2 μεταβλητών εμβέλειας 'a και b' με το αποτέλεσμα να αποστέλλεται και να εμφανίζεται στην προβολή.

Σύνοψη

  • Είδαμε πώς εκφράστηκαν Γωνιακό JS μπορεί να χρησιμοποιηθεί για την αξιολόγηση της τακτικής JavaΕκφράσεις τύπου σεναρίου όπως η απλή πρόσθεση αριθμών.
  • Η οδηγία ng-init μπορεί να χρησιμοποιηθεί για τον καθορισμό μεταβλητών in-line που μπορούν να χρησιμοποιηθούν στην προβολή.
  • Οι εκφράσεις μπορούν να γίνουν για να λειτουργούν με πρωτόγονους τύπους όπως συμβολοσειρές και αριθμούς.
  • Οι εκφράσεις μπορούν επίσης να χρησιμοποιηθούν για εργασία με άλλους τύπους όπως JavaΑντικείμενα σεναρίου και πίνακες.
  • Οι εκφράσεις στο Angular JS έχουν μερικούς περιορισμούς όπως για παράδειγμα να μην έχουν κανονικές εκφράσεις ή να μην χρησιμοποιούν συναρτήσεις, βρόχους ή εντολές υπό όρους.

Μπορεί να σας αρέσει: