Οδηγίες AngularJS: ng-init, ng-app, ng-model & ng-repeat

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

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

Οι οδηγίες AngularJS επεκτείνουν την απλή HTML με νέα συμπεριφορά. Οι δείκτες ng-app, ng-init, ng-model και ng-repeat εκκινούν μια εφαρμογή, δημιουργούν δεδομένα σε τοπικό επίπεδο, συνδέουν στοιχεία ελέγχου φόρμας με το μοντέλο και κλωνοποιούν στοιχεία μία φορά ανά στοιχείο συλλογής.

  • 🧩 Βασική ιδέα: Μια οδηγία είναι ένας δείκτης σε ένα στοιχείο HTML που λέει στον μεταγλωττιστή AngularJS να του προσθέσει μια συμπεριφορά.
  • 🚀 Bootstrap Point: Το ng-app δηλώνει το root στοιχείο και ξεκινά αυτόματα το AngularJS μόλις φορτώσει η σελίδα.
  • 🧮 Τοπικά δεδομένα: Η ng-init αντιστοιχίζει αρχικές τιμές σε μεταβλητές εμβέλειας μέσα στο markup, χωρίς να απαιτείται ελεγκτής.
  • 🔄 Διπλής κατεύθυνσης βιβλιοδεσία: Το ng-model συνδέει μια είσοδο, μια επιλογή ή μια περιοχή κειμένου με μια ιδιότητα εμβέλειας, επομένως οι επεξεργασίες ενημερώνουν το μοντέλο άμεσα.
  • 📋 Επαναλαμβανόμενη σήμανση: Η ng-repeat κλωνοποιεί το στοιχείο host της μία φορά για κάθε στοιχείο σε έναν πίνακα ή αντικείμενο.
  • ️ Τέσσερις Μορφές Επίκλησης: Η ιδιότητα restrict δέχεται E, A, C και M για τη σύνταξη στοιχείων, χαρακτηριστικών, κλάσεων και σχολίων.
  • 📚 Ευρύτερη Βιβλιοθήκη: Το AngularJS αποστέλλει δεκάδες ενσωματωμένες οδηγίες, μεταξύ των οποίων ng-bind, ng-if, ng-show, ng-class και ng-click.
Περισσότερα

Οδηγίες AngularJS

Τι είναι η Οδηγία στο AngularJS;

A Οδηγία στο AngularJS είναι μια εντολή που δίνει στην HTML νέες λειτουργίες. Όταν το AngularJS επεξεργάζεται τον κώδικα HTML, πρώτα θα βρει τις οδηγίες στη σελίδα και στη συνέχεια θα αναλύσει τη σελίδα HTML ανάλογα. Ένα απλό παράδειγμα μιας οδηγίας AngularJS, την οποία έχουμε δει σε προηγούμενα κεφάλαια, είναι η οδηγία "ng-model". Αυτή η οδηγία χρησιμοποιείται για να συνδέσει το μοντέλο δεδομένων μας με την προβολή μας.

Σημείωση: Μπορείτε να έχετε βασικό κώδικα AngularJS σε μια σελίδα HTML με τις οδηγίες ng-init, ng-repeat και ng-model χωρίς να χρειάζεται να έχετε Ελεγκτές. Η λογική για αυτές τις οδηγίες βρίσκεται στο αρχείο AngularJS το οποίο παρέχεται από GoogleΟι ελεγκτές είναι οι δομές προγραμματισμού AngularJS επόμενου επιπέδου που επιτρέπουν την επιχειρηματική λογική, αλλά όπως αναφέρθηκε, για να είναι μια εφαρμογή AngularJS δεν είναι υποχρεωτικό να υπάρχει ελεγκτής.

Αλλά πώς καταλήγει ένα πρόγραμμα περιήγησης να εκτελεί ένα τέτοιο πρόγραμμα;

Πώς λειτουργούν οι οδηγίες AngularJS σε HTML

Όπως ορίσαμε στην εισαγωγή, μια οδηγία AngularJS είναι ένας τρόπος επέκτασης της λειτουργικότητας του HTMLΌταν φορτώνει η σελίδα, ο μεταγλωττιστής AngularJS περιηγείται στο DOM, αντιστοιχίζει κάθε στοιχείο με τις καταχωρημένες οδηγίες και επισυνάπτει τη συμπεριφορά που βρίσκει.

AngularJS Διαθέτει δεκάδες ενσωματωμένες οδηγίες, καθώς και όσες καταχωρίσετε μόνοι σας. Οι τέσσερις που εξηγούνται παρακάτω με λειτουργικά παραδείγματα, ng-app, ng-init, ng-model και ng-repeat, είναι αυτές που συναντούν πρώτα οι αρχάριοι. Πριν από αυτά τα παραδείγματα, σημειώστε τους τέσσερις τρόπους με τους οποίους μπορεί να γραφτεί μια οδηγία.

Ποιοι είναι οι τέσσερις τύποι οδηγιών AngularJS;

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

περιορισμός τιμής Αντιστοιχισμένο από Παράδειγμα σήμανσης Τυπική χρήση
E Όνομα στοιχείου Αυτοτελή μπλοκ που κατέχουν ένα πρότυπο
A Χαρακτηριστικό Προσθήκη συμπεριφοράς σε ένα υπάρχον στοιχείο
C Ονομα τάξης Παλαιότερη σήμανση που δεν μπορεί να δεχτεί νέα χαρακτηριστικά
M Σχόλιο Σπάνιο, διατηρείται για συμβατότητα με παλαιότερες εκδόσεις

💡 Συμβουλή: Προτιμώμενη σύνταξη στοιχείων και χαρακτηριστικών. Η επίσημη αναφορά στην οδηγία AngularJS αντιμετωπίζει τις φόρμες κλάσης και σχολίων ως legacy επιλογές. Όλα τα παρακάτω παραδείγματα χρησιμοποιούν σύνταξη χαρακτηριστικών.

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

ng-app στο AngularJS

Αυτό χρησιμοποιείται για την αρχικοποίηση μιας εφαρμογής AngularJS. Όταν αυτή η οδηγία είναι εγκατεστημένη σε μια σελίδα HTML, ουσιαστικά λέει στο AngularJS ότι αυτή η σελίδα HTML είναι μια εφαρμογή AngularJS.

Παράδειγμα ng-app

Το παρακάτω παράδειγμα δείχνει πώς να μετατρέψετε μια κανονική εφαρμογή HTML σε εφαρμογή AngularJS.

ng-app στο 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.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>

<h1> Guru99 Global Event</h1>

<div ng-app="">

    Tutorial Name : {{ "Angular" + "JS"}}

</div>

</body>
</html>

⚠️ Προειδοποίηση: Η καταχώριση διατηρεί το πρωτότυπο chrset="UTF 8", ακριβώς όπως δημοσιεύτηκε. Το σωστό χαρακτηριστικό είναι charset="UTF-8".

Code Επεξήγηση:

  1. Η οδηγία "ng-app" προστίθεται στην ετικέτα div μας για να υποδείξει ότι αυτή η εφαρμογή είναι μια εφαρμογή AngularJS. Σημειώστε ότι η οδηγία ng-app μπορεί να εφαρμοστεί σε οποιαδήποτε ετικέτα, επομένως μπορεί επίσης να τοποθετηθεί στην ετικέτα body.
  2. Επειδή έχουμε ορίσει αυτήν την εφαρμογή ως εφαρμογή AngularJS, μπορούμε τώρα να χρησιμοποιήσουμε τη λειτουργικότητα του AngularJS. Στην περίπτωσή μας, χρησιμοποιούμε εκφράσεις για να απλώς συνενώσουμε 2 συμβολοσειρές.

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

Παραγωγή:

ng-app στο AngularJS

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

ng-init στο AngularJS

Αυτό χρησιμοποιείται για την αρχικοποίηση δεδομένων εφαρμογής. Μερικές φορές μπορεί να χρειαστείτε κάποια τοπικά δεδομένα για την εφαρμογή σας και αυτό μπορεί να γίνει με την οδηγία ng-init.

Παράδειγμα ng-init

Σε αυτό το παράδειγμα, θα δημιουργήσουμε μια μεταβλητή που ονομάζεται "TutorialName" χρησιμοποιώντας την οδηγία ng-init και θα εμφανίσουμε την τιμή αυτής της μεταβλητής στη σελίδα.

ng-init στο 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.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>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="TutorialName='Angular JS'">

    Tutorial Name : {{ TutorialName}}

</div>

</body>
</html>

Code Επεξήγηση:

  1. Η οδηγία ng-init προστίθεται στην ετικέτα div μας για να ορίσει μια τοπική μεταβλητή που ονομάζεται "TutorialName" και η τιμή που δίνεται σε αυτήν είναι "AngularJS".
  2. Χρησιμοποιούμε εκφράσεις σε AngularJS για να εμφανίσουμε την έξοδο της μεταβλητής με όνομα "TutorialName", η οποία ορίστηκε στην οδηγία ng-init.

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

Παραγωγή:

ng-init στο AngularJS

Στην έξοδο,

  • Το αποτέλεσμα δείχνει καθαρά την έξοδο της έκφρασης που περιέχει τη συμβολοσειρά "AngularJS". Αυτό οφείλεται στην εκχώρηση της συμβολοσειράς "AngularJS" στη μεταβλητή "TutorialName" στην ενότητα ng-init.

Η επόμενη οδηγία στέλνει δεδομένα πίσω από την οθόνη στο μοντέλο.

ng-model στο AngularJS

Και τέλος, έχουμε την οδηγία ng-model, η οποία χρησιμοποιείται για να συνδέσει την τιμή ενός στοιχείου ελέγχου HTML με δεδομένα εφαρμογής.

Παράδειγμα ng-model

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

  • Θα δημιουργήσουμε 2 μεταβλητές που ονομάζονται «ποσότητα» και «τιμή». Αυτές οι μεταβλητές θα δεσμευτούν σε 2 στοιχεία ελέγχου εισαγωγής κειμένου.
  • Στη συνέχεια θα εμφανίσουμε το συνολικό ποσό με βάση τον πολλαπλασιασμό των τιμών τιμής και ποσότητας.

ng-model στο 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.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>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="quantity=1;price=5">

    People : <input type="number" ng-model="quantity">

    Registration Price : <input type="number" ng-model="price">

    Total : {{quantity * price}}

</div>

</body>
</html>

Code Επεξήγηση:

  1. Η οδηγία ng-init προστίθεται στην ετικέτα div μας για να ορίσει 2 τοπικές μεταβλητές. το ένα ονομάζεται «ποσότητα» και το άλλο «τιμή».
  2. Τώρα χρησιμοποιούμε την οδηγία ng-model για να συνδέσουμε τα πλαίσια κειμένου "Άτομα" και "Τιμή εγγραφής" στις τοπικές μας μεταβλητές "ποσότητα" και "τιμή" αντίστοιχα.
  3. Τέλος, δείχνουμε το Σύνολο μέσω μιας έκφρασης, η οποία είναι ο πολλαπλασιασμός των μεταβλητών ποσότητας και τιμής.

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

Παραγωγή:

ng-model στο AngularJS

  • Η έξοδος δείχνει καθαρά τον πολλαπλασιασμό των τιμών για άτομα και τιμή εγγραφής.

Τώρα, αν αλλάξετε την τιμή των Άτομα και της Τιμής Εγγραφής στα πλαίσια κειμένου, το Σύνολο αλλάζει αυτόματα.

ng-model στο AngularJS

  • Το παραπάνω αποτέλεσμα δείχνει απλώς τη δύναμη της σύνδεσης δεδομένων στο AngularJS, η οποία επιτυγχάνεται με τη χρήση του οδηγία ng-model.

Το τελευταίο από τα τέσσερα χειρίζεται πολλές τιμές ταυτόχρονα.

ng-repeat στο AngularJS

Αυτό χρησιμοποιείται για την επανάληψη ενός στοιχείου HTML. Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε το ng-repeat οδηγία.

Παράδειγμα ng-repeat

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

  • Θα έχουμε έναν πίνακα ονομάτων κεφαλαίων σε μια μεταβλητή πίνακα και
  • στη συνέχεια χρησιμοποιήστε την οδηγία ng-repeat για να εμφανίσετε κάθε στοιχείο του πίνακα ως στοιχείο λίστας

ng-repeat στο 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.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>

<h1> Guru99 Global Event</h1>

<div ng-app="" ng-init="chapters=['Controllers','Models','Filters']">
    <ul>
        <li ng-repeat="names in chapters">
            {{names}}
        </li>
    </ul>

</div>

</body>
</html>

Code Επεξήγηση:

  1. Η οδηγία ng-init προστίθεται στην ετικέτα div μας για να ορίσει μια μεταβλητή που ονομάζεται "κεφάλαια", η οποία είναι μια μεταβλητή πίνακα που περιέχει 3 συμβολοσειρές.
  2. Το στοιχείο ng-repeat χρησιμοποιείται δηλώνοντας μια ενσωματωμένη μεταβλητή που ονομάζεται "names" και περνώντας από κάθε στοιχείο στον πίνακα κεφαλαίων.
  3. Τέλος, δείχνουμε την τιμή της τοπικής ενσωματωμένης μεταβλητής 'names'.

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

Παραγωγή:

ng-repeat στο AngularJS

  • Η παραπάνω έξοδος δείχνει απλώς ότι η οδηγία ng-repeat πήρε κάθε τιμή στον πίνακα που ονομάζεται "κεφάλαια" και δημιούργησε στοιχεία λίστας HTML για κάθε στοιχείο του πίνακα.

Αυτά τα τέσσερα καλύπτουν την εκκίνηση, τα δεδομένα, τη σύνδεση και την επανάληψη. Η παρακάτω λίστα δείχνει τι ακολουθεί.

Άλλες συχνά χρησιμοποιούμενες ενσωματωμένες οδηγίες AngularJS

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

  • ng-bind: Γράφει μια τιμή εμβέλειας στο κείμενο ενός στοιχείου χωρίς να εμφανίζει για λίγο ακατέργαστες αγκύλες κατά τη φόρτωση.
  • ng-if: Αφαιρεί το στοιχείο από το DOM όταν η έκφρασή του είναι ψευδής και το αναδημιουργεί όταν είναι αληθής.
  • ng-show και ng-hide: TogglΟρατότητα με CSS. Το στοιχείο παραμένει στο DOM, επομένως οι επαναλαμβανόμενες εναλλαγές κοστίζουν λιγότερο.
  • ng-κλάση: Προσθέτει ή αφαιρεί κλάσεις CSS από μια έκφραση, επιτρέποντας στο στυλ να ακολουθεί το μοντέλο.
  • ng-κλικ: Εκτελεί μια έκφραση ή μια συνάρτηση εμβέλειας όταν ο χρήστης κάνει κλικ στο στοιχείο.
  • ελεγκτής ng: Συνδέει έναν ελεγκτή σε ένα μπλοκ σήμανσης μόλις η σελίδα ξεπεράσει το ng-init.
  • ng-απενεργοποιημένο και ng-μόνο για ανάγνωση: Ορίστε το αντίστοιχο χαρακτηριστικό form όποτε η έκφρασή τους είναι αληθής.

Οι παρακάτω Συχνές Ερωτήσεις απαντούν στις ερωτήσεις που ακολουθούν συχνότερα αυτήν τη λίστα.

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

Το AngularJS ομαλοποιεί τα ονόματα των χαρακτηριστικών πριν τα αντιστοιχίσει. Αφαιρεί οποιοδήποτε πρόθεμα x ή data και, στη συνέχεια, μετατρέπει τα διαχωριστικά παύλας, άνω και κάτω τελείας ή υπογράμμισης σε διαχωριστικά πεζών-κεφαλαίων. Αυτός είναι ο λόγος για τον οποίο τα data-ng-app, x-ng-app και ng:app επιλύονται όλα στην ίδια οδηγία ngApp.

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

Όχι. Η επίσημη υποστήριξη για το AngularJS έληξε τον Ιανουάριο του 2022, επομένως δεν θα κυκλοφορήσουν άλλες ενημερώσεις κώδικα. Οι υπάρχουσες σελίδες συνεχίζουν να λειτουργούν, αλλά τα νέα έργα θα πρέπει να ξεκινήσουν στο σύγχρονο Angular, όπου αυτές οι οδηγίες γίνονται στοιχεία και δομικές οδηγίες όπως *ngIf και *ngFor.

Εν μέρει. Βοηθοί όπως GitHub Copilot Ξαναγράψτε αξιόπιστα το ng-repeat ως *ngFor και το ng-if ως *ngIf. Η κληρονομικότητα εμβέλειας, οι αμφίδρομες συνδέσεις και οι προσαρμοσμένες συναρτήσεις σύνδεσης χρειάζονται ακόμη έναν ανθρώπινο έλεγχο πριν από την αποστολή του μετεγκατεστημένου κώδικα.

Επικολλήστε την μορφοποίηση, τη δήλωση της ενότητας και την έξοδο της κονσόλας στο ChatGPT και να ρωτήσει ποια οδηγία δεν ταίριαξε. Συνήθως εντοπίζει ένα ng-app που λείπει, ένα χαρακτηριστικό με ορθογραφία λάθος ή μια τιμή περιορισμού που μπλοκάρει την επιλεγμένη σύνταξη.

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