Τι είναι μια οδηγία AngularJS;
Μια οδηγία στο AngularJS είναι μια εντολή που δίνει στη HTML νέα λειτουργικότητα. Όταν η γωνιακή διερεύνηση του κώδικα HTML, θα εντοπίσει πρώτα τις οδηγίες στη σελίδα και στη συνέχεια θα αναλύσει ανάλογα τη σελίδα HTML.
Ένα απλό παράδειγμα μιας οδηγίας AngularJS, που έχουμε δει σε προηγούμενα κεφάλαια είναι η "οδηγία μοντέλου ng". Αυτή η οδηγία χρησιμοποιείται για να δεσμεύσει το μοντέλο δεδομένων μας στην άποψή μας.
Σημείωση: Μπορείτε να έχετε βασικό γωνιακό κώδικα σε μια σελίδα HTML με τις οδηγίες ng-init, ng-repeat και ng-model χωρίς να χρειάζεται να έχετε Ελεγκτές. Η λογική για αυτές τις οδηγίες βρίσκεται στο αρχείο Angular.js που παρέχεται από την Google. Οι ελεγκτές είναι οι επόμενες κατασκευές γωνιακού προγραμματισμού που επιτρέπουν την επιχειρησιακή λογική, αλλά όπως αναφέρεται για μια εφαρμογή ως γωνιακή εφαρμογή δεν είναι υποχρεωτική η ύπαρξη ελεγκτή.
Σε αυτό το σεμινάριο, θα μάθετε-
- Πώς να δημιουργήσετε οδηγία
- ng-εφαρμογή
- ng-init
- μοντέλο ng
- ng-επανάληψη
Πώς να δημιουργήσετε οδηγία
Όπως ορίσαμε στην εισαγωγή, οι οδηγίες AngularJS είναι ένας τρόπος επέκτασης της λειτουργικότητας του HTML.
Υπάρχουν 4 οδηγίες που ορίζονται στο AngularJS.
Παρακάτω είναι η λίστα των οδηγιών AngularJS μαζί με παραδείγματα που παρέχονται για να εξηγήσουν κάθε μία από αυτές.
1) ng-app
Αυτό χρησιμοποιείται για την προετοιμασία μιας εφαρμογής Angular.JS. Όταν αυτή η οδηγία εφαρμόζεται σε μια σελίδα HTML, βασικά λέει στην Angular ότι αυτή η σελίδα HTML είναι μια εφαρμογή angular.js.
Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε την οδηγία ng-app. Σε αυτό το παράδειγμα, απλώς πρόκειται να δείξουμε πώς να κάνουμε μια κανονική εφαρμογή HTML μια εφαρμογή angularJS.
Event Registration Guru99 Global Event
Tutorial Name : {{ "Angular" + "JS"}}
Επεξήγηση κώδικα:
- Η οδηγία "ng-app" προστίθεται στην ετικέτα div για να υποδείξει ότι αυτή η εφαρμογή είναι μια εφαρμογή angular.js. Σημειώστε ότι η οδηγία ng-app μπορεί να εφαρμοστεί σε οποιαδήποτε ετικέτα, οπότε μπορεί επίσης να τοποθετηθεί και στην ετικέτα του σώματος.
- Επειδή έχουμε ορίσει αυτήν την εφαρμογή ως εφαρμογή angular.js, μπορούμε τώρα να χρησιμοποιήσουμε τη λειτουργικότητα angular.js. Στην περίπτωσή μας, χρησιμοποιούμε εκφράσεις για να συνδυάσουμε απλά 2 χορδές.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Η έξοδος δείχνει καθαρά την έξοδο της έκφρασης που έγινε δυνατή μόνο επειδή ορίσαμε την εφαρμογή ως εφαρμογή angularjs.
2) ng-init
Αυτό χρησιμοποιείται για την προετοιμασία δεδομένων εφαρμογής. Μερικές φορές μπορεί να απαιτήσετε κάποια τοπικά δεδομένα για την εφαρμογή σας, αυτό μπορεί να γίνει με την οδηγία ng-init.
Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε την οδηγία ng-init.
Σε αυτό το παράδειγμα, πρόκειται να δημιουργήσουμε μια μεταβλητή που ονομάζεται "TutorialName" χρησιμοποιώντας την οδηγία ng-init και θα εμφανίσουμε την τιμή αυτής της μεταβλητής στη σελίδα.
Event Registration Guru99 Global Event
Tutorial Name : {{ TutorialName}}
Επεξήγηση κώδικα:
- Η οδηγία ng-init προστίθεται στην ετικέτα div για να ορίσει μια τοπική μεταβλητή που ονομάζεται "TutorialName" και η τιμή που δίνεται σε αυτό είναι "AngularJS".
- Χρησιμοποιούμε εκφράσεις στο AngularJs για να εμφανίσουμε την έξοδο του μεταβλητού ονόματος "TutorialName" που ορίστηκε στην οδηγία ng-init.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Στην έξοδο,
- Το αποτέλεσμα δείχνει καθαρά την έξοδο της έκφρασης που περιέχει τη συμβολοσειρά "AngularJS". Αυτό οφείλεται στο ότι η συμβολοσειρά "AngularJS" εκχωρείται στη μεταβλητή "TutorialName" στην ενότητα ng-init.
3) μοντέλο ng
Και τέλος, έχουμε την οδηγία ng-model, η οποία χρησιμοποιείται για να δεσμεύσει την τιμή ενός στοιχείου ελέγχου HTML σε δεδομένα εφαρμογών. Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε την οδηγία ng-model
Σε αυτό το παράδειγμα,
- Θα δημιουργήσουμε 2 μεταβλητές που ονομάζονται "ποσότητα" και "τιμή". Αυτές οι μεταβλητές πρόκειται να συνδεθούν με 2 στοιχεία ελέγχου εισαγωγής κειμένου.
- Στη συνέχεια πρόκειται να εμφανίσουμε το συνολικό ποσό με βάση τον πολλαπλασιασμό τόσο των τιμών όσο και των ποσοτικών τιμών.
Event Registration Guru99 Global Event
People : Registration Price : Total : {{quantity * price}}
Επεξήγηση κώδικα:
- Η οδηγία ng-init προστίθεται στην ετικέτα div για να ορίσει 2 τοπικές μεταβλητές. το ένα ονομάζεται "ποσότητα" και το άλλο είναι "τιμή".
- Τώρα χρησιμοποιούμε την οδηγία ng-model για να δεσμεύσουμε τα πλαίσια κειμένου του "People" και "Price registration" στις τοπικές μεταβλητές μας "ποσότητα" και "τιμή" αντίστοιχα.
- Τέλος, παρουσιάζουμε το Σύνολο μέσω μιας έκφρασης, που είναι ο πολλαπλασιασμός των μεταβλητών ποσότητας και τιμής.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
- Η έξοδος δείχνει καθαρά τον πολλαπλασιασμό των τιμών για άτομα και τιμή εγγραφής.
Τώρα, εάν μεταβείτε στα πλαίσια κειμένου και αλλάξετε την τιμή της τιμής "Άτομα και εγγραφή", το σύνολο θα αλλάξει αυτόματα.
- Η παραπάνω έξοδος δείχνει απλώς τη δύναμη της δέσμευσης δεδομένων σε angularJs, η οποία επιτυγχάνεται με τη χρήση της οδηγίας ng-model.
4) ng-επανάληψη
Αυτό χρησιμοποιείται για την επανάληψη ενός στοιχείου HTML. Το παρακάτω παράδειγμα δείχνει πώς να χρησιμοποιήσετε την οδηγία ng-repeat.
Σε αυτό το παράδειγμα,
- Θα έχουμε έναν πίνακα ονομάτων κεφαλαίων σε μια μεταβλητή πίνακα και
- Στη συνέχεια, χρησιμοποιήστε την οδηγία ng-repeat για να εμφανίσετε κάθε στοιχείο του πίνακα ως στοιχείο λίστας
Event Registration Guru99 Global Event
- {{names}}
Επεξήγηση κώδικα:
- Η οδηγία ng-init προστίθεται στην ετικέτα div για να ορίσει μια μεταβλητή που ονομάζεται "κεφάλαια" η οποία είναι μια μεταβλητή πίνακα που περιέχει 3 συμβολοσειρές.
- Το στοιχείο ng-επανάληψης χρησιμοποιείται δηλώνοντας μια ενσωματωμένη μεταβλητή που ονομάζεται "ονόματα" και περνώντας από κάθε στοιχείο στη σειρά κεφαλαίων.
- Τέλος, δείχνουμε την αξία της τοπικής ενσωματωμένης μεταβλητής «ονόματα».
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
- Η παραπάνω έξοδος δείχνει απλώς ότι η οδηγία ng-επανάληψης πήρε κάθε τιμή στον πίνακα που ονομάζεται "κεφάλαια" και δημιούργησε στοιχεία λίστας HTML για κάθε στοιχείο στον πίνακα.
Περίληψη
- Οι οδηγίες χρησιμοποιούνται για την επέκταση της λειτουργικότητας του HTML. Η Angular παρέχει ενσωματωμένες οδηγίες όπως
- ng-app - Χρησιμοποιείται για την προετοιμασία μιας γωνιακής εφαρμογής.
- ng-init - Χρησιμοποιείται για τη δημιουργία μεταβλητών εφαρμογής
- ng-model - Χρησιμοποιείται για τη σύνδεση στοιχείων ελέγχου HTML σε δεδομένα εφαρμογών
- ng-repeat - Χρησιμοποιείται για την επανάληψη στοιχείων χρησιμοποιώντας γωνιακή.