Εκφράσεις AngularJS: Πίνακας, Αντικείμενα, $eval, Συμβολοσειρές

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

⚡ Έξυπνη Σύνοψη

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

  • 🧩 Σύνταξη σύνδεσης: Double Οι αγκύλες αποδίδουν μια τιμή εκεί που βρίσκεται η έκφραση, δίνοντας το ίδιο αποτέλεσμα με την οδηγία ng-bind.
  • 🔢 Υποστηριζόμενοι τύποι: Numbers, χορδές, JavaΤα αντικείμενα σεναρίου στα οποία έχει πρόσβαση με σημειογραφία dot και οι πίνακες στους οποίους έχει πρόσβαση μέσω ευρετηρίου αξιολογούνται σωστά.
  • 🏷️ Ενσωματωμένες μεταβλητές: Η οδηγία ng-init δηλώνει μεταβλητές σε επίπεδο προβολής τις οποίες οι εκφράσεις μπορούν στη συνέχεια να διαβάσουν χωρίς ελεγκτή.
  • ️ Αξιολόγηση με επιείκεια: Οι απροσδιόριστες ιδιότητες αποδίδουν απροσδιόριστη τιμή αντί να εμφανίζουν το σφάλμα αναφοράς (ReferenceError). JavaΤο σενάριο θα ανέβαζε την τιμή.
  • 🚫 Σκληρά όρια: Οι βρόχοι, οι εξαιρέσεις, οι δηλώσεις συναρτήσεων, οι κανονικές εκφράσεις και οι τελεστές κόμμα και κενού δεν είναι διαθέσιμοι.
  • ⚙️ Αξιολόγηση Ελεγκτή: Η συνάρτηση $scope.$eval αξιολογεί μια συμβολοσειρά έκφρασης στον κώδικα του ελεγκτή και εκθέτει το αποτέλεσμα στην προβολή.
  • ⚠️ Κατάσταση υποστήριξης: Το AngularJS έφτασε στο τέλος της διάρκειας ζωής του στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις ασφαλείας.
Περισσότερα

Εκφράσεις AngularJS

Τι είναι οι εκφράσεις AngularJS;

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

⚠️ Ειδοποίηση υποστήριξης: Το AngularJS έφτασε τέλος ζωής στις 31 Δεκεμβρίου 2021 και δεν λαμβάνει περαιτέρω ενημερώσεις κώδικα ή διορθώσεις ασφαλείας. Η παρακάτω σύνταξη παραμένει ακριβής για τη διατήρηση υπαρχουσών εφαρμογών AngularJS 1.x. Τα νέα έργα θα πρέπει να χρησιμοποιούν σύγχρονες Γωνιώδης, όπου εξακολουθούν να υπάρχουν αγκύλες παρεμβολής αλλά ng-init και $eval όχι.

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

Οι εκφράσεις AngularJS γράφονται μέσα σε διπλές αγκύλες, όπως στο {{expression}}.

Σύνταξη: ένα απλό παράδειγμα έκφρασης είναι {{5 + 6}}.

Οι εκφράσεις AngularJS συνδέουν δεδομένα σε HTML με τον ίδιο τρόπο όπως η οδηγία ng-bind και το AngularJS εμφανίζει τα δεδομένα ακριβώς εκεί που τοποθετείται η έκφραση.

Σε αυτό το παράδειγμα δείχνουμε μια απλή πρόσθεση αριθμών ως παράσταση.

Εκφράσεις 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. Μια απλή παράσταση προσθέτει δύο αριθμούς.

Παραγωγή:

Εκφράσεις AngularJS

Γίνεται η πρόσθεση του 9 και του 6 και εμφανίζεται το αποτέλεσμα, 15.

AngularJS Numbers

Οι εκφράσεις λειτουργούν με αριθμούς. Αυτό το παράδειγμα πολλαπλασιάζει δύο αριθμητικές μεταβλητές, margin και profitκαι εμφανίζει το προϊόν.

AngularJS Numbers

<!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. Η παράσταση στη συνέχεια πολλαπλασιάζει αυτές τις δύο τοπικές μεταβλητές.

Παραγωγή:

AngularJS Numbers

Πραγματοποιείται ο πολλαπλασιασμός του 2 με το 200 και εμφανίζεται το γινόμενο, 400.

AngularJS Strings

Οι εκφράσεις λειτουργούν επίσης με συμβολοσειρές. Αυτό το παράδειγμα ορίζει firstName και lastName και εμφανίζει και τα δύο.

