Τι είναι η προσαρμοσμένη οδηγία;
Μια προσαρμοσμένη οδηγία στο Angular Js είναι μια οδηγία καθορισμένη από το χρήστη με την επιθυμητή λειτουργικότητά σας. Παρόλο που το AngularJS έχει πολλές ισχυρές οδηγίες έξω από το κουτί, μερικές φορές απαιτούνται προσαρμοσμένες οδηγίες.
Σε αυτό το σεμινάριο, θα μάθετε-
- Πώς να δημιουργήσετε μια προσαρμοσμένη οδηγία;
- Οδηγίες και Πεδίο εφαρμογής της AngularJs
- Χρήση ελεγκτών με οδηγίες
- Πώς να δημιουργήσετε επαναχρησιμοποιήσιμες οδηγίες
- Οδηγίες και στοιχεία του AngularJS - ng-transclude
- Ένθετες οδηγίες
- Χειρισμός εκδηλώσεων σε μια οδηγία
Πώς να δημιουργήσετε μια προσαρμοσμένη οδηγία;
Ας ρίξουμε μια ματιά σε ένα παράδειγμα του πώς μπορούμε να δημιουργήσουμε μια προσαρμοσμένη οδηγία.
Η προσαρμοσμένη οδηγία στην περίπτωσή μας πρόκειται απλώς να εισαγάγει μια ετικέτα div που έχει το κείμενο "AngularJS Tutorial" στη σελίδα μας όταν καλείται η οδηγία.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Δημιουργούμε πρώτα μια ενότητα για τη γωνιακή εφαρμογή μας. Αυτό απαιτείται για τη δημιουργία μιας προσαρμοσμένης οδηγίας, επειδή η οδηγία θα δημιουργηθεί χρησιμοποιώντας αυτήν την ενότητα.
- Τώρα δημιουργούμε μια προσαρμοσμένη οδηγία που ονομάζεται "ngGuru" και ορίζουμε μια συνάρτηση που θα έχει προσαρμοσμένο κώδικα για την οδηγία μας.
Σημείωση:-
Σημειώστε ότι κατά τον ορισμό της οδηγίας, την ορίσαμε ως ngGuru με το γράμμα «G» ως κεφαλαίο. Και όταν το έχουμε πρόσβαση από την ετικέτα div ως οδηγία, έχουμε πρόσβαση σε αυτό ως ng-γκουρού. Έτσι κατανοεί η γωνιακή προσαρμοσμένη οδηγία που ορίζεται σε μια εφαρμογή. Πρώτον, το όνομα της προσαρμοσμένης οδηγίας πρέπει να ξεκινά με τα γράμματα «ng». Δεύτερον, το σύμβολο παύλας «-» πρέπει να αναφέρεται μόνο όταν καλείτε την οδηγία. Και τρίτον, το πρώτο γράμμα που ακολουθεί τα γράμματα «ng» κατά τον ορισμό της οδηγίας μπορεί να είναι είτε πεζό ή κεφαλαίο.
- Χρησιμοποιούμε την παράμετρο προτύπου την οποία μια παράμετρος ορίζεται από το Angular για προσαρμοσμένες οδηγίες. Σε αυτό, ορίζουμε ότι όποτε χρησιμοποιείται αυτή η οδηγία, τότε απλώς χρησιμοποιήστε την τιμή του προτύπου και εισάγετε τον στον κωδικό κλήσης.
- Εδώ χρησιμοποιούμε τώρα την προσαρμοσμένη οδηγία "ng-guru". Όταν το κάνουμε αυτό, η τιμή που ορίσαμε για το πρότυπό μας "Angular JS Tutorial" θα εισαχθεί τώρα εδώ.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
- Η παραπάνω έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία ng-guru, η οποία έχει το πρότυπο που ορίζεται για την εμφάνιση ενός προσαρμοσμένου κειμένου εμφανίζεται στο πρόγραμμα περιήγησης.
Οδηγίες και Πεδίο εφαρμογής της AngularJs
Το εύρος ορίζεται ως η κόλλα που δεσμεύει τον ελεγκτή στην προβολή διαχειρίζοντας τα δεδομένα μεταξύ της προβολής και του ελεγκτή.
Κατά τη δημιουργία προσαρμοσμένων οδηγιών AngularJs, από προεπιλογή θα έχουν πρόσβαση στο αντικείμενο πεδίου στον γονικό ελεγκτή.
Με αυτόν τον τρόπο, καθίσταται εύκολο για την προσαρμοσμένη οδηγία να κάνει χρήση των δεδομένων που διαβιβάζονται στον κύριο ελεγκτή.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να χρησιμοποιήσουμε το πεδίο εφαρμογής ενός γονικού ελεγκτή στην προσαρμοσμένη οδηγία.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Αρχικά δημιουργήσαμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό, ορίζουμε μια μεταβλητή που ονομάζεται tutorialName και την προσαρτάμε στο αντικείμενο πεδίου σε μία δήλωση - $ lingkop.tutorialName = "AngularJS".
- Στην προσαρμοσμένη οδηγία, μπορούμε να καλέσουμε τη μεταβλητή "tutorialName" χρησιμοποιώντας μια έκφραση. Αυτή η μεταβλητή θα ήταν προσβάσιμη επειδή ορίζεται στον ελεγκτή "DemoController", ο οποίος θα γινόταν ο γονέας για αυτήν την οδηγία.
- Αναφερόμαστε στον ελεγκτή σε μια ετικέτα div, η οποία θα ενεργεί ως η γονική ετικέτα div. Λάβετε υπόψη ότι αυτό πρέπει να γίνει πρώτα, προκειμένου η προσαρμοσμένη οδηγία να έχει πρόσβαση στη μεταβλητή tutorialName.
- Τέλος απλώς επισυνάπτουμε την προσαρμοσμένη οδηγία "ng-guru" στην ετικέτα div.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
- Η παραπάνω έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία μας "ng-guru" κάνει χρήση του πεδίου μεταβλητού πεδίου tutorialName στον γονικό ελεγκτή.
Χρήση ελεγκτών με οδηγίες
Το Angular δίνει τη δυνατότητα πρόσβασης στη μεταβλητή μέλους του ελεγκτή απευθείας από προσαρμοσμένες οδηγίες χωρίς την ανάγκη του αντικειμένου πεδίου.
Αυτό καθίσταται απαραίτητο μερικές φορές επειδή σε μια εφαρμογή ενδέχεται να έχετε αντικείμενα πολλαπλών πεδίων που ανήκουν σε πολλούς ελεγκτές.
Υπάρχει, λοιπόν, μεγάλη πιθανότητα να κάνετε το λάθος να αποκτήσετε πρόσβαση στο αντικείμενο αντικειμένου του λανθασμένου ελεγκτή.
Σε ένα τέτοιο σενάριο υπάρχει ένας τρόπος να αναφέρω συγκεκριμένα λέγοντας "Θέλω να έχω πρόσβαση σε αυτόν τον συγκεκριμένο ελεγκτή" από την οδηγία μου.
Ας ρίξουμε μια ματιά σε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε αυτό.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Αρχικά δημιουργήσαμε έναν ελεγκτή που ονομάζεται "DemoController". Σε αυτό θα ορίσουμε μια μεταβλητή που ονομάζεται "tutorialName" και αυτή τη φορά αντί να την συνδέσουμε στο αντικείμενο πεδίου, θα την επισυνάψουμε απευθείας στον ελεγκτή.
- Στην προσαρμοσμένη οδηγία, αναφέρουμε συγκεκριμένα ότι θέλουμε να χρησιμοποιήσουμε τον ελεγκτή "DemoController" χρησιμοποιώντας τη λέξη-κλειδί παραμέτρου ελεγκτή.
- Δημιουργούμε μια αναφορά στον ελεγκτή χρησιμοποιώντας την παράμετρο "controllerAs". Αυτό ορίζεται από το Angular και είναι ο τρόπος αναφοράς του ελεγκτή ως αναφοράς.
Σημείωση: - Είναι δυνατή η πρόσβαση σε πολλούς ελεγκτές σε μια οδηγία καθορίζοντας αντίστοιχα μπλοκ του ελεγκτή, του ελεγκτή και των προτύπων.
- Τέλος, στο πρότυπό μας, χρησιμοποιούμε την αναφορά που δημιουργήθηκε στο βήμα 3 και χρησιμοποιούμε τη μεταβλητή μέλους που προσαρτήθηκε απευθείας στον ελεγκτή στο Βήμα 1.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Η έξοδος δείχνει ξεκάθαρα ότι η προσαρμοσμένη οδηγία έχει ειδική πρόσβαση στο DemoController και στο μέλος μεταβλητή tutorialName που επισυνάπτεται σε αυτό και εμφανίζει το κείμενο "Angular".
Πώς να δημιουργήσετε επαναχρησιμοποιήσιμες οδηγίες
Έχουμε ήδη δει τη δύναμη των προσαρμοσμένων οδηγιών, αλλά μπορούμε να το φτάσουμε στο επόμενο επίπεδο δημιουργώντας τις δικές μας επαναχρησιμοποιούμενες οδηγίες.
Ας πούμε, για παράδειγμα, ότι θέλαμε να εισάγουμε κώδικα που θα εμφανίζει πάντα τις παρακάτω ετικέτες HTML σε πολλές οθόνες, ο οποίος βασικά είναι απλώς μια εισαγωγή για το "Όνομα" και την "ηλικία" του χρήστη.
Για να επαναχρησιμοποιήσουμε αυτήν τη λειτουργία σε πολλές οθόνες χωρίς να κωδικοποιούμε κάθε φορά, δημιουργούμε ένα κύριο στοιχείο ελέγχου ή μια γωνιακή οδηγία για να κρατούμε αυτά τα στοιχεία ελέγχου ("Όνομα" και "ηλικία" του χρήστη)
Τώρα, αντί να εισάγουμε τον ίδιο κωδικό για την παρακάτω οθόνη κάθε φορά, μπορούμε πραγματικά να ενσωματώσουμε αυτόν τον κώδικα σε μια οδηγία και να ενσωματώσουμε αυτήν την οδηγία ανά πάσα στιγμή.
Ας δούμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε.
Event Registration Guru99 Global Event
Επεξήγηση κώδικα:
- Στο απόσπασμα κώδικα για μια προσαρμοσμένη οδηγία, αυτό που αλλάζει είναι μόνο η τιμή που δίνεται στην παράμετρο προτύπου της προσαρμοσμένης οδηγίας.
Αντί για ένα σχέδιο πέντε ετικετών ή κειμένου, εισάγουμε πραγματικά ολόκληρο το τμήμα των 2 στοιχείων ελέγχου εισαγωγής για το "Όνομα" και το "ηλικία" που πρέπει να εμφανίζονται στη σελίδα μας.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
Από την παραπάνω έξοδο, μπορούμε να δούμε ότι το απόσπασμα κώδικα από το πρότυπο της προσαρμοσμένης οδηγίας προστίθεται στη σελίδα.
Οδηγίες και στοιχεία του AngularJS - ng-transclude
Όπως αναφέραμε πολύ νωρίτερα, το Angular έχει σκοπό να επεκτείνει τη λειτουργικότητα του HTML. Και έχουμε ήδη δει πώς μπορούμε να κάνουμε έγχυση κώδικα χρησιμοποιώντας προσαρμοσμένες επαναχρησιμοποιήσιμες οδηγίες.
Όμως, στη σύγχρονη ανάπτυξη εφαρμογών ιστού, υπάρχει επίσης μια ιδέα ανάπτυξης συστατικών ιστού. Αυτό σημαίνει βασικά τη δημιουργία των δικών μας ετικετών HTML που μπορούν να χρησιμοποιηθούν ως συστατικά στον κώδικα μας.
Ως εκ τούτου, η γωνιακή παρέχει ένα άλλο επίπεδο ισχύος για την επέκταση των ετικετών HTML, δίνοντας τη δυνατότητα να εισάγετε χαρακτηριστικά στις ίδιες τις ετικέτες HTML.
Αυτό γίνεται με την ετικέτα " ng-transclude ", η οποία είναι ένα είδος ρύθμισης για να πείτε στη γωνία να καταγράφει ό, τι περιλαμβάνεται στην οδηγία στη σήμανση.
Ας πάρουμε ένα παράδειγμα για το πώς μπορούμε να το επιτύχουμε αυτό.
Event Registration Guru99 Global Event
Angular JS
Επεξήγηση κώδικα:
- Χρησιμοποιούμε την οδηγία για να ορίσουμε μια προσαρμοσμένη ετικέτα HTML που ονομάζεται "pane" και προσθέτουμε μια συνάρτηση που θα βάλει κάποιο προσαρμοσμένο κώδικα για αυτήν την ετικέτα. Στην έξοδο, η προσαρμοσμένη ετικέτα παραθύρου μας θα εμφανίσει το κείμενο "AngularJS" σε ένα ορθογώνιο με συμπαγές μαύρο περίγραμμα.
- Το χαρακτηριστικό "transclude" πρέπει να αναφέρεται ως αληθινό, το οποίο απαιτείται από τη γωνιακή για την ένεση αυτής της ετικέτας στο DOM μας.
- Στο πεδίο εφαρμογής, ορίζουμε ένα χαρακτηριστικό τίτλου. Τα χαρακτηριστικά ορίζονται συνήθως ως ζεύγη ονόματος / τιμής όπως: name = "value". Στην περίπτωσή μας, το όνομα του χαρακτηριστικού στην ετικέτα HTML του παραθύρου μας είναι "τίτλος". Το σύμβολο "@" είναι η απαίτηση από γωνιακό. Αυτό γίνεται έτσι ώστε όταν εκτελείται ο τίτλος γραμμής = {{title}} στο Βήμα 5, ο προσαρμοσμένος κώδικας για το χαρακτηριστικό title προστίθεται στην ετικέτα HTML του παραθύρου.
- Ο προσαρμοσμένος κώδικας για τα χαρακτηριστικά τίτλου που σχεδιάζει απλώς ένα μαύρο περίγραμμα για τον έλεγχό μας.
- Τέλος, καλούμε την προσαρμοσμένη ετικέτα HTML μαζί με το χαρακτηριστικό τίτλου που ορίστηκε.
Εάν ο κωδικός εκτελεστεί με επιτυχία, η ακόλουθη έξοδος θα εμφανιστεί όταν εκτελείτε τον κωδικό σας στο πρόγραμμα περιήγησης.
Παραγωγή:
- Η έξοδος δείχνει καθαρά ότι το χαρακτηριστικό τίτλου της ετικέτας html5 του παραθύρου έχει οριστεί στην προσαρμοσμένη τιμή του "Angular.JS".
Ένθετες οδηγίες
Οι οδηγίες στη γωνιακή μπορούν να τοποθετηθούν. Όπως ακριβώς εσωτερικές ενότητες ή λειτουργίες σε οποιαδήποτε γλώσσα προγραμματισμού, ίσως χρειαστεί να ενσωματώσετε οδηγίες μεταξύ τους.
Μπορείτε να κατανοήσετε καλύτερα αυτό βλέποντας το παρακάτω παράδειγμα.
Σε αυτό το παράδειγμα, δημιουργούμε 2 οδηγίες που ονομάζονται "εξωτερικό" και "εσωτερικό".
- Η εσωτερική οδηγία εμφανίζει ένα κείμενο που ονομάζεται "Εσωτερικό".
- Ενώ η εξωτερική οδηγία καλεί πραγματικά την εσωτερική οδηγία να εμφανίσει το κείμενο που ονομάζεται "Εσωτερικό".
Guru99 Global Event