AngularJS Strings

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

Και οι δύο τιμές εμφανίζονται στην οθόνη.

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

Αντικείμενα AngularJS

Οι εκφράσεις λειτουργούν με JavaΓραφή αντικείμενα, τα οποία αποτελούνται από ζεύγη ονόματος-τιμής. Η σύνταξη ενός JavaΤο αντικείμενο script μοιάζει με αυτό:

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

Αυτό το παράδειγμα ορίζει α person αντικείμενο που περιέχει δύο ζεύγη κλειδιού-τιμής, 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="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}} διαβάστε αυτά τα μέλη. Επειδή ανήκουν στο αντικείμενο, απαιτείται σημειογραφία με τελείες για να επιτευχθούν οι τιμές τους.

Παραγωγή:

Αντικείμενα AngularJS

Οι τιμές του firstName και lastName εμφανίζονται στην οθόνη.

Πίνακες AngularJS

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

Πίνακες 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

Εμφανίζονται τα σημάδια που ορίζονται στον πίνακα.

Δυνατότητες και περιορισμοί έκφρασης 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 vs Expression Braces: Ποια να χρησιμοποιήσετε

Double Τα braces και η οδηγία ng-bind παράγουν την ίδια απόδοση, επομένως η επιλογή μεταξύ τους φαίνεται αυθαίρετη. Δεν είναι. Τα δύο συμπεριφέρονται διαφορετικά κατά τη στιγμή πριν ολοκληρωθεί η φόρτωση του AngularJS και αυτή η διαφορά είναι ορατή στο άτομο που χρησιμοποιεί τη σελίδα.

Άποψη {{ expression }} ng-bind
Γραμμένο σε Περιεχόμενο στοιχείου Ένα χαρακτηριστικό στοιχείου
Πριν από τη φόρτωση του AngularJS Τα ακατέργαστα σιδεράκια αναβοσβήνουν στην οθόνη Δεν εμφανίζεται τίποτα
ευανάγνωστο Υψηλότερη — η τιμή βρίσκεται ενσωματωμένη Κάτω — η τιμή είναι κρυμμένη σε ένα χαρακτηριστικό
Πολλαπλές τιμές ανά στοιχείο Ναι Όχι, μόνο μία σύνδεση
Δέσιμο μίας φοράς Ναι, με {{::value}} Ναι, με ng-bind="::value"

Η σύντομη εμφάνιση των ακατέργαστων αγκυλών είναι γνωστή ως η λάμψη μη παρεμβαλλόμενου περιεχομένου και συμβαίνει επειδή το πρόγραμμα περιήγησης αποδίδει την σήμανση πριν το μεταγλωττίσει το AngularJS. Χρησιμοποιήστε το ng-bind ή προσθέστε την οδηγία ng-cloak για περιεχόμενο ορατό στο πάνω μέρος. Οι αγκύλες παραμένουν η πιο σαφής και ευανάγνωστη επιλογή παντού αλλού, ειδικά όταν εμφανίζονται πολλές τιμές μέσα σε ένα στοιχείο.

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

The $eval Η συνάρτηση αξιολογεί εκφράσεις από το εσωτερικό του ελεγκτή. Οι εκφράσεις αξιολογούνται στην προβολή, ενώ $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.

Παραγωγή:

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

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

Συχνές Ερωτήσεις

Προθέτοντας μια έκφραση με δύο άνω και κάτω τελείες, όπως στο {{::name}}, σταματά να το παρακολουθεί μόλις επιλυθεί μια τιμή. Αυτό καταργεί το εργαλείο παρακολούθησης και μειώνει το κόστος της σύνοψης σε σελίδες με πολλές στατικές συνδέσεις.

$eval αξιολογεί μια συμβολοσειρά αμέσως σε σχέση με μια έκταση. $parse Επιστρέφει μια επαναχρησιμοποιήσιμη συνάρτηση για επαναλαμβανόμενη αξιολόγηση. $interpolate χειρίζεται μια ολόκληρη συμβολοσειρά προτύπου που περιέχει αγκύλες αντί για μία μόνο έκφραση.

Ως επί το πλείστον. AI Τα εργαλεία διατηρούν τις αγκύλες και τα φίλτρα επανεγγραφής ως σωλήνες, αλλά οι μεταβλητές ng-init δεν έχουν ισοδύναμο Angular και πρέπει να μετακινηθούν σε μια κλάση στοιχείων χειροκίνητα.

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

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

Συνοψίστε αυτήν την ανάρτηση με: